📣 HTML语义化的案例分析【实践篇】｜青训营HTML语义化的案例分析：这里主要分析5个网站的HTML结构，对比非语

HTML语义化的案例分析：这里主要分析5个网站的HTML结构，对比非语义化标签的差异。

采用的五个网站分别为：掘金、知乎、懂车帝、唯品会、哔哩哔哩。下面依次分析这五个网站的HTML结构：

🌸 分析掘金的HTML结构

下面先对掘金的首页进行简单的结构分析

接着去查看了一些源代码，查看其HTML结构如下：

 <body>
    <div class="root">
      <!-- 头部区 -->
      <header>
        <div class="container">
          <!-- logo图 -->
          <img src="" alt="" />
          <!-- 头部导航 -->
          <nav>
            <ul>
              <li>
                <div>首页</div>
                <ul>
                  首页的下拉列表内容
                </ul>
              </li>
              <ul>
                <li>搜索框和创作者中心</li>
                <li>通知中心</li>
                <li>用户头像</li>
              </ul>
            </ul>
          </nav>
        </div>
      </header>
      <!-- 内容区 -->
      <main>
        <!-- 左侧边导航 -->
        <nav>左侧边导航</nav>
        <!-- 中间内容 -->
        <div>
          <div>
            <div>综合文章榜</div>
          </div>
          <div>
            <header>
              <nav>
                <ul>
                  <li>推荐</li>
                  <li>最新</li>
                </ul>
              </nav>
            </header>
            <div>内容区</div>
          </div>
        </div>
        <!-- 右侧边栏 -->
        <aside>右侧边栏</aside>
      </main>
    </div>
  </body>

分析了掘金的HTML结构后，可以看出其采用了H5中的很多语义化标签，比如header、nav、aside、main等。

🌸 分析知乎的HTML结构

分析知乎的网页结构如下图所示：

然后查看知乎的源代码，分析HTML如下：

<body>
 <div class="root">
  <!-- 头部区 -->
  <header>头部区</header>
  <!-- 内容区 -->
  <main>
    <div>中间内容</div>
    <div>
      <div>侧边栏内容</div>
      <footer>侧边栏底部</footer>
    </div>
  </main>
 </div> 
</body>

从上面的代码可以看出知乎也采用了H5中的一些语义化标签，例如header、main、footer等.

🌸 分析懂车帝的HTML结构

<body>
 <div>
  <!-- 头部区 -->
  <header>头部区</header>
  <!-- 内容区 -->
  <div>
    <div>左侧边栏内容</div>
    <!-- 内容区的上半部分 -->
    <div>
      <div></div>
      <section></section>
    </div>
    <!-- 内容区的下半部分 -->
    <div></div>
  </div>
</body>

从上面的代码可以看出懂车帝采用了H5中的一些语义化标签，例如header、section、footer等，footer在代码中未列出来。

🌸 分析唯品会的HTML结构

<body>
    <!-- 头部区 -->
    <header>
      <nav>头部里上面的导航</nav>
      <nav>头部里下面的导航</nav>
    </header>
    <!-- 内容区 -->
    <div class="wrapper">
      <div></div>
      <div></div>
      <div></div>
      <!-- 右栏 -->
      <div>
        <i></i>
      </div>
    </div>
    <!-- 底部 -->
    <footer></footer>
</body>

🌸 分析哔哩哔哩的HTML结构

<body>
    <div id="i_cecream">
      <!-- 头部区 -->
      <div class="bili-header">
        <div class="bili-header__bar">
          <ul>
            左边导航
          </ul>
          <div class="center-search-container">中间搜索区</div>
          <ul>
            左边导航
          </ul>
        </div>
        <div class="bili-header__banner">头部背景图</div>
        <div class="bili-header__channel">头部的下面频道区</div>
      </div>
      <!-- 主要内容区 -->
      <main>
        <div></div>
        <div></div>
        <div></div>
      </main>
      <footer></footer>
    </div>
</body>

根据上面对五个网站的分析，我们能够发现现在网站开发越来越倾向于标签语义化。相对于无语义化的标签，例如div,span等，语义化标签的可读性更强，更方便代码的管理和维护。

在H5中引入了很多新的语义化标签，下面对其进行列举：

🎗布局标签
- header --头部
- nav--导航栏
- artical--文章
- section--某一部分
- aside--侧边栏
- footer--底部
- main--主体内容
🎗状态标签
- progress --可用于制作当前进度条效果
- meter --可用于制作手机电量效果
🎗文本标签
- mark -- 用于在结果中高亮你所搜索的关键字
- ruby+rt --用于给文本注音

🎗列表标签
- datalist：点击会显示提示关键字
- detail+legend
🎗 音频标签audio
🎗 视频标签video

以上列举了h5中新的语义化标签以及其实现的效果。

结束，感谢观看和点评！

📣 HTML语义化的案例分析【实践篇】｜ 青训营

📣 HTML语义化的案例分析【实践篇】｜青训营