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

本文轉載於:猿2048網站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的區別

一、section和div均可以對內容進行分塊，可是section是進行有意義的分塊，無心義的分塊應該由div來作，例如用做設置樣式的頁面容器。
二、section內部必須有標題，標題也表明了section的意義所在。

• 注意：

​一、不要將<section>做爲用來設置樣式或行爲的「鉤子」容器，那是<div>的工做。
二、若是<article>、<aside>或<nav>更符合情況，不要使用<section>。
三、不要爲沒有標題的內容區塊使用<section>。

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