1.页面头部区域 - 页眉

很早之间我们习惯用div.header的方式编写，现在我们用HTML5的语义标签进行编写，更加清晰、方便。

  1. <body>
  2.       <!-- 页面的头部区域 header -->
  3.     <header>
  4.         <nav>
  5.             <ul>
  6.                 <li><a href="">首页</a></li>
  7.                 <li><a href="">产品展示</a></li>
  8.                 <li><a href="">线上购物</a></li>
  9.                 <li><a href="">实体分布</a></li>
  10.                 <li><a href="">联系我们</a></li>
  11.             </ul>
  12.         </nav>
  13.     </header>
  14. </body>

Snipaste_2021-03-23_14-41-10.png

2.页面脚步区域 - 页脚

很早之间我们习惯用div.footer的方式编写，现在我们用HTML5的语义标签进行编写，更加清晰、方便。

<!-- 页面脚步区域 footer CopyRight --> 
<footer>
       <div class="content">
          <address>地址：哈尔滨市东直路123号7楼(太平桥百盛商圈)</address>
         <span>联系方式：<a href="">13101507057</a></span>
       </div>
 </footer>

Snipaste_2021-03-23_14-44-25.png

3.导航元素

在HTML中用nav标签设置导航区域

<header>
      <nav>
        <ul>
           <li><a href="">首页</a></li>
           <li><a href="">产品展示</a></li>
           <li><a href="">线上购物</a></li>
           <li><a href="">实体分布</a></li>
           <li><a href="">联系我们</a></li>
        </ul>
          </nav>
</header>

Snipaste_2021-03-23_14-54-42.png

4.主要区域

HTML5中使用main标签表示页面的主要区域，一个页面最好只使用一次main

<body>
  <!-- 主题内容区域 -->
   <main>
      <article>
          <h2>教师介绍</h2>

          <ul>
              <li><a href="">教学团队</a></li>
              <li><a href="">高校支援团队</a></li>
          </ul>
      </article>
   </main>
</body>

5.内容区域

使用article标签来表示页面包含内容的区域，可以表示一个独立空间。

<main>
          <!-- 独立空间 -->
      <article>
          <h2>教师介绍</h2>

          <ul>
              <li><a href="">教学团队</a></li>
              <li><a href="">高校支援团队</a></li>
          </ul>
      </article>
   </main>

6.章节定义

使用section标签定义一个章节或一组相似内容的排列。

<main>
      <article>
        <!-- 区块1 -->
         <section>
            <h2>教学团队成员</h2>

            <ul>
                <li>一段教师</li>
                <li>二段教师</li>
                <li>三段教师</li>
                <li>四段教师</li>
                <li>五段教师</li>
            </ul>
         </section>

        <!-- 区块2 -->
         <section>
            <h2>高校支援团队</h2>

            <ul>
              <li>高校1</li>
              <li>高校2</li>
              <li>高校3</li>
            </ul>
         </section>
      </article>
   </main>

7.侧边栏

使用aside来编写侧边导航栏、展示栏

 <!-- 页面主题 main 区域 -->
    <main></main>

    <!-- 侧边导航栏编写 aside -->
    <aside>
        <ul>
            <li><a href="">测试链接1</a></li>
            <li><a href="">测试链接2</a></li>
            <li><a href="">测试链接3</a></li>
            <li><a href="">测试链接4</a></li>
            <li><a href="">测试链接5</a></li>
        </ul>
    </aside>

8.通用容器div

div是出现较早的容器标签，也是大多数程序员使用的标签，但是我们还是应该更好的使用具有语义性的新容器标签。那么有些不好表达的区域，我们已然可以使用div配合class名的方式进行编写。

<!-- 页眉 -->
<header></header>
<!-- 页脚 -->
<footer></footer>
<!-- 侧边栏 -->
<aside></aside>
<!-- 独立区域 -->
<article></article>
<!-- 章节 -->
<section></section>
<!-- 主题区域 -->
<main></main>
<!-- 导航区域 -->
<nav></nav>

<!-- 这些内容与div除了语义性之外，没有区别 -->
<div></div>