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，如需转载请自行联系原作者