黑馬程序員：html5地語義化概念解析匯報匯報

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