HTML5 文档元素

要点：

文档元素汇总
文档元素解析

文档元素的主要作用是划分文档的不同内容，让整个布局更加清晰明快。

文档元素总汇

文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。

元素名称	说明
h1~h6	表示标题
header	表示首部
footer	表示尾部
nav	表示有意集中在一起的导航元素
section	表示重要概念或主题
article	表示一段独立的内容
address	表示文档或 article 的联系信息
aside	表示与周边内容少有牵涉的内容
hgroup	将一组标题组织在一起
details	生成一个区域，用户将其展开可以获得更多细节
summary	用在 details 元素中，表示该元素内容的标题或说明

文档元素总汇

文档元素的大部分标签，其实是没有任何效果的，是为了配合语义使用，强调文档的结构性的。但后面学习了CSS，配合使用就能起到布局和样式的效果了。

1、<header>表示首部

<header>这里部分一般是页面头部，包括：LOGO、标题、导航等内容 </header>

解析：<header>元素主要设置页面的标头部分。（无效果）

2、<footer>表示尾部

<footer> 这里是页面的尾部，一般包括：版权声明、友情链接等内容 </footer>

解析：<footer>元素主要设置页面的尾部。（无效果）

3、<h1>~<h6>设置标题

<h1>标题部分</h1>
<h4>小标题部分</h4>

解析：<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。（放大并加粗字体效果）

4、<hgroup>组合标题

<hgroup>
    <h1>标题部分</h1>
    <h4>小标题部分</h4>
</hgroup>

解析：<hgroup>元素的作用就是包裹多个标题，对多个标题进行操作。同时被包裹的标题个数不应该少于两个，如果只有一个标题，则需要去掉<hgroup>元素的包裹。（无效果）

5、<section>文档主题

<section> 这里一般是存放文档主题内容。 </section>

解析：<section>元素的作用是定义一个文档的主题内容。（无效果）

6、<nav>添加导航

<nav>这里存放文档的导航</nav>

解析：<nav>元素给文档页面添加一个导航。（无效果）

7、<article>添加一个独立成篇的文档

<article>
    <header>
        <nav></nav>
    </header>
    <section></section>
    <footer></footer>
</article>

解析：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。 在比较大的页面中会使用到，比如一篇博文的列表，作文网站的多篇文章，都有自己的头、尾、主题等内容。与此相类似的还有论坛的帖子、用户的评论、新闻等。（无效果）

8、<aside>生成注释栏

<aside>这是是一个注释</aside>

解析：<aside>元素专门为某一段内容进行注释使用。（无效果）

9、<address>表示文档或 article 元素的联系信息。

<address>联系信息</address>

解析：<如果是在元素下时，表示整个文档的联系信息。如果是在

元素下时，表示其下的联系信息。（字体会变成斜体效果）

10、<details>元素生成详情区域、<summary>元素在其内部生成说明标签

<details>
	这是一个详情区域
	<summary>这是一个说明标签</summary>
</details>

解析：<details>元素会生成一个折叠按钮，按钮点开后会显示标签内的内容。其折叠按钮的名称默认为详情，可使用<summary>元素放置到<details>标签内部，使用<summary>标签内的内容设置折叠按钮的名称。

效果展示：

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=UTF-8">
</head>
<body>
	<article>
		<header>这里部分一般是页面头部，包括：LOGO、标题、导航等内容</header>
		<hgroup>
		    <h1>标题部分</h1>
		    <h4>小标题部分</h4>
		</hgroup>
		<section>这里一般是存放文档主题内容。</section>
		<nav>这里存放文档的导航</nav>
		<aside>这是是一个注释</aside>
		<address>联系信息</address>
		<details>
			这是一个详情区域
			<summary>这是一个说明标签</summary>
		</details>
		<footer>这里是页面的尾部，一般包括：版权声明、友情链接等内容</footer>
	</article>
</body>
</html>

上面的代码运行效果如下（详情已被点开）：

在这里插入图片描述