剛剛學習web前端的小夥伴對於article和section有那些區別有些混淆,今天針對這樣的狀況,小猿圈web前端講師就講講article和section的區別都有哪些?前端
內容區塊是指將HTML頁面按邏輯分割後的單位。對於頁面網站來講,導航菜單、文章正文、文章的評論等每個部分均可稱爲內容區塊。web
article元素數據庫
article元素表明文檔、頁面或應用程序中獨立的、完整的、能夠獨自被外部引用的內容。它能夠是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件,或其餘任何獨立的內容。除了內容部分,一個article元素一般有它本身的標題(通常放在一個header元素裏面),有時還有本身的腳註。yii
<article> ide
<header> 學習
<h1>標題</h1> 網站
<p>發表日期:<time pubdate="pubdate">2010/10/10</time></p>.net
</header>插件
<p>article的使用方法</p> cdn
<footer>
<p><small>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樣式的套用。
以上就是小猿圈web前端講師介紹的article和section的區別都有哪些,但願你能在自學web前端中找到本身的學習方法以及真正有用的學習網站web前端自學②羣:738735873,若是你沒有能夠到小猿圈怎麼上這裏,這裏不只有專業的學習視頻還有老師指導你學習幫助你進步,但願你在不斷進步中加快成長。