HTML5系列-语义化标签

1.内容标题

标题使用 h1 ~ h6 来定义，用于突出显示文档内容。

• 从 h1到h6对搜索引擎来说权重会越来越小
• 页面中最好只有一个h1标签
• 标题最好不要嵌套如 h1内部包含 h2

2.页眉页脚

header

header标签用于定义文档的页眉，下图中的红色区域都可以使用header标签构建。

footer

footer 标签定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

3.导航元素

在HTML中使用nav设置导航链接。

4.主要区域

HTML5中使用 main 标签表示页面主要区域，一个页面中main元素最好只出现一次。

5.内容区域

使用 article 标签规定独立的自包含内容区域。不要被单词的表面意义所局限，article 标签表示一个独立的内容容器。

6.区块定义

使用 section 定义一个区块，一般是一组相似内容的排列组合。

7.附加区域

使用 aside 用于设置与主要区域无关的内容，比如侧面栏的广告等。

8.通用容器

div 通用容器标签是较早出现的，也是被大多数程序员使用最多的容器。不过我们应该更倾向于使用有语义的标签如article/section/aside/nav 等。

有些区域这些有语义的容器不好表达，这时可以采用div容器，比如轮播图效果中的内容。

下面是上面示例的代码，代码中包含了CSS相关，如有疑问可以查看我发布的CSS相关文章。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>语义化标签</title>
    <style>
      * {
        margin: 0;
        padding: 10px;
      }
      body {
        height: 90vh;
        display: flex;
        flex-direction: column;
      }
      header {
        background: #3498db;
      }
      main {
        background: #ecf0f1;
        flex: 1;
        display: flex;
        position: relative;
        padding-top: 30px;
      }
      h1 {
        font-size: 1rem;
        position: absolute;
        top: 0;
      }
      h2 {
        font-size: 1rem;
        position: absolute;
        top: 0;
      }
      nav {
        background: #1abc9c;
        flex: 1 1;
        display: flex;
        flex-direction: column;
      }
      nav ul {
        background: #7ed6df;
        list-style: none;
        flex: 1;
      }
      nav ul li {
        background: #e056fd;
        text-decoration: none;
        border-bottom: solid 1px #ddd;
      }
      article {
        background: #bdc3c7;
        flex: 3 1;
        display: flex;
        position: relative;
        padding-top: 30px;
      }
      section {
        background: #e056fd;
        height: 10vw;
        width: 10vw;
        padding: 10px;
        background-clip: content-box;
      }
      aside {
        background: #7ba8d6;
        flex: 1 1;
      }
      footer {
        background: #8e44ad;
      }
    </style>
  </head>
  <body>
    <header>header 页眉</header>
    <main>
      <h1>main 主内容区-一个页面中main元素最好只出现一次</h1>
      <nav>
        nav 导航区域
        <ul>
          <li>html</li>
          <li>css</li>
          <li>js</li>
          <li>vscode</li>
          <li>sublime text</li>
        </ul>
      </nav>
      <article>
        <h2>article 内容区</h2>
        <section>section 模块1</section>
        <section>section 模块2</section>
        <section>section 模块3</section>
      </article>
      <aside>aside 用于设置与主要区域无关的内容，比如侧面栏的广告等</aside>
    </main>
    <footer>footer 页脚</footer>
  </body>
</html>