--------引子---------------

家里有個熊孩子，經(jīng)常會有一些意想不到的事情發(fā)生：回家的時候，他會笑呵呵沖過來，大聲喊著“臭爸爸”；你讓他把鞋穿上，他會提起鞋子往樓下扔...在小孩的世界里，他雖然會說話，但不一定明白其中的意思，不能正確表達(dá)；同樣他也會做一些事情，但不一定按正常大人的邏輯，不能準(zhǔn)確接收；符合預(yù)期的的交流和溝通成了奢望。因為在他的世界里，一切都處于混沌之中，一切的邏輯、規(guī)范都沒有完善。

相關(guān)推薦：
《10款讓W(xué)eb前端開發(fā)人員更輕松的實用工具》
《11款超贊的瀏覽器兼容性測試工具》

而在HTML的世界里，經(jīng)歷多年的成長，規(guī)范已基本成型，不同的 HTML標(biāo)簽、屬性、屬性值都會自己說話、懂得如何去表達(dá)，HTML處理器（腳本、瀏覽器、搜索引擎）也知道如何來接收HTML傳遞的信息。而如何讓這些 會說話的HTML精靈施展魔法，去向HTML處理器表達(dá)各種意思，帶我們進(jìn)入奇妙之旅，就掌握在我們重構(gòu)工程師的手中，也就是接下來要說的語義化。

語義化沒有一個客觀的標(biāo)準(zhǔn)，很多的東西都是個人的主觀理解，千人千面（這里是廣告）。

-------我理解的語義化--------------

HTML中的語義化，即HTML中的每一個標(biāo)簽、屬性、屬性值，都有其特定含義，所有這些HTML原子組合起來，與開發(fā)者、HTML處理器(瀏覽器、搜索引擎...)進(jìn)行對話、傳遞特定的意思（也就是說語義化不是單相思，是2個人的事情，我說的明白不行，還得你聽得懂）。

比如，最開始導(dǎo)致互聯(lián)網(wǎng)興起是的a標(biāo)簽，她對瀏覽器說我是一個鏈接，可以通向另一個頁面；瀏覽器聽到了，為她加上對應(yīng)樣式和事件，用戶點擊時，就可以到另一個頁面了；搜索引擎聽到了，會去看一下那個頁面都有什么東西，同時分析一下你們的關(guān)系；于是大家快樂的生活在一起了。

-------HTML5新增標(biāo)簽、屬性--------

HTML中的標(biāo)簽、屬性、屬性值太多了，HTML5出來之后就更多了，下面拿幾個出來簡單說說，主要關(guān)注以下兩點：
1、HTML標(biāo)簽、屬性、屬性值和HTML處理器(瀏覽器、搜索引擎...)的對話
2、HTML標(biāo)簽、屬性、屬性值與開發(fā)者們的對話

一、互動標(biāo)簽--對瀏覽器說

HTML5新增了一些互動標(biāo)簽(details+summary,datalist,input[date/range/tel/color]...) 遇到互動類標(biāo)簽，比如details，系統(tǒng)(瀏覽器)會自動綁定對應(yīng)的UI界面和事件(Shadow DOM)，不需要要任何代碼，代碼和瀏覽器直接溝通。

details+summary實現(xiàn)以前我們用js才能實現(xiàn)的顯示更多的功能。

input+datalist實現(xiàn)輸入框既可輸入有課下拉選擇。

二、資源預(yù)加載--對瀏覽器說

HTML5中雖然有prefetch相關(guān)的說明，但是各個瀏覽器的實現(xiàn)并不一樣，下面簡單說說Chrome的prerender。
在不影響當(dāng)前頁面的前提下，瀏覽器會自己預(yù)加載指定頁面(包括頁面上的資源)，到一個隱藏的tab中，打開指定頁面的時候，隱藏tab顯示出來。在chrome的任務(wù)管理器中可以看到，前面有“預(yù)渲染”標(biāo)識，會消耗內(nèi)存(正式渲染的50%-)。

三、Microdata--對搜索引擎說

Microdata不屬于HTML5，但依賴于HTML5，屬于HTML5的擴展，用于存儲機器能夠識別的數(shù)據(jù)。
為 了幫助搜索引擎更好的提取網(wǎng)頁數(shù)據(jù)，一些約定的HTML屬性和屬性值被應(yīng)用到HTML中，搜索引擎(google)會根據(jù)不同屬性[值]來提取需要的數(shù) 據(jù)，Microdata就是其中之一(還有Microformats、RDFa等，Microdata有后來居上的趨勢)。

itemscope告訴搜索引擎這是一個可用的數(shù)據(jù)單元
itemtype="http://schema.org/Event"聲明這是一個活動，不同數(shù)據(jù)單元的itemtype不同
itemprop用來描述這個活動的不同屬性，不同類型的數(shù)據(jù)單元，有不同的屬性，頁面上不需要顯示的可用meta標(biāo)簽和content組合實現(xiàn)，具體參看http://schema.org/。

四、data-*屬性 -- 開發(fā)者相關(guān)

Microdata用于存儲機器能夠識別的數(shù)據(jù)，開發(fā)者有時候也需要HTML提供數(shù)據(jù)，用于頁面功能實現(xiàn)、網(wǎng)站插件(應(yīng)用)，而這些數(shù)據(jù)有不能顯示 在頁面上，于是data-*屬性出現(xiàn)在HTML5中。同時這也解決了上面說到的，語義化不提倡使用非規(guī)范定義的屬性的問題。高級瀏覽器提供了對應(yīng)的API 支持--dataset，或者直接通過getAttribute獲取。

時下流行的很多視差滾動的插件(庫)，都采用data-*屬性來設(shè)置各種動畫參數(shù)(data-ratio、data-vertical-offset...)，避免了繁雜的初始化配置，有實現(xiàn)了動畫參數(shù)和腳本的分離，方便調(diào)整和維護(hù)，做到WEB標(biāo)準(zhǔn)中的分離思想。

以上種種，只需要在頁面上加上簡單的HTML標(biāo)簽或?qū)傩訹值]即可，簡單，但需要考慮兼容性（can i use?/?ppk）。

五、語義化促進(jìn)開發(fā)者之間的交流

體現(xiàn)在代碼的維護(hù)、團(tuán)隊協(xié)作：項目中使用語義化的標(biāo)簽、屬性、屬性值，可以被團(tuán)隊的協(xié)作者、或者一段時間之后的自己，更好的理解和維護(hù)。這一點比較主觀，因人而異，每個人都有自己的獨到見解。

但是，使用ol來展示一個有序列表，和使用br或者p加上數(shù)字，前者顯然更容易被人理解，也方便后期維護(hù)；data-video- id="i0122nckvt0"比vid="i0122nckvt0"更能體現(xiàn)這個屬性的含義，而且在后期獲取屬性數(shù)據(jù)的時候，也會更加方 便；class="news_list"比class="list_01"更容易被解讀，而且這個class也不會被用到其他外觀類似的模塊，減少后期維 護(hù)帶來的各種混亂。(好吧，說了這么些不就是個class的命名問題嗎，microformats都出來了7年了)。

總結(jié)

語義化并不是HTML單方面的事情，需要有懂她的對象；
互動標(biāo)簽可以代替腳本做一些事情；
prefetch讓瀏覽器自己去優(yōu)化頁面性能；
data-*為腳本(插件)提取HTML數(shù)據(jù)提供了新的途徑；
良好的語義化讓開發(fā)者事半功倍。

PS：語義化同時需要跳過一些坑，W3C在HTML5草案提到：標(biāo)簽、屬性、屬性值有他們特定的含義，不能用錯了地方(比如暴露年齡的表格布局)，這樣做會影響HTML處理器正確處理頁面；也不能隨便用規(guī)范中沒有定義的標(biāo)簽、屬性（可用data-*）、屬性值，這樣做將影響HTML將來的擴展(比如上面提到的Microdata)。

--------參考-------------------------

W3C HTML5 3.2.1 Semantics
W3C HTML5 3.2.4.1.7 Interactive content
HTML Microdata
Embedding custom non-visible data with the data-* attributes

原文地址：tgideas
作者：jacob

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量65萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：