HTML5新增布局标签

刘春龙原创...大约 2 分钟

HTML5 是 HTML 最新的修订版本，2014 年 10 月由万维网联盟（W3C）完成标准制定

在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5 新增了很多新的语义化标签

H5 新标签

<header></header> 头部
<nav></nav> 导航
<section></section>定义文档中的节,比如章节、页眉、页脚
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

提示

div+css 实现

H5 新标签实现

效果展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      header {
        height: 50px;
        background-color: #abcdef;
        width: 100%;
      }
      div {
        margin-top: 10px;
        height: 150px;
      }
      section {
        height: 150px;
        background-color: #abcdef;
        width: 70%;
        float: left;
      }
      article {
        background-color: #f33;
        width: 100%;
        text-align: center;
        margin: 0px auto;
      }
      aside {
        height: 150px;
        background-color: #abcdef;
        width: 28%;
        float: right;
      }
      footer {
        height: 50px;
        background-color: #abcdef;
        clear: both;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <header>定义一个页面或是区域的头部</header>
    <div>
      <section>定义一个区域</section>
      <aside>定义页面内容的侧边框部分</aside>
    </div>
    <footer>定义一个页面或是区域的底部</footer>
  </body>
</html>

轻松一刻 🎧

音乐

视频教程 🎥

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服open in new window进行相关咨询。

昵称

邮箱

网址

按正序
按倒序
按热度

HTML5新增布局标签

预览: