深入淺析HTML5中的article和section的區別

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249317.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249317.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249317.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

IPV6 簡單總結

1. 轉帖別人的內容 來源&#xff1a;https://www.2cto.com/net/201112/114937.html 2. 本地用IPV6單播地址 (包括鏈路本地單播地址 和 站點本地單播地址) 2.1 鏈路本地單播地址 規定了鏈路本地和站點本地兩種類型的本地使用單播地址。鏈路本地地址用在單鏈路上&#xff0c; 而…

源碼分析

https://blog.csdn.net/taifei/article/details/73546836

面向對象第一單元總結

一、對面向對象的理解 有位同學給java的面向對象做了一個形象生動的類比&#xff0c;我覺得很有道理&#xff0c;大概按我的理解如下&#xff1a; 結構的形成看圖之前&#xff0c;我們要先明白&#xff0c;世界上是先有了實體&#xff0c;才有了一步步抽象至以上的體系結構&…

理解HTML語義化

1、什么是HTML語義化&#xff1f; <基本上都是圍繞著幾個主要的標簽&#xff0c;像標題&#xff08;H1~H6&#xff09;、列表&#xff08;li&#xff09;、強調&#xff08;strong em&#xff09;等等> 根據內容的結構化&#xff08;內容語義化&#xff09;&#xff0c;…

maven上傳命令

mvn deploy:deploy-file -DgroupIdcom.oracle -DartifactIdojdbc8 -Dversion12.2.0.1 -Dpackagingjar -DfileC:\Users\Admin\Desktop\ojdbc8.jar -Durlhttp://116.247.107.83:8081/repository/maven-releases/ -DrepositoryIdmy-nexus-releases

cocos2dx 開啟控制臺

打開 SimulatorWin.cpp 把這句啟用&#xff1a; #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 這句本來因為#define隱藏了轉載于:https://www.cnblogs.com/mingfuqishi/p/9774301.html

網頁編排規則

所謂大綱&#xff0c;簡單來說就是文檔中各內容區塊的結構編排。可以分為顯式編排和隱式編排2種方式。 顯式編排&#xff1a;明確使用section元素創建文檔結構&#xff0c;在每個內容區塊內使用標題 隱式編排&#xff1a;不明確使用section等元素&#xff0c;根據頁面中所書寫的…

基本動態規劃題集

觀察下面的數字金字塔。寫一個程序查找從最高點到底部任意處結束的路徑&#xff0c;使路徑經過數字的和最大。每一步可以從當前點走到左下方的點也可以到達右下方的點。 在上面的樣例中,從13到8到26到15到24的路徑產生了最大的和86。 【輸入】 第一個行包含R(1≤ R≤1000)&…

springboot項目間接口調用實現:RestTemplate

https://blog.csdn.net/zhanglf02/article/details/89842372

python入門學習的第三天

step 1 時間 Python有兩個模塊&#xff0c;time和calendar&#xff0c;它們可以用于處理時間和日期 首先 import time 導入時間模塊 然后 print time.time() 這個叫時間戳&#xff0c;它是從1970年1月1日午夜到現在時刻的秒數 print time.localtime(time.time()) print time.st…

JavaScript事件詳解

JavaScript與HTML之間的交互是通過事件來實現的。事件&#xff0c;就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以用偵聽器來預訂事件&#xff0c;以便事件發生的時候執行相應的代碼。 事件流 事件流描述了從頁面中接收事件的順序&#xff0c;包括事件冒泡和事件捕獲。…

JavaScript基礎01

JavaScript查漏補缺 JavaScript有幾種數據類型&#xff1f; 0. String(字符串) 1. Number(數值) 2. Boolean(布爾) 3. Null(空值) 4. Undefined(未定義) 5. Object(對象)前 5 種是基本類型 Null類型和Undefined類型的定義和區別&#xff1f; Null類型的值只有一個(null)&#…

.Net Core應用框架Util介紹(五)

上篇簡要介紹了Util在Angular Ts方面的封裝情況&#xff0c;本文介紹Angular封裝的另一個部分&#xff0c;即Html的封裝。 標準組件與業務組件 對于管理后臺這樣的表單系統&#xff0c;你通常會使用Angular Material或Ng-Zorro這樣的UI組件庫&#xff0c;它們提供了標準化的U…

SpringBoot中處理的轉發與重定向

https://blog.csdn.net/yubin1285570923/article/details/83796003

scrapy爬蟲系列之三--爬取圖片保存到本地

功能點&#xff1a;如何爬取圖片&#xff0c;并保存到本地 爬取網站&#xff1a;斗魚主播 完整代碼&#xff1a;https://files.cnblogs.com/files/bookwed/Douyu.zip 主要代碼&#xff1a; douyu.py import scrapy import json from Douyu.items import DouyuItemclass DouyuSp…

glup server 報錯 Task function must be specified

解決方案 今天像往常一樣&#xff0c;編寫文章&#xff0c;并使用gulp bulid壓縮代碼&#xff0c;但是一運行&#xff1a;gulp build 就出現了這個錯誤&#xff1a;AssertionError: Task function must be specified。 gulp項目需要全局安裝gulp和項目內安裝gulp&#xff0c;…

mybatis Example 使用方法

一、mapper接口中的方法解析 mapper接口中的函數及方法 方法 功能說明 int countByExample(UserExample example) thorws SQLException 按條件計數 int deleteByPrimaryKey(Integer id) thorws SQLException 按主鍵刪除 int deleteByExample(UserExample example) thorws SQLE…

gulp + browsersync實現頁面自動刷新

寫習慣了vue&#xff0c;特別喜歡vue的自動刷新功能&#xff0c;于是琢磨在node中如何自動刷新&#xff0c;使用過nodemon&#xff0c; 但是感覺效果差點&#xff0c;看到網上有gulp livereload的方案和gulp browsersync的方案&#xff0c;但都是褒貶不一&#xff0c;先簡單記…

[JZOJ5836] Sequence

Problem 題目鏈接 Solution 吼題啊吼題&#xff01; 首先如何求本質不同的子序列個數就是 \(f[val[i]]1\sum\limits_{j1}^k f[j]\) 其中 \(f[i]\) 表示的是以 \(i\) 結尾的子序列個數 先把原數列的不同子序列個數求出來&#xff0c;然后觀察一下這個轉移&#xff0c;貪心的發現…

numpy和pandas的基礎索引切片

Numpy的索引切片 索引 In [72]: arr np.array([[[1,1,1],[2,2,2]],[[3,3,3],[4,4,4]]]) In [73]: arr Out[73]: array([[[1, 1, 1],[2, 2, 2]],[[3, 3, 3],[4, 4, 4]]])In [74]: arr.nd…