詳細(xì)解析HTML的代碼學(xué)習(xí)全分析發(fā)布者：本站     時(shí)間：2021-12-23 10:12:10

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

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

——-我理解的語(yǔ)義化————–

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

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

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

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

一、互動(dòng)標(biāo)簽–對(duì)瀏覽器說(shuō)

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

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

詳細(xì)解析HTML的代碼學(xué)習(xí)全分析,PS教程,

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

詳細(xì)解析HTML的代碼學(xué)習(xí)全分析,PS教程,

二、資源預(yù)加載–對(duì)瀏覽器說(shuō)

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

詳細(xì)解析HTML的代碼學(xué)習(xí)全分析,PS教程,

三、Microdata–對(duì)搜索引擎說(shuō)

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

詳細(xì)解析HTML的代碼學(xué)習(xí)全分析,PS教程,

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

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

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

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

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

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

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

但是，使用ol來(lái)展示一個(gè)有序列表，和使用br或者p加上數(shù)字，前者顯然更容易被人理解，也方便后期維護(hù)；data-video- id=”i0122nckvt0″比vid=”i0122nckvt0″更能體現(xiàn)這個(gè)屬性的含義，而且在后期獲取屬性數(shù)據(jù)的時(shí)候，也會(huì)更加方 便；class=”news_list”比class=”list_01″更容易被解讀，而且這個(gè)class也不會(huì)被用到其他外觀類似的模塊，減少后期維 護(hù)帶來(lái)的各種混亂。

總結(jié)

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

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