第85天：HTML5语义化标签

一，语义标签

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

传统的做法我们或许通过增加类名如类= “标题”，类= “页脚”，使HTML页面具有语义性，但是不具有通用性。

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

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

传统网页布局：

    <！ - 头部 - >
<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>表示导航

<头>表示页眉

<页脚>表示页脚

<节>表示区块

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

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

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

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

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

<时间>表示日期

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

尽量避免全局使用页眉，页脚，除了等语义标签。