常用語義化HTML標籤
一、標籤使用的誤區
很多開發人員在項目開發中，經常標籤亂用；本來是寫個標題用“<h3>文本標題</h3>”就好的，經常會寫成<span>文本標題</span>,其實，其實第一種寫法纔是WC3推薦的寫法，因爲標題就是標題，使用H1 至 H6標籤纔是正確選擇。現在的網頁佈局方式都叫“DIV+CSS”，滿屏代碼都是“DIV”其實是一個錯誤的理解，導致了很多人過度依賴與濫用DIV標籤， HTML提供了我們一共七八十個標籤，其中常用的有三十個左右，DIV不過是一個相對的空標籤而已，在很多情況下，我們可以使用其他更合適且更符合場景的標籤可以替代它。
二、標籤的差異
共性：都是一個容器，可以在其中放置內容
差異：分爲行內和塊級兩個大類，且不同便籤有相應含義上的預設語義，如：h-標題，p-段落，i-斜體，a-鏈接，b-加粗，等等
三、標籤語義化的好處
a、讓結構更簡潔清晰，讓搜索引擎更友好
b、通過多重組合，減少不必要的CSS依賴
四、語義化標籤的使用
a、列表：ul、ol、li、dl、dt、dd
b、標題：h1~h6
c、段落：p
d、強調：strong，B
e、表格：table、tr、td，以及表格的其他成員th、thead、tbody、tfood
五、常用HTML標籤表
| <!--標籤--> | 定義註釋。 |
|---|---|
| <body> | 定義文檔的主體，默認有外邊距，注意清除。 |
| <head> | 定義頁面的信息。 |
| <html> | 定義 HTML 文檔。 |
| <meta> | 定義頁面的描述信息，便於搜索優化。 |
| <title> | 定義文檔的標題。 |
| <link /> | 定義引用外部文件，如聯入CSS樣式表。 |
| <style> | 定義內聯的CSS樣式信息。 |
| <script> | 定義內聯或外聯的客戶端腳本，如JS。 |
| <a> | 定義錨鏈接或其他鏈接，行內元素。 |
| <img /> | 定義引入一張圖片，行內元素。 |
| <strong> | 定義強調文本，樣式爲加粗，行內元素。 |
| <span> | 定義一個行內元素的空盒子。 |
| <div> | 定義一個塊級元素的空盒子。 |
| <h1> to <h6> | 定義標題部分，默認有外邊距，塊級元素。 |
| <ul> | 定義無序列表，默認有外邊距和內邊距，塊級元素。 |
| <ol> | 定義有序列表，即數字列表，默認有內外邊距，塊級元素。 |
| <li> | 定義列表的項目，一般被嵌套在<ul>和<ol>內，塊級元素。 |
| <dl> | 自定義列表的項目，默認有外邊距和內邊距，塊級元素。 |
| <dt> | 自定義列表的標題，嵌套在<dl>內，與<dd>區別，塊級元素。 |
| <dd> | 自定義列表的內容，嵌套在<dl>內，與<dt>區別，塊級元素。 |
| <p> | 定義段落，默認有一個行高的外邊距。 |
| <table> | 定義表格。 |
| <tr> | 定義表格中的行。 |
| <td> | 定義表格中的單元。 |
| <th> | 定義表格中的表頭單元格。 |
| <thead> | 定義表格中的表頭內容。 |
| <tbody> | 定義表格中的主體內容。 |
| <tfoot> | 定義表格中的表注內容（腳註）。 |
| <br /> | 定義一個回車換行。 |
| <map> | 定義圖像映射，即鼠標熱區。 |
| <area> | 定義圖像映射內部的區域。 |
| <form> | 定義輸入提交的表單。 |
| <button> | 定義表單中的按鈕 (push button)。 |
| <input> | 定義表單中的輸入控件。 |
| <select> | 定義表單中的選擇列表（下拉列表）。 |
| <textarea> | 定義多行的文本輸入控件標籤 |
| mark | 標記定義有標記的文本（黃色選中狀態） |
| <frame> | 定義框架集的窗口或框架。 |
| 標籤 | 說明 |
|---|---|
| <article> | 標記定義一篇文章 |
| <header> | 標記一個區域的頭部 |
| <nav> | 標記定義導航鏈接 |
| <saction> | 標記定義一個區域 |
| <aside> | 標記定義頁面的內容部分的側邊欄（像淘寶，京東左側菜單） |
| <hgroup> | 標記定義文件中一個區塊的相關信息 |
| <figure> | 標記定義一組包裹多媒體內容以及它們的標題 |
| <figcaption> | 標記定義figure元素的標題 |
| <footer> | 標記一個區域的底部 |
| <dialog> | 標記定義一個對話框（會話框）類似微信 |
| <video> | 標記定義一個視頻 |
| <audio> | 標記定義音頻內容 |
| <source> | 標記定義媒體資源 |
| <canvas> | 一個畫布，使用API，可畫出酷炫的效果 |
| <embed> | 標記定義外部的可交互的內容或插件，比如flash |
| <datalist> | 爲input標記定義一個下拉列表，配合option使用 |
| <details> | 標記定義一個元素的詳細信息，配合summary使用 |