淺談web語義化

#淺談web語義化 ##web語義化是什么 HTML5標准出來的時候，我曾經詫異為什么要定義這么多header footer nav article標准，DIV不挻好的嘛，方便開發人員記憶啊。但當頁面開發完，面對所有都是DIV標簽的網頁，就會混亂了，到底哪里是頁頭，哪里是正文。當然我們可以用瀏覽器打開，F12一下，就一目了然了，但如果是網絡爬蟲，那就沒這么容易識別到這個東西了。 引用wiki的定義，[語義化](http://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89%E5%8C%96)是前端開發里面的一個專用術語，其優點在於標簽語義化有助於構架良好的html結構，有利於搜索引擎的建立索引、抓取；另外，亦有利於頁面在不同的設備上顯示盡可能相同；此外，亦有利於構建清晰的機構，有利於團隊的開發、維護。 通俗而言，就是HTML的結構清晰，該是段落就用p標簽，該是頁腳就用footer標簽，而不要統一都用DIV。 ##為什么要web語義化 其實wiki的定義里面說得非常清晰了。語義化的好處有三點 1. 有利於搜索 2. 容易兼容不同設備 3. 結構清晰，利於團隊的開發、維護 ##要怎么做 一個較為經典的案例是，初學word的人經常會用空格來進行縮進，用回車來填充進行換頁，這種排版在頁面布局發生變化時，就會亂掉。所以我們要用回word本身的縮進，換頁符功能，真真正正告訴計算機這個排版的真正意圖，才能使得排版適應性強。 HTML不是二進制文件，導致人們在編寫的時候隨意性更加大了。我們要經常關注一些語義化的標簽，常用並且熟記。 * h1~h6的規划 一篇文章應該只有一個總標題即`h1`，我的每一篇博文都是這種結構的。然后根據文章的具體內容，會有若干個`h2`及嵌套的`h3`，目前為止我的博文並沒有用到h4以下的標題 * p 每一個段落都應該用`p`去表示，默認情況下p是有一定的縮進及行距，如果不想這樣排版，應該另外寫CSS去控制 * ul,ol,li (Unordered list,Ordered list,List item) `li`必須是在`ul`或者`ol`里面，當我們只是列舉一些數據，但又達不到一個分論點這種語義時，或者在一些資訊的網站新聞列表中，都應該用此語義標簽，例如你當前在看的就是。 * dl,dt,dd (description list,description list term,description list description) 這表示一種帶描述的層級遞進的列表，其中`dl`帶描述的列表，`dt`列表的標題，`dd`列表的描述 例如 <dl> <dt>中國城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>廣州 </dd> <dt>美國城市</dt> <dd>華盛頓 </dd> <dd>芝加哥 </dd> <dd>紐約 </dd> </dl> 效果圖：  * em,strong 由於本人是用markdown語法來寫博的，這兩個標簽更加是被語法首推使用的 *測試斜體em* **測試加強strong** * header,nav,article,section,aside,footer 這對於明細內容頁的語義化十分重要，在此引用一圖說明各標簽的語義  * th,tbody 表格的表頭及重復列表內容，正常的表格都應該區分表頭及表體內容。表頭默認是加粗並且居中的。 * address 表示一種聯系方式，方便爬蟲立馬找到你的聯系方式，當然使用起來可能是辦公地址更加實際 <address> Written by p2227<br /> contact me : kuangqiyi(At)gmail.com <br /> Address: searching the next bussiness address<br /> </address> * dfn，code，samp，kbd，var，cite 這些元素和em 、strong都稱為短語元素，其語義如下 | 標簽 | 語義 | | -------- | :----- | | `em` | 呈現為被強調的文本。 | | `strong` | 定義重要的文本。 | | `dfn` | 定義一個定義項目。 | | `code` | 定義計算機代碼文本。 | | `samp` | 定義樣本文本。 | | `kbd` | 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。 | | `var` | 定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。 | | `cite` | 定義引用。可使用該標簽對參考文獻的引用進行定義，比如書籍或雜志的標題。 | 本人的列舉有限，詳細的要在實際使用中去慢慢記憶了。 具體的實施還要結合具體項目組制定一份標准，再嚴格執行，才能真實實施起來。 ##參考 http://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89%E5%8C%96 http://www.html5jscss.com/?p=30 http://www.w3school.com.cn/html5/tag_phrase_elements.asp