在HTML5中，為了使文檔的結(jié)構(gòu)更加清晰明確，追加了幾個(gè)與頁(yè)眉、頁(yè)腳、內(nèi)容區(qū)塊等文檔結(jié)構(gòu)相關(guān)聯(lián)的結(jié)構(gòu)元素。內(nèi)容區(qū)塊是指將HTML頁(yè)面按邏輯分割后 的單位。例如對(duì)于書(shū)籍來(lái)說(shuō)，章、節(jié)可以稱(chēng)為內(nèi)容區(qū)塊；對(duì)于博客網(wǎng)站來(lái)說(shuō)，導(dǎo)航菜單、文章正文、文章的評(píng)論等每一個(gè)部分都可稱(chēng)為內(nèi)容區(qū)塊。
????? 在HTML5中新增的主體結(jié)構(gòu)元素中有兩個(gè)元素分別article元素與section元素，這兩個(gè)元素是什么意思？通常用于哪些內(nèi)容區(qū)塊？何時(shí)用article元素？何時(shí)用section元素？兩者之間的區(qū)別是什么？
??????一、article元素
??????article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶(hù)評(píng)論 或獨(dú)立的插件，或其他任何獨(dú)立的內(nèi)容。除了內(nèi)容部分，一個(gè)article元素通常有它自己的標(biāo)題（一般放在一個(gè)header元素里面），有時(shí)還有自己的腳 注。
????? 現(xiàn)在，讓我們以博客為例來(lái)看一段關(guān)于article元素的代碼示例，代碼如下：
<article>
????? <header>
??????????? <h1>article元素使用方法</h1>
??????????? <p>發(fā)表日期：<time pubdate="pubdate">2010/10/10</time></p>
????? </header>
????? <p>article元素是什么？怎樣使用article元素？……</p>
????? <footer>
??????????? <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
????? </footer>
</article>
????? 這個(gè)示例是一篇講述article元素使用方法，在header元素中嵌入了文章的標(biāo)題部分，在標(biāo)題下部的p元素中，嵌入了一大段該博客文章的正文，在結(jié) 尾處的footer元素中，嵌入了文章的著作權(quán)，作為腳注。整個(gè)示例的內(nèi)容相對(duì)比較獨(dú)立、完整，因此，對(duì)這部分內(nèi)容使用了article元素。
????? article元素是可以嵌套使用的，內(nèi)層的內(nèi)容在原則上需要與外層的內(nèi)容相關(guān)聯(lián)。例如，一篇博客文章中，針對(duì)該文章的評(píng)論就可以使用嵌套article元素的方式；用來(lái)呈現(xiàn)評(píng)論的article元素被包含在表示整體內(nèi)容的article元素里面。
?????? 接著，讓我們來(lái)看一個(gè)關(guān)于article元素嵌套的代碼示例，代碼如下：
<article>
????? <header>
??????????? <h1>article元素使用方法</h1>
??????????? <p>發(fā)表日期：<time pubdate="pubdate">2010/10/10</time></p>
????? </header>
????? <p>article元素是什么？怎樣使用article元素？……</p>
????? <section>
??????????? <h2>評(píng)論</h2>
??????????? <article>
????????????????? <header>
??????????????????????? <h3>發(fā)表者：shenmiweiyi</h3>
??????????????????????? <p><time pubdate datetime="2011-12-23T:21-26:00">1小時(shí)前</time></p>
????????????????? </header>
????????????????? <p>這篇文章很不錯(cuò)啊，頂一下！</p>
??????????? </article>
??????????? <article>
????????????????? <header>
??????????????????????? <h3>發(fā)表者：神秘唯一</h3>
??????????????????????? <p><time pubdate datetime="2011-12-23T:21-26:00">1小時(shí)前</time></p>
????????????????? </header>
????????????????? <p>這篇文章很不錯(cuò)啊，對(duì)article解釋的很詳細(xì)</p>
??????????? </article>
????? </section>
</article>
????? 這個(gè)示例中的內(nèi)容比上述代碼更加完整了，它添加了文章讀者的評(píng)論內(nèi)容，示例內(nèi)容分為幾個(gè)部分，文章標(biāo)題放在了header元素中，文章正文放在了 header元素后面的p元素中，然后section元素把正文與評(píng)論進(jìn)行了區(qū)分（是一個(gè)分塊元素，用來(lái)把頁(yè)面中的內(nèi)容進(jìn)行區(qū)分），在section元素 中嵌入了評(píng)論的內(nèi)容，評(píng)論中每一個(gè)人的評(píng)論相對(duì)來(lái)說(shuō)又是比較獨(dú)立的、完整的，因此對(duì)它們都使用一個(gè)article元素，在評(píng)論的article元素中，又 可以分為標(biāo)題與評(píng)論內(nèi)容部分，分別放在header元素與p元素中。
????? 另外，article元素也可以用來(lái)表示插件，它的作用是使插件看起來(lái)好像內(nèi)嵌在頁(yè)面中一樣。代碼如下：
<article>
????? <h1>一個(gè)插件</h1>
????? <object>
??????????? <param name="allowFullScreen" vlaue="true">
??????????? <embed src="#" width="600" height="395"></embed>
????? </object>
</article>
??????二、section元素
??????section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。但section元素并非一個(gè)普通的容 器元素；當(dāng)一個(gè)內(nèi)容需要被直接定義樣式或通過(guò)腳本定義行為時(shí)，推薦使用div而非section元素。section元素中的內(nèi)容可以單獨(dú)存儲(chǔ)到數(shù)據(jù)庫(kù)中 或輸出到word文檔中。
<section>
????? <h1>section元素使用方法</h1>
????? <p>什么時(shí)候用section元素？怎樣合理使用section元素?</p>
</section>
????? 通常不推薦為那些沒(méi)有標(biāo)題的內(nèi)容使用section元素，可以使用HTML5輪廓工具來(lái)檢查頁(yè)面中是否有標(biāo)題 的section，如果使用該工具進(jìn)行檢查后，發(fā)現(xiàn)某個(gè)section的說(shuō)明中有"untitiled section"（沒(méi)有標(biāo)題的section）文章，這個(gè)section就有可能使用不當(dāng)。
????? section元素的作用是對(duì)頁(yè)面上的內(nèi)容進(jìn)行分塊，或者說(shuō)對(duì)文章進(jìn)行分段，請(qǐng)不要與有著自己的完整的、獨(dú)立的內(nèi)容”的article元素混淆。
????? 下面，我們來(lái)看article元素與section元素結(jié)合使用的示例，希望能夠幫助你更好地理解article元素與section元素的區(qū)別。
<article>
????? <h1>article元素與section元素的使用方法</h1>
????? <p>何時(shí)使用article元素？何時(shí)使用section元素…..</p>
????? <section>
??????????? <h2>article元素使用方法</h2>
??????????? <p>article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。</p>
????? </section>
????? <section>
??????????? <h2>section元素使用方法</h2>
??????????? <p> section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊。</p>
????? </section>
</article>
????? 上述代碼中的內(nèi)容首先是一段獨(dú)立的、完整的內(nèi)容，因此使用article元素。該文章分為3段，每一段都有一個(gè)獨(dú)立的標(biāo)題，因此使用了兩個(gè)section 元素。請(qǐng)記住，對(duì)文章分段的工作也是使用section元素完成的。可能有人會(huì)問(wèn)，為什么沒(méi)有對(duì)第一段使用section元素，這里其實(shí)是可以使用 section元素的，但是由于其結(jié)構(gòu)比較清晰，分析器可以識(shí)別第一段內(nèi)容在一個(gè)section元素里，所有也可以將第一個(gè)section元素省略，但是 第一個(gè)section元素里還要包含于section元素或子article元素，那么就必須寫(xiě)明第一個(gè)section元素。
????? 在HTML5中，你可以將所有頁(yè)面的從屬部分，譬如導(dǎo)航條、菜單、版權(quán)說(shuō)明等包含一個(gè)統(tǒng)一的頁(yè)面中，以便統(tǒng)一使用CSS樣式來(lái)進(jìn)行裝飾。最后，關(guān)于section元素的使用禁忌總結(jié)如下：
????? 1）不要將section元素用作設(shè)置樣式的頁(yè)面容器，那是div元素的工作。
????? 2）如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。
????? 3）不要為沒(méi)有標(biāo)題的內(nèi)容區(qū)塊使用section元素。
??????三、兩者的區(qū)別：
????? 以上講述了那么多，兩者的區(qū)別到底是什么呢？事實(shí)上，在HTML5中，article元素可以看成是一種特殊類(lèi)型的section元素，它比 section元素更強(qiáng)調(diào)獨(dú)立性。即section元素強(qiáng)調(diào)分段或分塊，而article強(qiáng)調(diào)獨(dú)立性。具體來(lái)說(shuō)，如果一塊內(nèi)容相對(duì)來(lái)說(shuō)比較獨(dú)立的、完整的 時(shí)候，應(yīng)該使用article元素，但是如果你想將一塊內(nèi)容分成幾段的時(shí)候，應(yīng)該使用section元素。另外，在HTML5中，div元素變成了一種容器，當(dāng)使用CSS樣式的時(shí)候，可以對(duì)這個(gè)容器進(jìn)行一個(gè)總體的CSS樣式的套用。

總結(jié)

以上是生活随笔為你收集整理的深入浅析HTML5中的article和section的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。