HTML5系列-语义化标签

最新推荐文章于 2024-09-23 23:31:48 发布

前端蜗牛君

最新推荐文章于 2024-09-23 23:31:48 发布

阅读量992

点赞数 2

分类专栏： HTML5 文章标签： html5-语义化标签

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.csdn.net/zqd_java/article/details/102944577

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.内容标题

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

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

2.页眉页脚

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

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>