标签布局
- H5 新增了很多语义化标签，使用语义化标签的好处是增强了代码的可阅读性，也方便了网站的seo
- SEO: Search Engine Optimization，搜索引擎优化
- 书写样式时可以直接使用h5新增的语义标签作为选择器
- header 头部标签
- nav 导航标签
- article 内容标签
- section 块级标签
- aside 侧边栏标签
- footer 尾部标签
代码语言：javascript
复制<section class="w">
块级标签
<header class="h">头部标签</header>
<nav class="h">导航标签</nav>
<section class="clearfix">
块级标签
<aside>侧边栏标签</aside>
<article>内容标签</article>
</section>
<footer class="h">尾部标签</footer>
</section>
代码语言：javascript
复制.w {
margin: 0 auto;
width: 1200px;
}
.h {
height: 60px;
line-height: 60px;
}
.clearfix:after {
content:"";
display: block;
height: 0;
clear: both;
visibility:hidden;
}
/* 并集选择器，统一设置 */
header,nav,aside,article,footer {
background-color: orange;
margin: 10px;
text-align: center;
border-radius: 3px;
font-size: 20px;
font-weight: 700;
color: #333;
}
aside {
float: left;
width: 200px;
height: 600px;
}
article {
float: left;
width: 960px;
height: 600px;
}
