关于做公司app的软件或网站,怎么免费做一个网站做淘宝客,国内坚持做正品的网站,wordpress本地调试慢w3c 官网 这里是 html4 的内容
大标题小节一、关于HTML1. 基本语法2. HTML常用标签3. 相对路径和绝对路径二、css基础1. 表单元素2. 创建样式表3. css语法4. css选择器三、css的相关属性1. 列表 li 独有的属性list-style2. 边框属性border3. overflow4. 浮动 float 遇到的坑5.…w3c 官网 这里是 html4 的内容
大标题小节一、关于HTML1. 基本语法2. HTML常用标签3. 相对路径和绝对路径二、css基础1. 表单元素2. 创建样式表3. css语法4. css选择器三、css的相关属性1. 列表 li 独有的属性list-style2. 边框属性border3. overflow4. 浮动 float 遇到的坑5. 文本相关属性6. 数字单词自动换行7. 背景相关属性background8. 常用图片格式9. 定位属性position10. 透明属性四、盒模型1. padding2. margin五、锚点和热点1. 锚点2. 热点一、关于HTML
1. 基本语法
1命名规则 字母必须以英文开头名称全部用小写英文字母、数字、下划线的组合其中不得包含汉字、空格和特殊字符尽量不要使用大写字母 2标签
双标记 标记 属性“属性值” 属性“属性值”/标记单标记标记 属性“属性值” /
3注意点
写在 中的第一个单词叫做标记标签元素。标记和属性用空格隔开属性和属性值用等号连接属性值必须放在 号内。一个标记可以没有属性也可以有多个属性属性和属性之间不分先后顺序。空标记没有结束标签用 / 代替。
4基本写法
!-- head标签里面可以放title, style,meta, link, script, noscript, and base --
!doctype html !--- 声明。告诉浏览器这是html5版本的写法 ----
htmlhead !---页头、也叫“站头”网站头部 ---meta charsetUTF-8 / !---- 翻译国际编码。识别中文不加这个会乱码 -----title/title !---- 网站名中文名不合适 ----/headbody/body !--- 主体部分 ---
/html2. HTML常用标签 HTML标签的种类块元素、行元素、行内块元素 1块状元素天生能换行的元素
h1文本标题/h1 文本标题标签(h1-h6)h1标签常作为网站logo的父标签h2是新闻页中的大标题。p段落/p 段落标签br/ 强制换行标签nbsp; 空格 网页实体hr/水平线标签ulli无序/lili无序/lili无序/li/ul 无序列表olli有序/lili有序/lili有序/li/ol 有序列表dldt标题/dtdd内容/dddd内容/dd/dl 自定义列表
注意①p标签 不能放“天生的块元素”; ②h标签 内不能放其他的 h标签否则会父子变兄弟。
2行内元素天生不能换行的元素
b/b 加粗的标签i/i 倾斜的标签u/u 下划线标签strong/strong 加重语气的加粗标签强调比 b标签 更重要em/em 加重语气的倾斜标签强调比 i标签 更重要s/s 删除线span/span 文本标签a/a 超链接标签del/del
!-- a标签中的两个重要属性 ---
!-- href超链接属性target_blank新窗口打开 --
a href# target_blank/a !-- 空链接,不跳转页面但是点击会刷新页面 --
a href./b.html target_blank/a !-- 相对路径 --
a hrefwww.baidu.com target_blank/a !-- 绝对路径 --3行内块元素天生不能换行但能设置宽高的元素
img 图片元素表单元素
!-- img标签中的重要属性 ---
!-- src图片路径title标题属性鼠标放图标上回显示“标题属性”的文字属性 --
!-- alt替换文本如果无法显示图像浏览器将显示“替换文本”的文字内容 --
img src图片路径 title标题属性 alt替换文本 /!-- 图片超链接 --
a href#img src图片路径 /
/a4表格元素
table/table 表格tr/tr 表格行td/td 表格列
!-- table标签中的属性 ---
!-- width500表格宽度height300表格高度border1表格边框 --
!-- bgcolorred表格背景颜色bordercolor表格边框颜色包括table边框和td边框 --
!-- cellspacing10单元格与单元格之间的距离默认2pxcellpadding10单元格与内容之间的距离原表格内文字默认靠左上下居中 --
table border1/table!-- tr标签中的属性 ---
!-- alignleft/center/right 水平对齐方式 --
tr alignleft/tr!-- td标签中的属性 ---
!-- colspan2合并列rowspan2合并行 --
td colspan2/td合并规则 合并列合并n列当前tr中少 n-1 个td。 合并行合并n行该td所在tr下面的 n-1 个 tr 中都要少1个td。
5块元素、行元素、行内块元素的区别 3. 相对路径和绝对路径 绝对路径就是写死的路径,缺点是换设备会出现路径找不到问题 相对路径就是灵活的路径,优点是不会因为设备更换出现路径问题, 1绝对路径 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。 例如C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。
2相对路径 相对于某个基准目录的路径。包含Web的相对路径HTML中的相对目录。 例如在Servlet中/“代表Web应用的根目录。物理路径的相对表示例如”./ 代表当前目录…/代表上级目录。这种类似的表示也是属于相对路径。
/表示源文件的根目录 ./表示当前文件所在的目录(可以省略) ../表示当前文件所在的目录的上一级目录 二、css基础
css 层叠样式表web 标准中的表现语音目前推荐遵循的是 w3c 发布的 css3.0。css 样式有两部分组成选择符选择器声明{属性属性值}。
1. 表单
form/form
1form 标签的属性
name“定义表单名”method“get/post”action“请求地址/跳转地址”
2其他表单元素
textarea文本内容/textarea 多行文本输入框selectoption下拉框内容1/optionoption下拉内容2/option/select 下拉框其中 selectedselected表示默认选中写在 标签中input type表单元素类型 value默认值 / 表单元素
!-- type的值可以是 --
text 单行文本输入框常与 placeholder 属性提示信息一起使用
password 面膜输入框
radio 单选框checkedchecked默认选中常于 name 属性一起使用
checkbod 复选框checkedchecked默认选中
submit 提交按钮
reset 重置按钮
button 自定义按钮input typeradio namesex value传给后台的值 checkedchecked /男
input typeradio namesex value传给后台的值/女
input typeradio namesex value传给后台的值/保密3form 中 name 的作用
name 属性用于对提交到服务器后的表单数据进行标识或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
4form 中的 method get/post method,传输方式默认 get常用 get 的传输方式。两者的区别
get 通过地址栏传输会将信息拼接到地址栏上。而 post 不会讲信息拼接到地址栏上post 的传输方式比 get 安全post 能传输大量信息get 传输速度比 post 快( get 没有加密 )。 2. 创建样式表
1内联样式表style typetext/csscss语法/style最好写在head/head中
2外部样式表link relstylesheet typetext/css href路径 / 和 import url(路径); 顶部部小标签link relicon href% BASE_URL %favicon.ico% BASE_URL % 可以省略主要作用是将图片编译成 base64
区别linkimport1. 从属关系link是HTML提供的标签不仅可以加载 CSS 文件还可以定义 RSS、rel 连接属性等。import是 CSS 提供的语法规则只有导入样式表加载CSS的作用。2. 加载顺序当一个页面被加载的时候就是被浏览者浏览的时候link引用的CSS会同时被加载。而import引用的CSS 会等到页面全部被下载完再被加载所以有时候浏览import加载CSS的页面时开始会没有样式。3. 兼容性的差别link标签作为 HTML 元素不存在兼容性问题。import是CSS2.1提出的所以老的浏览器不支持import只t在IE5以上的才能识别。4. 使用dom控制样式时的差别当使用javascript控制dom去改变样式的时候只能使用link标签。import不是 dom 可以控制的。5. 权重区别link引入的样式权重大于import引入的样式。
3内联样式表嵌入式、行间、行内div style“height:100px;background:red;” /div 内联样式表的优先级别权重最高内部样式表与外部样式表的优先级和书写的顺序有关后书写的优先级别高。 3. css语法
选择符(或选择器){属性:属性值;属性:属性值;} 例如div{width:200px;height:100px;background:red; } 1每个CSS样式由两部分组成即选择符和声明声明又分为属性和属性值 2属性必须放在花括号中属性与属性值用冒号连接。 3每条声明用分号结束。 4当一个属性有多个属性值的时候属性值与属性值不分先后顺序 5在书写样式过程中空格、换行等操作不影响属性显示。 注释 html 代码 !-- 注释内容 -- 注释 css 代码 /*注释内容*/ 4. css选择器的优先级权重
选择器就是运用不同手段来选择特定元素的方法。 内联样式表的权重最高1000 继承样式的权重为0000。 1id 选择符 0100 2class 选择符 0010 3伪类选择符 0010 4元素选择符类型选择符0001 5后代选择符 后代选择符的权重之和 6群组选择符 7通配符 选择符叠加写法div.box.red。 例如#box .list.list li{} 权重121div#box .list li 权重112。
/* 可以缺少但是不能改变位置因为:hover和:active是同时触发的后书写的会覆盖前面写的css*/a:link{}/*初始状态没有点击过的状态,只有 a 标签有该伪类选择符*/a:visited{}/*被访问过后的状态,只有 a 标签有该伪类选择符*/a:hover{}/*鼠标滑过时的状态*/a:active{}/*鼠标按下不放的状态*/三、css的相关属性
1. 列表 li 独有的属性 list-style 复合写法list-style:square inside url(/i/arrow.gif);可以不设置其中的某个值。 list-style: none 表示没有列表符号。 1 list-style-type 设置列表符号。属性值 disc(实心圆) 、 circle(空心圆) 、 square(实心方块) 、 none(去掉列表符号)
2list-style-image:url(路径) 自定义图片列表符号
3list-style-position 定义符号所在位置。outside(默认外边) 、 inside(里边) 常用 list-style-type:none; 因为列表符号在各浏览器显示无法统一并且无法随心所欲的控制符号与文本内容之间的距离。 2. 边框属性 border 复合写法 border:1px solid #000; 1边框线型solid实线、dashed虚线、dotted点线、double双线 点线的大小总是 1px ,而且各个浏览器大小都不一样
2单边框设置border-left、border-right、border-top、border-bottom
3单边框其他属性border-方向-width 设置单边边框宽度、border-方向-style 设置单边边框线型、border-方向-color 设置单边边框颜色
4用边框属性写出下三角形 哪个方向的三角形就将哪个方向的边框设置 border-方向: 大小 solid 颜色相邻的边框颜色设置成白色消失色对边的边框设置为 0 stylediv{width:0; /*块元素不设置宽度父元素宽度*/height:0; /*可省略*/border-top:20px solid #00f;border-left:20px solid #fff;border-right:20px solid #fff;border-bottom: 0;}
/style补充outline:1px solid #000; 书写input的外框 3. overflow
1overflow 的属性
overflow:visible;/*默认值*/
overflow:hidden;/*溢出隐藏*/
overflowscroll;/*滚动*/
overflow:auto;/*自动出现滚动条*/2隐藏滚动条div::-webkit-scrollbar { display: none; }兼容所有浏览器的超出部分滚动不显示滚动条div 为出现滚动条的元素。
3单行文本溢出隐藏显示省略号
width: 200px; //文本超出多少隐藏
white-space: nowrap; //强制不换行
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //文本溢出隐藏时出现省略号4. 浮动 float 遇到的坑
1float 浮动属性
float: none; //默认不浮动
float: left; //左浮动
float: right; //右浮动2浮动的坑特点 通常情况下如两个兄弟元素设置左右浮动我们需要设置父框高度如果不设置就会造成“高度塌陷” 高度塌陷父元素撑不开子元素内容不占文档流父元素高度不够时浮动的子元素会影响下面的元素当浮动元素的父元素高度不够时会影响到与该父元素相邻元素中的浮动元素浮动元素不能与文本元素重合在一起它会把文字挤出去浮动元素会把所有的元素变成一类元素即浮动元素可以设置宽、高、背景色等
3预防浮动出现
要浮动一窝都浮动兄弟元素都浮动父元素必须设置足够的高度 5. 文本相关属性
文本相关的属性会被继承a标签 除外因为 a标签 有一个默认的伪类效果。 网页字体大小通常为 12px 或 14px 单位px 像素pt 点 em 倍距 3pt 4pxem 是根据父元素的字体大小来决定多小像素 字体大小默认 16px1em16px文字的一倍大小一倍距就是一个文字的大小 复合写法 font:700 italik 12px/2 华文琥珀; 最简 font:字体大小 字体类型;如果没有设置到的视为缺省值还原默认。 1font-size: 数字px; 设置文本大小
2font-style: normal正常/italik斜体; 设置文本斜体
3font-weight: normal正常100-500/bold加粗600-900 设置文本粗体
4font-family: 字体1,字体2 可以设置多个字体如果浏览器不支持第一个字体则会尝试下一个。自定义字体通常默认为“宋体”
5text-align: left/center/right 水平位置
6vertical-align: top/middle/bottom 针对图片使用常写在图片上
7line-height: 数字px; 行高
8letter-spacing: value; 字间距控制英文字母和汉字的字距
9work-spacing: value; 词间距控制英文单词词距只对单词生效
10text-decoration: none没有修饰/underline添加下划线/overline上划线/line-through删除线 文本修饰
11text-indent: 2em 首行缩进 6. 数字单词自动换行
一般字母和数字没有空格不会换行但中文会以文字为单位自动换行。 word-wrap: normal; 默认 word-wrap: break-word; 让字母和数字没有空格的情况下自动换行 white-space: nowrap; 文本强制不换行 7. 背景相关属性background 复合写法 background:#000 url(图片路径) no-repeat top center; 可以不设置其中的某个值比如background: #f00;。 1background-color : 背景色 2background-image : url(图片路径) 背景图片 3background-repeat : 背景图片平铺属性 repeat默认平铺、repeat-x横向平铺、repeat-y纵向平铺、no-repeat不平铺 4background-position : left/right/center(水平) top/bottom/center(垂直)
注意如果只写一个值另外一个值会默认为 居中还可以书写 数值数值可以为 负值。 background-position: 1px -2px; 表示往下平移1px像左平移2px 8. 常用图片格式
常用格式.jpg.png.gif区别图片有损质量但肉眼难分辨用来减小图片大小图片非镂空使用。图片有损质量但肉眼分辨不出用来减小图片大小图片镂空使用。ps打开图片去除背景虚框选中deletepng-24格式保存图片有损质量严重肉眼容易分辨常用做动图。ps截图ctrlc复制 — ctrln新建 — 回车— ctrlv粘贴 — ctrlaltshifts保存9. 定位属性position
1position 的属性值 position只有定位元素可以使用 left、right、top、bottom、z-index static默认值。所有元素默认的定位属性就是是 static 一般不用absolute绝对定位完全脱离文档流。relative : 相对定位占文档流。fixed : 固定定位完全脱离文档流。
定位属性position属性值staticrelativeabsolutefixed称呼默认不定位相对定位绝对定位固定定位区别没有定位元素出现在正常的流中.根据自身初始所在位置来定位不破坏原有元素的特性。自动向上检索根据最近的定位元素作为父元素如果检索不到就以 html 来定位。始终根据 html 来定位是否占文档流占文档流占文档流不占文档流完全脱离文档流不占文档流完全脱离文档流特点或用法特点因为相对定位占文档流在没有设置 left、top 属性下的效果和static 默认是一样的。用法①向上检索定位的元素作为父框②多个定位元素使用 z-index 来定义层级。特点位置不随着滚动条滚动而发生变化。适用场合微调距离时可以用此属性。可以使用lefttoprightbottom等。通常用于做重叠效果。网页遮罩。
2z-index 层级 只有设置定位元素才能设置 z-index默认值为 auto几乎和 0 差不多。在兄弟关系中z-index 值越大的显示在上面。 z-index: auto; 只有在子元素也有定位的情况下出现。
stylep{width: 40px;height:40px;background: #ff9;position:absolute;}.auto4{background: #999; position:absolute;left: 20px;top: 20px;z-index: 9;}.auto1{background: #f99;position:absolute;}.auto2{background: #f99;position:absolute; z-index:10} .auto3{background: #f99; position:absolute;z-index: auto;/*这里的z-index可省略*/}.p3{position:absolute;z-index: 20;}
style
body
!-- 第一种情况 --div classboxdiv classauto1pppp/p/divdiv classauto4auto4/div/div!-- 第二种情况 --div classboxdiv classauto2p classp2ppp/p/divdiv classauto4auto4/div/div!-- 第三种情况 --div classboxdiv classauto3 !-- z-index:auto; --p classp3ppp/p !--定位元素中的子元素也出现定位情况 --/divdiv classauto4auto4/div/div
/body10. 透明属性 opacity:0.5; 值0-1从透明-不。0.5表示半透明ie9以下版本无效。filter:alpha(opacity50); 值0-100非ie浏览器无效兼容ie678。 1缺点给父元素设置透明 子元素也会变透明。
2解决方法想背景透明子元素不透明
①做2个层叠关系的定位元素将父子元素变成兄弟元素②给父元素设置透明的背景图。 四、 盒模型 盒模型的组成分为外边距、边框、内边距、内容区盒子实际宽度高度内容content边框border间隙padding间隔margin 1. padding
1说明
用来调整 子元素在父元素中 的位置关系padding 属性需要添加在 父元素 上。padding值 是额外加在元素原有大小之上的若想保证元素大小不变需从元素宽或高上减掉添加的 padding 属性值
2padding 属性值
{padding: 10px 20px 30px 50px;} 4个值表示上 右 下 左{padding: 10px 20px 30px;} 3个值表示上 左右 下{padding: 10px 20px;} 2个值表示上下 左右{padding: 20px;} 1个值表示 4个方向都是 20px
3可单独设置某一个方向的 padding类似 border。
padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px; 2. margin
margin 是用来调整兄弟元素之间的距离 它的属性值和单边设置写法与padding相同。 margin 的坑 1margin 上下会重叠左右没事
style .box1{width: 100px;height:100px;background:pink;margin-bottom:30px;}.box2{width: 100px;height:100px;background:green;margin-top:50px;}
/stylebodydiv classbox1/divdiv classbox2/div
/body解决办法 设置单边就行。
2第一个块的子元素设置 margin-top 会无限向父元素传递直到不是第一个子元素。
style .fruits{width: 150px;height:150px;background:pink; }.fruits .apple{width: 50px; height: 50px; background: red;margin-top:40px;}.fruits .banana{width: 50px; height: 50px; background: yellow;margin-top:20px;} .foods{width: 150px;height:150px;background:green;margin-top:30px;} /style
bodydiv classfruitsdiv classapple苹果/divdiv classbanana香蕉/div/divdiv classfoodsdiv classoil/divdiv classsalt/div/div
/body解决办法
① 给 父元素 设置 border-top1px; 或者 padding-top: 1px; 或者 float: left; 或者 overflow: hidden; ② 给 子元素 设置 float:left; ③ 给父元素添加伪类元素父元素:before{content:; display: table;}。 因为 :before 相当于给第一个子元素之前添加一个类似 span标签 所以这个块元素就变成了第二个子元素。
overflow:hidden; 可以解决高度塌陷问题可以解决 margin-top 向父元素传递效果的问题。
3给行元素设置上下盒模型会穿过其他物体左右没事。
style.box1{width: 200px;height:200px;background:#ff0;}span{background:#f99;padding:20px;margin:40px}.box2{width: 200px;height:200px;background:#000;}
/style
bodydiv classbox1/divspan1234342/spandiv classbox2/div
/body解决办法
① 不要给行元素设置上下盒模型② 给这个行元素转换成块元素display: block; 五、热点和锚点
1. 锚点 锚点是网页制作中超级链接的一种在网页内部进行跳转。 1语法
styleP{position:fixed;设置高;right:10px;top:0;bottom:0;margin:auto;}P a{display:block;}
/stylea href#id名/a
div idid名/div!-- 或者 --
a href.class名/a
div classclass名/div2示例 点击锚点链接进行跳转时地址栏也会有所改变。如果想要跳转到页面的某个内容区域可以在地址上加上锚点。
style*{margin:0; padding:0;}div{height: 500px;}#box1{background: #99f;}#box2{background: #9f9;}#box3{background: #f99;}#box4{background: #f9f;}#box5{background: #ff9;}#box6{background: #9ff;}#box7{background: #f80;}#box8{background: #90f;}p{ position: fixed; height: 150px; left:10px; top:0; bottom:0; right: 0;margin: auto;}a{display: block; height: 16px; width: 16px; color:#fff;padding: 10px;margin-top: 2px;background:#000;}
/style
bodypa href#box1F1/aa href#box2F2/aa href#box3F3/aa href#box4F4/aa href#box5F5/aa href#box6F6/aa href#box7F7/aa href#box8F8/a/pdiv idbox1奢侈品/divdiv idbox2精品店/divdiv idbox3卖女鞋/divdiv idbox4卖女装/divdiv idbox5卖童装/divdiv idbox6卖男装/divdiv idbox7美食城/divdiv idbox8电影院/div
/body2. 热点
Dreamweaver工具盒子模型的标准任何元素都是以一个矩形呈现但有时则不然。比如地图点击某一个县需要一个链接此时需要热点链接。
img src usemap #名称A/
map name名称Aarea shapepoly coords坐标 href连接地址 target_blank/area
/map热点只能给图片添加这个方法已经被抛弃了。 网页实体 lt; 和 gt; 和 nbsp; 空格 相关面试、笔试题关于HTML的面试题 下一篇html二html学习-干货之 html4css2.0
