HTML5标签变化-结构标签
2017-11-12 本文已影响0人
霜之朝
结构标签
结构标签：可以理解为有意义的div
<article></article> 标记定义一篇文章
<header></header> 标记定义一个页面或一个区域的头部
<nav></nav> 标记定义导航链接
<section></section> 标记定义一个区域
<aside></aside> 标记定义页面内容部分的侧边栏
<hgroup></hgroup> 标记定义文件中一个区块的相关信息
hgroup使用：
<hgroup>
<h1>标题</h1>
<h2>二级标题</h2>
</hgroup>
<figure></figure> 标记定义一组媒体内容以及他们的标题
figure使用：
<figure>
<img src="" alt="">
<figcaption>图片标题</figcaption>
</figure>
<footer></footer> 标记定义一个页面或一个区域的底部
<dialog></dialog> 标记定义一个对话框
结构标签的具体使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
footer {
height: 50px;
background-color: #abcdef;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #696969;
}
</style>
</head>
<body>
<header>
<div>Logo</div>
<nav>
<a href="">首页</a>
<a href="">介绍</a>
<a href="">案例</a>
<a href="">链接</a>
<a href="">关于</a>
</nav>
</header>
<section>
<hgroup>
<h1>title</h1>
<h3>author</h3>
<h4>date</h4>
</hgroup>
<aside>
<a href="#se1">section one</a>
<a href="#se2">section two</a>
<a href="#se3">section three</a>
</aside>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat odit nesciunt molestiae expedita, dicta in veniam quidem voluptate alias perspiciatis quod doloremque libero. Quasi, aut impedit? Aliquid blanditiis maiores voluptatibus.
</p>
</article>
</section>
<section>
<figure>
<div class="video"></div>
<figcaption>视频标题</figcaption>
</figure>
</section>
<section>
<dialog>
<dt>张三：内容还不错</dt>
<dd>李四：还好吧，就是主题不突出</dd>
</dialog>
<dialog>
<dt>张三：内容还不错</dt>
<dd>李四：还好吧，就是主题不突出</dd>
</dialog>
</section>
<footer>
copyright
</footer>
</body>
</html>
结构标签的补充点
-
header/section/aside/article/footer不要自己嵌套自己
例如：
<header>
<header></header>
</header>
是不合适的。
- 嵌套级别：
header/section/footer 大于 aside/article/figure/hgroup/nav。
<article>
<header></header>
</article>
这样的也是不合适的。
