<!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>
<!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、块元素的特征
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>
2、常见内联元素（或块级元素被改为内联后）的特性:
同排可以继续跟同类的标签
宽高由内容决定；不支持宽高属性；
不支持上下的margin；
代码换行被解析为空格，空格距离为字体大小的一半；
被改为块级元素后上述特性消失。
常见内联元素：<a href=”***”>要显示的文字</a>， <strong>强调，表现形式为加粗</strong>，<em>强调，表现形式为斜体</em>
3、Inline-block的特点和问题
特性：
1、块在一行显示，同排可以继续跟同类的标签；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
4、元素：<img src="">
问题：
1、代码换行被解析；
2、ie6 ie7 不支持块属性标签的inline-block;
4、标签类型的转换
块元素转为内联：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标签
Ø 内联不能嵌套块标签
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
