首頁 > web前端 > H5教程 > 主體

關於html5中的section標籤與div標籤的差異(內有實例)

寻∝梦
發布: 2018-08-29 16:57:54
原創
11352 人瀏覽過

本篇文章主要的想大家介紹了關於HTML5 section標籤和div標籤的區別,section和div的用法看似相近,實則差的也不是太多,有些地方可以相互轉換都行,但有些地方只能用section或只能用div,不能轉換的,好了,接下來就讓我們一起看文章吧

#先看看section標籤的HTML標準中寫的:

每個section對應不同的主題。注意是內容本身的主題,而不是其他人為設定的劃分標準。

section的例子包括書的章節回目、多tab對話框的每個tab頁、論文以數字編號的小節。網站的主頁可能分成介紹、最新內容、聯絡資訊等section。

注意:網頁作者應使用article而不是section元素,如果其內容是用於聚合(syndicate)。例如blog首頁上的每篇blog。又如論壇貼文的一樓、二樓、三樓……n樓。通常這樣的每部分內容形式上是類似的,但是來源是獨立的。

注意:section不是通用容器元素。如果只是用於設定樣式或腳本處理,套用div元素。一個簡單的準則是,只有元素內容會被列在文件大綱中時,才適合用section元素。

接下來要說html5 section標籤和div標籤的差別:

1.section不是一個專用來做容器的標籤,專用的是div 

#section裡應該有標題(h1~6),但文章中推薦用article來代替 

我們可以理解為一個非文章段落,有明確id 的一個特殊模組容器(不是專用以包住塊的容器)。

也就是說,一般情況下作為元素容器,使用div而不是section,那麼section就沒有用了嗎?圖樣圖森破。

這種情況下使用section就比div要好 

section,顧名思義就是一個章節,例如:

<section>
<h1>PHP中文网</h1>
<p>欢迎来到PHP中文网,这里的网址是www.php.cn</p>
</section>
登入後複製

至於為什麼要用,是為了語義化,有section 、article、dl看這多舒服,人也好理解,計算機也好理解,比滿眼的div好多了。

2.人們在標籤使用中最常見到的錯誤之一就是隨意將HTML5的

等價於
——具體地說,就是直接用作替代品(用於樣式)。

並不是樣式容器。 section元素表示的是內容中用來幫助建構文件概要的語意部分。它應該包含一個頭部。如果你想找一個用來當作頁面容器的元素(就像HTML或XHTML的風格),那麼考慮如Kroc Camen所說,直接把樣式寫到body元素上吧。如果你還是需要額外的樣式容器,還是繼續使用div吧。

div是通用的,所有瀏覽器都支持,section是H5語義化的標籤,

可以理解成一個意思,只不過前者是H5的寫法

關於html5中的section標籤與div標籤的總結:

DIV:這個標籤一直是我們見得最多、用得最多的標籤。它本身無任何語義,用作佈局以及樣式化標籤。

Section:與div相似,但它有更進一步的語意。 section用作一段有專題性的內容,一般在它裡面會帶有標題。 section典型的應用場景應該是文章的章節、標籤對話框中的標籤頁、或論文中有編號的部分。

【小編推薦】

如何為html中的pre標籤中的文字換行? html pre標籤的使用實例

HTML ul標籤的什麼意思? HTML ul標籤的作用詳解

#

以上是關於html5中的section標籤與div標籤的差異(內有實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!