7、文檔元素

一、文檔元素彙總

文檔元素基本沒有什麼實際作用效果，主要目的是在頁面布局時區分各個主題和概念。

   元素名稱

                                                     說明

h1~h6

表示标題

header

表示首部

footer

表示尾部

nav

表示有意集中在一起的導航元素

section

表示重要概念或主題

article

表示一段獨立的内容

address

表示文檔或article的聯系資訊

aside

表示與周邊内容有多少牽涉的内容

hgroup

将一組标題組織在一起

details

生成一個區域，使用者将其展開可以擷取更多細節

sumary

用在details元素中，表示該元素内容的标題或說明

二、文檔元素解析

文檔元素的大部分标簽，是沒有任何效果的，完全是為了配合語義使用，以強調它的結構性，隻有在後面的章節學習CSS，配合使用才能起到布局和樣式的效果

1、<header>表示首部

1

2

<code>   </code><code>這裡部分一般是頁面頭部，包括：LOGO，标題、導航等内容</code>

<code>&lt;/</code><code>header</code><code>&gt;</code>

解釋：&lt;header&gt;元素主要設定頁面的标題部分

2、&lt;footer&gt;表示尾部

3

<code>&lt;</code><code>footer</code><code>&gt;</code>

<code>        </code><code>這裡是頁面的尾部，一般包括，版權聲明、友情連結等内容</code>

<code>&lt;/</code><code>footer</code><code>&gt;</code>

解釋：&lt;footer&gt;元素主要設定頁面的尾部

3、&lt;h1&gt;~&lt;h6&gt;添加标題

<code>&lt;</code><code>h1</code><code>&gt;标題部分&lt;/</code><code>h1</code><code>&gt;</code>

<code>&lt;</code><code>h4</code><code>&gt;小标題部分&lt;/</code><code>h4</code><code>&gt;</code>

解釋：&lt;h1&gt;~&lt;h6&gt;實際作用就是加粗并且改變字型大小，用于各種标題文檔。

4、&lt;hgroup&gt;組合标題

4

<code>&lt;</code><code>hgroup</code><code>&gt;</code>

<code>   </code><code>&lt;</code><code>h1</code><code>&gt;标題部分&lt;/</code><code>h1</code><code>&gt;</code>

<code>   </code><code>&lt;</code><code>h4</code><code>&gt;小标題部分&lt;/</code><code>h4</code><code>&gt;</code>

<code>&lt;/</code><code>hgroup</code><code>&gt;</code>

解釋：&lt;hgroup&gt;元素作用就是當多個标題出現，幹擾到一對或多個本身需要整合的

5、&lt;section&gt;文檔主題

<code>&lt;</code><code>section</code><code>&gt;</code>

<code>    </code><code>這裡一般是存放文檔主題内容，</code>

<code>&lt;/</code><code>section</code><code>&gt;</code>

解釋：&lt;section&gt;元素的作用是定義一個文檔的主體内容

6、&lt;nav&gt;添加導航

&lt;nav&gt;這裡存放着文檔的導航&lt;/nav&gt;

解釋：&lt;nav&gt;元素給文檔頁面添加一個導航

7、&lt;article&gt;添加一個獨立成篇的文檔

5

6

<code>&lt;</code><code>article</code><code>&gt;</code>

<code>     </code><code>&lt;</code><code>header</code><code>&gt;</code>

<code>           </code><code>&lt;</code><code>nav</code><code>&gt;&lt;/</code><code>nav</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>header</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>footer</code><code>&gt;&lt;/</code><code>footer</code><code>&gt;</code>

<code>&lt;/</code><code>article</code><code>&gt;</code>

解釋：&lt;article&gt;元素表示獨立成篇的文檔，裡面可以包含頭、尾、主題等一系列内容、在比較大的頁面中會使用到。比如一篇博文的清單，每篇博文，都有自己的頭尾、主題等内容，和此相似的還有論壇和文章、使用者的評論、新聞等。

8、&lt;aside&gt;生成注釋欄

&lt;aside&gt;這是一個注釋欄&lt;/aside&gt;

解釋：&lt;aside&gt;元素專門為某一段内容進行注釋使用

9、&lt;address&gt;表示文檔或article元素的聯系資訊

<code>&lt;</code><code>address</code><code>&gt;聯系資訊&lt;/</code><code>address</code><code>&gt;</code>

解釋：如果是在&lt;body&gt;元素下時，表示整個文檔的聯系資訊，如果是在&lt;article&gt;元素下時，表示其下的聯系資訊。

10、&lt;details&gt;元素生成詳情區域、&lt;summary&gt;元素在其内部生成說明标簽

解釋：由于大多數主流浏覽器尚未支援、省略

<a href="https://s2.51cto.com/wyfs02/M02/8D/96/wKioL1ii1OGgmKxeAABmOHRSS0E587.png" target="_blank"></a>

本文轉自 曾哥最愛 51CTO部落格，原文連結：http://blog.51cto.com/zengestudy/1897766，如需轉載請自行聯系原作者