語意元素介紹

#HTML5標(biāo)準(zhǔn)增加許多新的語意元素，若以種類來區(qū)分，有頁面結(jié)構(gòu)上的、文字內(nèi)容上的、表單裡的等等。

而這裡主要介紹頁面結(jié)構(gòu)上的新元素。

什麼是語意元素

#簡單來講，語意元素就是為元素(標(biāo)籤)賦予某種意義，元素的名稱就是元素要表達(dá)的意思。

如<header>表示頁首、<footer>表示頁尾。

特點(diǎn)：

#①易於維護(hù)：使用語意元素將會有更清晰的頁面結(jié)構(gòu)訊息，易於頁面的後續(xù)維護(hù)。不需要再查看程式碼：找到div再找到具體的ClassName。

②無障礙性：有助於螢?zāi)婚喿x器和其他輔助工具的讀取。

③利於搜尋引擎最佳化：搜尋機(jī)器人在檢查一些HTML5的語意元素後，可以收集其索引頁面的資訊。

HTML5?語意元素

<header>：定義網(wǎng)頁或文章的頭部區(qū)域?？砂琹ogo、導(dǎo)航、搜尋條等內(nèi)容。

<article> ?

<header> ? ?

<h1>Internet Explorer 9</h1> ? ?

<p><time pubdate datetime="2011-03-15"></time></p> ?

</header>

<p>Windows Internet Explorer 9(縮寫為IE9 )是在2011年3月14日21:00發(fā)布的</p>

#</article>

?　　瀏覽器最低版本：IE 9、Chrome 5

使用說明：
①當(dāng)用於標(biāo)註網(wǎng)頁的頁眉時，可包含logo、導(dǎo)航、搜尋條等資訊。
②當(dāng)用於標(biāo)註內(nèi)容的標(biāo)題時，只有當(dāng)標(biāo)題還附帶其他資訊時才考慮用<header>，一般情況下用<h1>標(biāo)註標(biāo)題即可。

<main>?： 定義網(wǎng)頁中的主體內(nèi)容。

　　瀏覽器最低版本：IE 不支援、Chrome 35

#<footer>：定義網(wǎng)頁或文章的尾區(qū)。可包含版權(quán)、備案等內(nèi)容。

<footer> ?

<p>Posted by: Hege Refsnes</p>?

??<p><time pubdate datetime="2012-03-01"></time></p>

</footer>

#　　　器最低版本：IE 9、Chrome 5

使用說明：
①作為網(wǎng)頁的頁腳時，通常包含網(wǎng)站版權(quán)、法律限制及連結(jié)等內(nèi)容。
②作為文章的頁腳時，通常包含作者相關(guān)資訊。

<nav>：標(biāo)註頁面導(dǎo)覽連結(jié)。包含多個超連結(jié)的區(qū)域。

<nav>

<a href="/html/">HTML</a> | ? ?

<a href="/css/">CSS</a> | ? ?

#<a href="/js/">JavaScript</a> | ? ?

<a href="/jquery/">jQuery</a>

</nav>

? ? 瀏覽器最低版本：IE 9、Chrome 5

使用說明：
①一個頁面可包含多個<nav>元素，如頁面的導(dǎo)航和相關(guān)文章推薦等。
②<footer>區(qū)域裡的聯(lián)絡(luò)資訊、認(rèn)證資訊可不必包含在<nav>元素裡。

<section>：通常標(biāo)註為網(wǎng)頁中的一個獨(dú)立區(qū)域。

<section>
? <h1>WWF</h1>
? <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

　　瀏覽器最低版本：IE 9、Chrome 5

使用說明：
可作為網(wǎng)頁中的獨(dú)立區(qū)域，如文章中的一小節(jié)。

<article>：完整、獨(dú)立的內(nèi)容區(qū)塊；裡面可包含獨(dú)立的<header>、<footer>等結(jié)構(gòu)元素。如新聞、部落格文章等獨(dú)立的內(nèi)容快(不包括評論或作者簡介)。

<article> ?

<h1>Internet Explorer 9</h1> ?

<p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發(fā)佈。 </p>

</article>

　　瀏覽器最低版本：IE 9、Chrome 5

#<aside>：定義周圍主內(nèi)容之外的內(nèi)容區(qū)塊。如：註解。

<p>My family and I visited The Epcot center this summer.</p>?

?<aside> ?

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

　　瀏覽器最低版本： IE 9、Chrome 5

<figure>：代表一段獨(dú)立的內(nèi)容, 經(jīng)常與<figcaption>(表示標(biāo)題)配合使用, 可用於文章中的圖片、插圖、表格、程式碼片段等等。

　　瀏覽器最低版本：IE 9、Chrome 8

<figcaption>：定義 <figure> 元素的標(biāo)題。

　　瀏覽器最低版本：IE 9、Chrome 8

示意圖：