详解HTML5语义化标签
-
<header>头部标签 -
<nav>导航标签 -
<article>内容标签 -
<section>块级标签 -
<aside>侧边栏标签 -
<footer>尾部标签注意：
- 语义化标签主要针对于搜索引擎
- 新标签在页面中可以使用多次
- IE9中，需要把这些元素转换为块级元素
- 移动端使用这些标签较多
header,
nav,
article,
section,
aside,
footer {
display: block;
}
header {
height: 80px;
background-color: aqua;
line-height: 80px;
text-align: center;
}
nav {
margin-top: 10px;
height: 80px;
background-color: bisque;
line-height: 80px;
text-align: center;
}
article {
float: left;
margin-top: 10px;
width: 50%;
height: 300px;
background-color: cadetblue;
}
section {
float: left;
width: 300px;
height: 80px;
background-color: chartreuse;
margin: 40px auto;
}
aside {
float: right;
margin-top: 10px;
width: 50%;
height: 300px;
background-color: coral;
}
footer {
float: left;
width: 100%;
height: 80px;
background-color: darkkhaki;
margin-top: 10px;
}
<body>
<header>header</header>
<nav>nav</nav>
<article>article<section>section</section></article>
<aside>aside</aside>
<footer>footer</footer>
</body>
