HTML5新增7个结构元素(详解)
2025-01-29
●header
header 元素表示页面中的一个内容区块或者整个页面的标题,通常放在页面的头部。
通常用来显示页面中的标题、logo图片、搜索文本框或者其他相关的内容
<div class="mian-container">
<header>
<div class="logo">
<a href="#"><img src="images/logo.jpg" alt=""></a>
</div>
</header>
</div>
●article
article 元素中的内容独立于文档的其余部分,表示页面中的一块与上下文不相关的独立内容。
可能的 article 实例:
1.论坛帖子
2.报纸文章
3.博客条目
4.用户评论
●section
section 元素用于将页面上的内容划分为独立的区域,定义文档中的节,例如章节、页眉、页脚或者文档的其他部分。
article元素通常与section元素一起使用。
article 与 section的区别,section元素强调分段或块,而article元素强调独立性。
如果一块内容相对来说比较独立,完整时,使用article;如果想将一块内容划分为几段,就应该使用section。
<article>
<header>
<h1>第一章</h1>
</header>
<section>
<header><h1>第一节</h1></header>
<p>第一节的内容</p>
<footer>第一节的其他信息</footer>
</section>
</article>
●nav
nav元素的内容可能是导航链接列表,标记为一个有序列表或者一个无序列表 .
使用场合:
1:传统导航条
2:侧边栏导航
3: 页内导航
4:翻页导航
<div class="wrapper">
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">文章列表</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
css部分
<style>
*{
padding:0;
margin: 0;
list-style: none;
}
body,html{
width: 100%;
height: 100%;
}
.wrapper{
width: 100%;
}
nav{
width: 600px;
margin: 0 auto;
height: 40px;
background-color: #ccc;
}
nav ul li{
float: left;
line-height: 40px;
text-align: center;
padding: 0 15px;
margin:0 5px;
}
nav li a{
text-decoration: none;
color: #fff;
}
nav ul li:hover{
background-color: pink;
}
</style>
●footer
footer元素用来定义父级区块(section),或根区块(document)的脚注信息,使用该元素可以显示作者、文档的创建日期、
相关阅读链接以及版权信息。
<div class="wrapper">
<footer>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">文章列表</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<p class="copyRight">Copyright Import 2017.All Right Reserved</p>
<a href="#" class="ht5">HTML5</a><a href="#" class="c3">CSS3</a>
<p class="design">DESIGNS BY: <a href="#">TEMPLATE WORLD</a></p>
</footer>
</div>
●address
address元素为文档或section定义联系信息,这些联系信息可以是E-mail地址、邮政地址或者其他形式。
address元素并不适合所有需要地址信息的情况,例如,对于客户联系信息就不需要该元素.
内容呈现为斜体
<address>
<a href="#">I love Myself</a>
</address>
●hgruop
hgroup元素用于对整页面或section区段的标题进行组合,它是将标题及其子标题进行分组的元素。
注意:
1:如果只有一个标题元素(h1~h6中的一个),不建议使用hgroup元素
2:当出现一个或者一个以上的标题与元素时,建议使用hgroup元素作为标题容器
3:当一个标题有副标题、其他section或者article的元数据时,建议使用hgroup元素和元数据放到一个单独的header元素容器中。
<hgroup>
<h1 class="blogtitle">
<a href="#">Love 微微风的博客</a>
</h1>
<h3>记录我生活的点点滴滴...</h3>
</hgroup>