第85天：HTML5语义化标签

一、语义标签

语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

此学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。

传统网页布局：

    <!-- 头部 -->
<div class="header">
    <ul class="nav"></ul>
</div>
      <!-- 主体部分 -->
      <div class="main">
         <!-- 文章 -->
      <div class="article"></div>
      <!-- 侧边栏 -->
      <div class="aside"></div>
      </div>
       <!-- 底部 -->
      <div class="footer"></div>

H5 经典网页布局:

<!-- 头部 -->
     <header>
       <ul class="nav"></ul>
   </header>
<!-- 主体部分 -->
<div class="main">
   <!-- 文章 -->
   <article></article>
   <!-- 侧边栏 -->
   <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

二、常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 做个比较

<mark> 表示标记 (带用“UI”，不怎么用)

<progress> 表示进度 (带用“UI”，不怎么用)

<time> 表示日期

本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。不要好奇，它只是一个标签！

尽量避免全局使用header、footer、aside等语义标签。