1.header: 这个标签表示一个节的头部
hgroup: 这个标签表示一组标题
footer: 这个标签表示一个节的脚注, 可以包含作者, 版权等信息
nav: 这个标签用于导航链接部分
section: 这个标签表示一个通用的文档或者应用程序节
article: 这个标签表示文档内容的一个独立块, 比如博客条目或者报纸上的文章
aside: 这个标签表示与也 main 其他部分略微相关的内容块
各元素介绍:
1,hgroup: 元素代表页面或内容块的标题分组
当元素有多个层级时, 该元素可以将 h1 到 h6 元素放在其内
譬如文章的主标题和副标题的组合
如果只需要一个 h2-h6 标签就不要用 hgroup
例如:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Hgroup</title>
- </head>
- <body>
- <hgroup>
- <h1 > 王者农药 </h1>
- <h2>2 亿人都在王的游戏 </h2>
- </hgroup>
- <p>qwertyuio asdfghjk zzxcvbnm wertyui</p>
- </body>
- </html>
2,header: 元素代表页面或内容块的头部标题 (页眉)
通常包含 h1-h6 元素或 hgroup
页面中 header 元素的个数没有限制, 可以拥有多个
可以为每个内容块增加一个 header 元素
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>header</title>
- <style>
- header{
- border: 1px solid #ff0000;
- margin: 5px;
- }
- div{
- border: 1px solid #333333;
- margin: 5px;
- }
- </style>
- </head>
- <body>
- <header>
头部信息
- </header>
- <div>
- <header>
- <p > 页面正文区域 </p>
- </header>
- <section>
- <article>
- <header>
- <h1 > 王者荣耀 </h1>
- <h2 > 游戏 </h2>
- </header>
<p>Lorem IPSUM qwertyui asdfg zxcvb sdfg cvxcvb</p>
- </article>
- <article>
- <header>
- <h1 > 王者荣耀 </h1>
- <h2 > 游戏 </h2>
- </header>
<p>Lorem IPSUM qwertyui asdfg zxcvb sdfg cvxcvb</p>
- </article>
- </section>
- </div>
- </body>
- </html>
footer: 元素代表页面或内容块的底部部分 (页脚)
通常含有该节的一些基本信息 (譬如: 作者, 相关文档连接, 版权资料等)
如果 footer 元素包含了整个节, 那么他们就代表附录, 索引等类似信息 footer 没有个数限制, 除了包裹的内容不一样, 其他跟 header 类似
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>footer</title>
- <style>
- div{
- border: 2px solid #333333;
- margin: 5px;
- }
- footer{
- border: 2px solid brown;
- margin: 5px;
- }
- </style>
- </head>
- <body>
- <header > 头部信息 </header>
- <div>
页面正文区域
- </div>
- <footer>
- <div>©;2017</div>
- </footer>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2608315.html