黑馬程序員：html5地語(yǔ)義化概念解析匯報(bào)匯報(bào)

實(shí)用標(biāo)準(zhǔn)文案所謂語(yǔ)義化是要使 HTML標(biāo)簽具備很好的可讀性， 可以清晰傳達(dá)每個(gè)標(biāo)簽所要表達(dá)的意義，以方便其被友好的處理和解析。1.1語(yǔ)義化標(biāo)簽對(duì)于語(yǔ)義化標(biāo)簽我們并不陌生， 如<p>表示一個(gè)段落、<ul>表示一個(gè)無(wú)序列表 <h1><h6>表示一系列標(biāo)題等，在此基礎(chǔ)上HTML5增加了大量更有意義的語(yǔ)義標(biāo)簽，更有利于搜索引擎或輔助設(shè)備來(lái)理解HTML頁(yè)面內(nèi)容。傳統(tǒng)的做法我們通過添加類名如class="header"、class="footer"，使HTML頁(yè)面具有語(yǔ)義性的，但是不具有通用性（如class="header"也可能被寫成class="head"）。見示例代碼2-1.htmlHTML5 則是通過增加語(yǔ)義化標(biāo)簽的形式來(lái)解決這個(gè)問題，例如<header></header> 、<footer></footer> 等，這樣就可以保證其 具有通用性。見示例代碼 2-2.html此章節(jié)學(xué)習(xí)目的為了解增加語(yǔ)義標(biāo)簽的目的，以及各語(yǔ)義標(biāo)簽所表達(dá)的意義，在網(wǎng)頁(yè)布局中能夠合理使用標(biāo)簽。 常用語(yǔ)義標(biāo)簽標(biāo)簽 語(yǔ)義<nav> 導(dǎo)航<header> 頁(yè)眉<footer> 頁(yè)腳<section> 區(qū)塊<article> 文章精彩文檔實(shí)用標(biāo)準(zhǔn)文案<aside> 側(cè)邊欄<progress> 進(jìn)度條見示例代碼 2-3.html本質(zhì)上新語(yǔ)義標(biāo)簽與 <div> 、<span> 沒有區(qū)別，只是其 具有語(yǔ)義性，使用時(shí)除了在HTML 結(jié)構(gòu)上需要注意外，其它和普通標(biāo)簽的使用無(wú)任何差別，可以理解成<divclass="nav"> 相當(dāng)于 <nav> 。不要好奇，它只是一個(gè)標(biāo)簽！盡量避免全局使用 header、footer、aside等語(yǔ)義標(biāo)簽。 兼容處理在不支持 HTML5 新標(biāo)簽的瀏覽器里，會(huì)將這些新的標(biāo)簽解析成 行內(nèi)元素(inline)對(duì)待，所以我們只需要將其轉(zhuǎn)換成 塊元素(block)即可使用，但是在 IE9版本以下，并不能正常解析這些新標(biāo)簽， 但是卻可以識(shí)別通過 document.createElement('tagName') 創(chuàng)建的自定義標(biāo)簽，于是我們的解決方案就是將 HTML5 的新標(biāo)簽全部通過document.createElement('tagName') 來(lái)創(chuàng)建一遍，這樣 IE低版本也能正常解析 HTML5新標(biāo)簽了，但在實(shí)際開發(fā)中我們更多采用的是通過檢測(cè) IE瀏覽器的版本來(lái)加載第三方的一個(gè)JS庫(kù)來(lái)解決兼容問題，這個(gè)庫(kù)文件會(huì)幫自動(dòng)通過document.createElement('tagName')創(chuàng)建所有 HTML5 的新標(biāo)簽。見示例代碼 2-4.html精彩文檔實(shí)用標(biāo)準(zhǔn)文案1.2微數(shù)據(jù)微數(shù)據(jù)是在如 span、div 的標(biāo)簽內(nèi)添加 屬性，讓機(jī)器（如搜索引擎）識(shí)別其含義，某些特定類型的信息，例如評(píng)論、人物信息或事件都有相應(yīng)的屬性，用來(lái)描述其含義， 可以理解成新語(yǔ)義標(biāo)簽的一種補(bǔ)充。見示例代碼 2-5.html更多學(xué)習(xí)資料1.3WAI-ARIAWAI-ARIA [1] , 是 Web Accessibility Initiative - Access