<!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標簽
? 內聯不能嵌套塊標簽
新聞熱點
疑難解答
