而在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)樣式和事件，用戶點(diǎn)擊時，就可以到另一個頁面了;搜索引擎聽到了，會去看一下那個頁面都有什么東西，同時分析一下你們的關(guān)系;于是大家快樂的生活在一起了。

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

　　HTML中的標(biāo)簽、屬性、屬性值太多了，HTML5出來之后就更多了，下面拿幾個出來簡單說說，主要關(guān)注以下兩點(diǎ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實(shí)現(xiàn)以前我們用js才能實(shí)現(xiàn)的顯示更多的功能。

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

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

　　HTML5中雖然有prefetch相關(guān)的說明，但是各個瀏覽器的實(shí)現(xiàn)并不一樣，下面簡單說說Chrome的prerender。

　　在不影響當(dāng)前頁面的前提下，瀏覽器會自己預(yù)加載指定頁面(包括頁面上的資源)，到一個隱藏的tab中，打開指定頁面的時候，隱藏tab顯示出來。在chrome的任務(wù)管理器中可以看到，前面有“預(yù)渲染”標(biāo)識，會消耗內(nèi)存(正式渲染的50%-)。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。