內容區塊是指將HTML頁面依邏輯分割後的單位。對於頁面網站來說,導航選單、文章正文、文章的評論等每一個部分都可稱為內容區塊。
article元素article元素代表文件、頁面或應用程式中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇部落格或報紙中的文章、一篇論壇貼文、一段用戶評論或獨立的插件,或其他任何獨立的內容。除了內容部分,一個article元素通常有它自己的標題(一般放在一個header元素裡面),有時還有自己的腳註。
<article> <header> <h1>標題</h1> <p>發佈日期:<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元素是可以嵌套使用的,內層的內容在原則上需要與外層的內容相關聯。例如,在一篇部落格文章中,針對該文章的評論就可以使用嵌套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元素中。
1.section元素用於對網站或應用程式中頁面上的內容進行分塊,section元素的作用是對頁面上的內容進行分塊,或者說對文章進行分段,;
2、一個section元素通常由內容及其標題組成。通常不建議為那些沒有標題的內容使用section元素,
3.section元素並非普通的容器元素;當一個內容需要直接定義樣式或透過腳本定義行為時,建議使用p而非section元素;
4.如果article、nav、aside元素都符合某一條件,那就不要用section元素定義;
5.section元素中的內容可以單獨儲存到資料庫或輸出到word文件中。
<section> <h1>section元素的</h1>標題<p>section區塊的主題部分</p> </section>
在HTML5中,你可以將所有頁面的從屬部分,譬如導航條、選單、版權說明等包含一個統一的頁面中,以便統一使用CSS樣式來進行裝飾。最後,關於section元素的使用禁忌摘要如下:
1)不要將section元素當作設定樣式的頁面容器,那是p元素的工作。
2)如果article元素、aside元素或nav元素更符合使用條件,不要使用section元素。
3)不要為沒有標題的內容區塊使用section元素。
三、兩者的差別:以上講述了那麼多,兩者的差別到底是什麼呢?事實上,在HTML5中,article元素可以看成是一種特殊類型的section元素,它比section元素更強調獨立性。即section元素強調分段或分塊,而article強調獨立性。具體來說,如果一塊內容相對來說比較獨立的、完整的時候,應該使用article元素,但是如果你想將一塊內容分成幾段的時候,應該使用section元素。另外,在HTML5中,p元素變成了一種容器,當使用CSS樣式的時候,可以對這個容器進行一個總體的CSS樣式的套用。
總結以上所述是小編給大家介紹的HTML5中的article和section的區別,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持!