扣丁學堂HTML5培訓淺析HTML5中的article和section的區別

對於HTML5開發技術相信小夥伴應該都比較熟悉，就算不了解也會常常聽到周圍的人提起，本篇文章扣丁學堂HTML5培訓小編給讀者們分享一下HTML5中的article和section的區別，感興趣的小夥伴就隨小編來了解一下吧。

內容區塊是指將HTML頁面按邏輯分割後的單位。對於頁面網站來講，導航菜單、文章正文、文章的評論等每個部分均可稱爲內容區塊。

article元素

article元素表明文檔、頁面或應用程序中獨立的、完整的、能夠獨自被外部引用的內容。它能夠是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其餘任何獨立的內容。除了內容部分，一個article元素一般有它本身的標題(通常放在一個header元素裏面)，有時還有本身的腳註。

<article>

<header> 　　　　

<h1>標題</h1>

<p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>　　

</header>

　　<p>article的使用方法</p> 　　

　　<footer>

　　<p>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>　　

　　</footer>

　　</article>

注：article元素是能夠嵌套使用的，內層的內容在原則上須要與外層的內容相關聯。例如，一篇博客文章中，針對該文章的評論就可使用嵌套article元素的方式；用來呈現評論的article元素被包含在表示總體內容的article元素裏面。

嵌套的代碼以下：

<article>

　　<header>

<h1>article元素使用方法</h1>

　　　　<p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>

　　</header>

　　<p>此標籤裏顯示的是article整個文章的主要內容，，下面的section元素裏是對該文章的評論</p>

　　<section>

<h2>評論</h2>

　　　　<article>

<header>

　　　　　　　　<h3>發表者：maizi</h3>

　　　　　　　　<p><time pubdate datetime="2016-6-14">1小時前</time></p>

　　　　　　</header>

　　　　　　<p>這篇文章很不錯啊，頂一下！</p>

</article>

　　　　<article>

<header>

　　　　　　　　<h3>發表者：小妮</h3>

<p><time pubdate datetime="2016-6-14T:21-26:00">1小時前</time></p>

　　　　　　</header>

　　　　<p>這篇文章很不錯啊，對article解釋的很詳細</p>

　　　　</article>

</section>

</article>

示例內容分爲幾個部分，文章標題放在了header元素中，文章正文放在了header元素後面的p元素中，而後section元素把正文與評論進行了區分（是一個分塊元素，用來把頁面中的內容進行區分），在section元素中嵌入了評論的內容，評論中每個人的評論相對來講又是比較獨立的、完整的，所以對它們都使用一個article元素，在評論的article元素中，又能夠分爲標題與評論內容部分，分別放在header元素與p元素中。

一、section元素用於對網站或應用程序中頁面上的內容進行分塊，section元素的做用是對頁面上的內容進行分塊，或者說對文章進行分段。

二、一個section元素一般由內容及其標題組成。一般不推薦爲那些沒有標題的內容使用section元素。

三、section元素並不是一個普通的容器元素；當一個內容須要被直接定義樣式或經過腳本定義行爲時，推薦使用p而非section元素。

四、若是article、nav、aside元素都符合某條件，那麼就不要用section元素定義。

五、section元素中的內容能夠單獨存儲到數據庫中或輸出到word文檔中。

<section>

　　　<h1>section元素的</h1>標題

　　　<p>section區塊的主題部分</p>

　</section>

在HTML5中，你能夠將全部頁面的從屬部分，譬如導航條、菜單、版權說明等包含一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。最後，關於section元素的使用禁忌總結以下：

一、不要將section元素用做設置樣式的頁面容器，那是p元素的工做。

二、若是article元素、aside元素或nav元素更符合使用條件，不要使用section元素。

三、不要爲沒有標題的內容區塊使用section元素。

二者的區別：

以上講述了那麼多，二者的區別究竟是什麼呢？事實上，在HTML5中，article元素能夠當作是一種特殊類型的section元素，它比section元素更強調獨立性。即section元素強調分段或分塊，而article強調獨立性。

具體來講，若是一塊內容相對來講比較獨立的、完整的時候，應該使用article元素，可是若是你想將一塊內容分紅幾段的時候，應該使用section元素。另外，在HTML5中，p元素變成了一種容器，當使用CSS樣式的時候，能夠對這個容器進行一個整體的CSS樣式的套用。

以上就是扣丁學堂HTML5在線學習小編給你們分享的HTML5中的article和section的區別，但願對小夥伴們有所幫助，想要了解更多內容的小夥伴能夠登陸扣丁學堂官網諮詢。

想要學好HTML5開發小編給你們推薦口碑良好的扣丁學堂，扣丁學堂有專業老師制定的HTML5學習路線圖輔助學員學習，此外還有與時俱進的HTML5課程體系和HTML5視頻教程供你們學習，想要學好HTML5開發技術的小夥伴快快行動吧。