标签语义化练习 -

1,代码

<!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>
  </head>
  <body>
    <!--标签语义化-->
    <!--页眉-->
    <header>
      <h1>&lt;header&gt;</h1>
    </header>
    <div class="container">
      <!--侧边栏-->
      <aside>
        <h1>&lt;aside&gt;</h1>
      </aside>
      <!--主体-->
      <main>
        <h1>&lt;main&gt;</h1>
        <div>
          <!--主体部分-->
          <section><h1>&lt;section&gt;</h1></section>
          <section><h1>&lt;section&gt;</h1></section>
        </div>
      </main>
    </div>
    <!--页脚-->
    <footer>
      <h1>&lt;footer&gt;</h1>
    </footer>
  </body>
</html>
2,预览

效果预览