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>
上面的代码运行效果如下（详情已被点开）：
