（1）html標簽選擇
1、<a></a> 的功能有連接，下載，錨點
2、<span></span> 用來區分字體樣式，<strong></strong>和<em></em>用來強調某段文字
3、如果是描述性的某段文字，我們可以用<p></p>來修飾
4、<div></div> 塊標簽，用來將內容分塊
5、 <img />用來引入圖片的內容
（2）css重置
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
（3）塊元素和內嵌元素
1、塊的特征
a、默認獨占一行
b、沒有寬度時默認獨占一行
c、支持所有的css命令
2、內嵌的特征
a、同排可以繼續跟同類的標簽
b、內容撐開寬度
c、不支持寬高
d、不支持上下的margion和padding
e、代碼換行被解析
3、塊和內嵌的轉換
a、dispaly: block
使內聯元素具備塊元素標簽的特性
b、display: inline
使行塊屬性標簽具備內聯元素的特性
c、inline-block的特點和問題
特性：塊在一行顯示，行內屬性標簽支持寬高，沒有寬度的時候內容撐開寬度
問題：代碼換行被解析，ie6，ie7不支持塊屬性標簽的inline-block
4、分頁代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>styles</title>
<style>
a{text-decoration: none}
.pages{
height: 40px;
border: 2px solid #CDCDCD;
text-align: center;
background: #E8E8E8;
margin: 90px auto;
padding-top: 10px;
}
.pages a{
height: 28px;
line-height: 28px;
color: #333333;
display: inline-block;
border: 1px solid #CDCDCD;
padding: 0 9px;
}
.pages a:hover{border-color: red;color: red}
.pages .active{font-weight: bold;background: #fcf9ea;
cursor: text;}
.pages .active:hover{border-color: #CDCDCD;color: #333333}
</style>
</head>
<body>
<div class="pages">
<a class="active" href="#">上一頁</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">下一頁</a>
</div>
</body>
</html>
這里做一下cursor解釋：
cursor，指針樣式，可以自定義
cursor: url(hand.cur),pointer hand.cur存在的話就使用，不存在的話就使用默認的