HTML5 新增标签



标签布局

  • H5 新增了很多语义化标签,使用语义化标签的好处是增强了代码的可阅读性,也方便了网站的seo
  • SEO: Search Engine Optimization,搜索引擎优化
  • 书写样式时可以直接使用h5新增的语义标签作为选择器
    • header 头部标签
    • nav 导航标签
    • article 内容标签
    • section 块级标签
    • aside 侧边栏标签
    • footer 尾部标签
图片描述
<section class="w">
    块级标签
    <header class="h">头部标签</header>
    <nav class="h">导航标签</nav>
    <section class="clearfix">
        块级标签
        <aside>侧边栏标签</aside>
        <article>内容标签</article>
    </section>
    <footer class="h">尾部标签</footer>
</section>
.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;
}
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片