<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /* reset */ body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,PRe,form,input,textarea,th,td,select{margin:0;padding:0;} em{font-style:normal} li{list-style:none} a{text-decoration:none;} img{border:none; vertical-align:top;} table{border-collapse:collapse;} textarea{ resize:none;overflow:auto;} /* end reset */ a:link{ color:black; } a:visited{ color: pink; } a:hover{ color: red; } a:active{ color: plum; } a{ color: yellow; } /* 伪类 给元素添加特殊的效果 :link 未访问过的链接初始颜色 :visited 访问过后的链接颜色 :hover 鼠标移入（悬停） :active 鼠标按下时链接的颜色 */ </style> </head> <body> <h1>h1标题 - 一般h1中放网站的logo，优化网站搜索引擎。最好当前页面只有一个h1标签</h1> <h2>h2标题 - 权重次于h1</h2> <h3>h3标题 - 权重次于h2</h3> <h4>h4标题 - 权重次于h3</h4> <h5>h5标题 - 权重次于h4</h5> <h6>h6标题 - 权重次于h5</h6> <p>段落</p> <strong>强调，表现形式为加粗</strong> <em>强调，表现形式为斜体</em> <ul> <li>ul - 无序列表</li> <li>列表项</li> <li>ul的子集（下一级元素）只能是li。li中可根据标签嵌套规则再潜逃其他元素</li> </ul> <ol> <li>ol - 有序列表</li> <li>列表项</li> <li>ol的子集（下一级元素）只能是li。li中可根据标签嵌套规则再潜逃其他元素</li> </ol> <dl> <dt>dl-自定义列表；dt-自定义列表title。一个dl下只能有一个dt</dt> <dd>dd-自定义列表的列表项（信息）。dl下只能有dl和dd</dd> </dl> <a href="http://www.baidu.com" target="_blank">a 超链接。 常见属性:<br/>target:_blank(链接在新窗口打开)；_self(在当前页面打开)；在head中加<base target=”_blank”>,所有链接均在新窗口打开。如果有特殊情况，只需在特殊的a标签中单独说明即可.<br/>href的值：文件路径，点击此链接后为下载；div的id，点击此链接后跳转到相应的div；网址，点击后跳转到相应的网页<br/>各个状态的改变见style中</a> <mark>标记</mark><span>span通常用于区分样式，比如a标签整体为蓝色，其中有个别字是红色。我们可以设置a标签的color为blue，红色的字用span包起来，设置span的color为red</span> <a href="http://www.baidu.com" style="color: blue;">这个链接的目的地址是<span style="color: red;">百度</span></a> <img src="" alt="图片显示有误时要切换的文字，此属性利于搜索引擎"/>src的值为图片地址。最好不要是别的网站的图片地址，因为你请求资源的时候可能会被拒绝。 </body></html>
首先解释下为什么要对标签样式进行重置。每个用户代理（浏览器）给予标签的默认样式并不完全相同。比如body的margin，谷歌下是8，低版本的ie下上下margin为15，左右margin为10。
CSS reset 原则：但凡是浏览默认的样式，都不要使用。应该人为的将所有样式全部统一（清除），再根据实际情况（设计稿）进行设置。
需要重置的样式：
Ø 与盒模型相关的样式border，margin，padding
Ø 标签特有的样式ul>li；ol>li
书写原则：用到什么标签就清除所用标签的默认样式，建议不要直接将所有标签全部加上。不要将所有标签全部统一设置一致的reset，需根据标签默认样式特征来分类设置。
1、默认独占一行
2、没有宽度时，默认撑满一行。有宽度时，内容显示在宽度范围内，但元素本身也会霸占一行。
3、支持所有css命令
4、常见块级元素： <h1></h1>——><h6></h6>，<ol><li>有序列表逐条内容</li></ol>，<ul><li>有序列表逐条内容</li></ul>，<dl><dt>表逐标题</dt><dd>列表内容</dd></dl>，<div></div>,<p></p>
同排可以继续跟同类的标签
宽高由内容决定；不支持宽高属性；
不支持上下的margin；
代码换行被解析为空格，空格距离为字体大小的一半；
被改为块级元素后上述特性消失。
常见内联元素：<a href=”***”>要显示的文字</a>， <strong>强调，表现形式为加粗</strong>，<em>强调，表现形式为斜体</em>
特性：
1、块在一行显示，同排可以继续跟同类的标签；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
4、元素：<img src="">
问题：
1、代码换行被解析；
2、ie6 ie7不支持块属性标签的inline-block;
块元素转为内联：display：inline，使块标签具备内联元素的特性
内联元素转为块：display：block，使内联元素具备块属性标签的特性
使元素显示为inline-block的特性：display: inline-block
display是将标签转换为页面中显示的类型，并不会改变标签本质。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; display: inline; } span{ width: 100px; height: 100px; background-color: yellow; display: block; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body></html>标签嵌套规则
Ø p、dt、h标签内不能嵌套块属性标签
Ø a标签不能嵌套a标签
Ø 内联不能嵌套块标签
新闻热点
疑难解答
