家里有個熊孩子,經(jīng)常會有一些意想不到的事情發(fā)生:回家的時候,他會笑呵呵沖過來,大聲喊著“臭爸爸”;你讓他把鞋穿上,他會提起鞋子往樓下扔…
而在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)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選