html5中section元素詳解

一、總結

一句話總結：

section元素 用來定義文章中的章節(通常應該有標題和段落內容)

section元素的作用就是給內容分段，給頁面分區

 

1、section元素 和 div元素的區別是什么？

div強調在形式上的獨立性，section強調的是內容上的獨立性，注意它的語義。

section可以看做 <div id="section"></div>

 

2、article元素和section元素的區別是什么？

article元素更強調內容的獨立性（比如說一篇文章）：可能有header和footer

section元素更強調內容的關聯性（比如說兩個段落，是相似的）：可能有標題和段落內容

 

 

3、article元素和section元素和div的關聯性是什么？

本質上都是帶有語義的div塊元素

分別可以看作<div id="section">和<div id="article">

 

 

 

二、html5--2.4新的布局元素(3)-section

 

學習要點

1. 了解section元素的語義和用法
2. 通過實例理解section元素的用法
3. article元素和section元素的區別和共同點

 

1. article元素（標簽）
• 用於定義一個獨立的內容區塊，比如一篇文章，一篇博客，一個帖子，論壇的一段用戶評論，一篇新聞消息等.
• article元素內可以嵌套其他元素，它可以有自己的頭、尾、主體等內容。使用時要特別注意內容的獨立性，一般對於獨立完整的內容才使用article元素，如果只是一段內容的話應該使用section元素。

 

1. section元素（標簽）
• 用來定義文章中的章節(通常應該有標題和段落內容)
• 用來定義文檔中特定內容的區塊，可視為一個區域分組元素，用來給頁面上的內容分塊。
• section元素可以定義文檔的主體內容。
• 用一句話來概括它的作用就是給內容分段，給頁面分區
• 注意他與div的區別，div強調在形式上的獨立性，section強調的是內容上的獨立性，注意它的語義。

 

1. article元素和section元素的區別

語義不同

• article元素更強調內容的獨立性（比如說一篇文章）
• section元素更強調內容的關聯性（比如說兩個段落，是相似的）
• article元素是獨立完整的內容，section元素頁面內容分塊

相同點

• 本質上都是帶有語義的div塊元素
• 分別可以看作&ltdiv id="section"&gt和&ltdiv id="article"&gt

---

實例

用來定義文檔中特定的區塊