HTML语义化结构元素

1. 常用标签

序号	标签	名称	描述
1	`<h1>-<h6>`	标题	用来划分或标注内容中的文本段落
2	`<header>`	页眉	一般是由导航, logo 等元素组成
3	`<footer>`	页脚	插入友情链接,联系方式,备案号,版权等信息
4	`<nav>`	导航	导航通常是由一个或多个链接标签`<a>`标签组成
5	`<main>`	主体	展示页面主体内容,建议一个页面,只出现一次
6	`<article>`	文档	本义是文档, 实际上可以充当其它内容的容器
7	`<aside>`	边栏	与主体无关的信息(广告位, 相关推荐, 阅读排行等)
8	`<section>`	区块	文档或主体中的通用小组件
9	`<div>`	块容器	本身无任何语义,通过它的属性来描述用途

2. 参考代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <link rel="stylesheet" href="css/demo1.css" /> -->
  <title>语义化结构元素</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      width: 100vw;
      height: 100vh;
      display: grid;
      grid-template-rows: 60px 1fr 60px;
      gap: 10px;
    }
    header,
    footer {
      height: 80px;
      background-color: lightgreen;
      text-align: center;
    }
    .container {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 10px;
      padding: 10px;
      background-color: lightskyblue;
    }
    .container>aside {
      background-color: lightcyan;
      text-align: center;
    }
    .container>main {
      display: grid;
      grid-template-rows: 1fr 200px;
      background-color: wheat;
      text-align: center;
      padding: 10px;
    }
    .container>main>div {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    main div section {
      background-color: violet;
    }
  </style>
</head>
<body>
  <!-- 页眉 header -->
  <header>
    <h1>&lt;header&gt;</h1>
  </header>
  <!-- 侧边栏 aside -->
  <div class="container">
    <aside>
      <h1>&lt;aside&gt;</h1>
    </aside>
    <!--主体 main -->
    <main>
      <h1>&lt;main&gt;</h1>
      <!--区块 section -->
      <div>
        <section>
          <h1>&lt;section&gt;</h1>
        </section>
        <section>
          <h1>&lt;section&gt;</h1>
        </section>
      </div>
  </div>
  </main>
  <!--页脚  footer -->
  <footer>
    <h1>&lt;footer&gt;</h1>
  </footer>
</body>
</html>