HTML知識點總結之div、section標簽


  • div元素

div是塊級元素,相當於一個容器,在語義上不代表任何特定類型的內容。主要用作大的框架布局,也就是說網頁的骨架主要通過div來架設的,而網頁的血肉則是有span、p或者ul等元素完成。

  • section元素

<section>標簽是HTML5新增的語義化標簽,代表文檔中的“節”或“段”。“段”可以是指一篇文章里按照主題的分段;“節”可以是指一個頁面里的分組。主要作用為對頁面的內容進行分塊或者對文章的內容進行分段。

section是塊級元素,section標簽通常帶有一個標題和一個內容塊。​

  • article元素​

<article>標簽也是HTML5新增的語義化標簽,代表一個頁面中自成一體的內容,目的是為了讓開發者獨立開發或重用。譬如論壇的帖子,博客上的文章,一篇用戶的評論等。除了內容,article會有一個標題(通常會在header里)和一個footer頁腳。article也是塊級元素

如果在article內部再嵌套article,代表內嵌的article與它外部的內容有關聯。

  • section與article的區別:

section和article可以互相嵌套,也就是說他們沒有上下級關系,section可以包含article,article也可以包含section。

拿報紙舉個例子:

一份或一張報紙有很多個版塊,有頭版、國際時事版塊、體育版塊、娛樂版塊、文學版塊等等,像這種有版塊標題的、內容屬於一類的版塊就可以用section包起來。

然后在各個版塊下面,又有很多文章、報道,每篇文章都有自己的文章標題、文章內容。這個時候用article就最好。如果一篇報道太長,分好多段,每段都有自己的小標題,這時候又可以用section把段落包起來。(以上內容來自知乎https://www.zhihu.com/question/20227599 )

  • section和div的區別

1、section和div都可以對內容進行分塊,但是section是進行有意義的分塊,無意義的分塊應該由div來做,例如用作設置樣式的頁面容器。
2、section內部必須有標題,標題也代表了section的意義所在。

  • 注意:

​1、不要將<section>作為用來設置樣式或行為的“鈎子”容器,那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合狀況,不要使用<section>。
3、不要為沒有標題的內容區塊使用<section>。

4、一條簡單的准則是,只有元素內容會被列在文檔大綱中時,才適合用section元素。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM