H5新增语义化标签

标签语义化

以前布局,我们基本用div来做,文字大部分是用span标签来制作的,span和div对于搜索引擎来说,是没有语义的,认为是普通的标签

  <div class="header"></div>
  <div class="nav"></div>
  <div class="content"></div>
  <div class="foder"></div>

H5 新增语义化标签

<header> :头部标签

<nav> :导航标签

<article>:内容标签

<section> :块级标签

<aside>:侧边栏标签

<footer> :尾部标签

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用H5新增标签的布局</title>
  <style>
    header,
    nav,
    article,
    aside,
    footer {
      background-color: #96aa4f;
      width: 500px;
      height: 50px;
      margin: 20px;
      border-radius: 10px;
      text-align: center;
      line-height: 50px;
    }

    article,
    aside {
      float: left;
      margin-top: 0;
      width: 230px;
      height: 200px;
    }

    section {
      background-color: #c8d2b0;
      margin: 50px auto 0 auto;
      width: 100px;
      border-radius: 10px;
    }

    footer {
      clear: both;
    }
  </style>
</head>

<body>
  <header>header</header>
  <nav>nav</nav>
  <article>
    article
    <section>section</section>
  </article>
  <aside>aside</aside>
  <footer>footer</footer>
</body>

</html>

H5注意事项:

这种语义化标准主要针对搜索引擎的·

这些新标签页面中可以使用多次的·

在IE9中,需要把这些元素转换为块级元素·

例如:

小米的官网的css对H5新增语义化标签转换为块级元素,防止在IE9中不能正常使用

打开小米的官网 https://www.mi.com/

然后点击鼠标右键,选择“查看网页源代码”

即可看到小米官网的css设置

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}

其实,我们移动端更喜欢使用这些HTML标签·

HTML5还增加了很多其他标签,学太多标签,大家也记不住,先记住常用的几个标签,后面我碰到再学

小米的H5新增的标签  details , figcaption , figure , main , summary , menu 可以直接查询我们的 HTML标签