深入淺析HTML5中的article和section的區(qū)別

內(nèi)容區(qū)塊是指將HTML頁(yè)面按邏輯分割后的單位。對(duì)于頁(yè)面網(wǎng)站來(lái)說(shuō)，導(dǎo)航菜單、文章正文、文章的評(píng)論等每一個(gè)部分都可稱為內(nèi)容區(qū)塊。

　　article元素

　　article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論或獨(dú)立的插件，或其他任何獨(dú)立的內(nèi)容。除了內(nèi)容部分，一個(gè)article元素通常有它自己的標(biāo)題（一般放在一個(gè)header元素里面），有時(shí)還有自己的腳注。

<article>     
<header>         　　　　
<h1>標(biāo)題</h1>          
<p>發(fā)表日期：<time pubdate="pubdate">2010/10/10</time></p>　　
</header>
　　<p>article的使用方法</p>      　　
　　<footer>           
　　<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>　　
　　</footer>
　　</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元素里面。
嵌套的代碼如下：

<article>
　　<header>
            <h1>article元素使用方法</h1>
　　　　<p>發(fā)表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>
　　<p>此標(biāo)簽里顯示的是article整個(gè)文章的主要內(nèi)容，，下面的section元素里是對(duì)該文章的評(píng)論</p>
　　<section>
            <h2>評(píng)論</h2>
　　　　<article>
                  <header>
　　　　　　　　<h3>發(fā)表者：maizi</h3>
　　　　　　　　<p><time pubdate datetime="2016-6-14">1小時(shí)前</time></p>
　　　　　　</header> 
　　　　　　<p>這篇文章很不錯(cuò)啊，頂一下！</p>
           </article>
　　　　<article>
                  <header>           
　　　　　　　　<h3>發(fā)表者：小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小時(shí)前</time></p>
　　　　　　</header>
　　　　<p>這篇文章很不錯(cuò)啊，對(duì)article解釋的很詳細(xì)</p> 
　　　　</article>
      </section>
</article>

　　示例內(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元素中。
 

　　1、section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，section元素的作用是對(duì)頁(yè)面上的內(nèi)容進(jìn)行分塊，或者說(shuō)對(duì)文章進(jìn)行分段，；

　　2、一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。通常不推薦為那些沒(méi)有標(biāo)題的內(nèi)容使用section元素，

　　3、section元素并非一個(gè)普通的容器元素；當(dāng)一個(gè)內(nèi)容需要被直接定義樣式或通過(guò)腳本定義行為時(shí)，推薦使用p而非section元素；

　　4、如果article、nav、aside元素都符合某條件，那么就不要用section元素定義；

　　5、section元素中的內(nèi)容可以單獨(dú)存儲(chǔ)到數(shù)據(jù)庫(kù)中或輸出到word文檔中。

<section>
　　　<h1>section元素的</h1>標(biāo)題
　　　<p>section區(qū)塊的主題部分</p>
　</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è)面容器，那是p元素的工作。

2）如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。

3）不要為沒(méi)有標(biāo)題的內(nèi)容區(qū)塊使用section元素。

三、兩者的區(qū)別：

以上講述了那么多，兩者的區(qū)別到底是什么呢？事實(shí)上，在HTML5中，article元素可以看成是一種特殊類型的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中，p元素變成了一種容器，當(dāng)使用CSS樣式的時(shí)候，可以對(duì)這個(gè)容器進(jìn)行一個(gè)總體的CSS樣式的套用。

總結(jié)

以上所述是小編給大家介紹的HTML5中的article和section的區(qū)別，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！