html新增结构元素解析

本文主要帮助理解HTML5新增的article、section、aside、nav、time标签的使用场景。

• section表示页面上的区域，主要的目的是给文章分段等，section里必须包含标题。

  <section>
  <h1>标题</h1>
  <article>内容</article>
  </section>

• article表示页面上独立的区域，和section相比，article更注重自身的独立性。

  <article>
  <section>
      <h1>标题</h1>
      <p>内容</p>
  </section>
  </article>

• aside表示页面的附加内容，可以是文章的含义，链接等

<article>
    <section>
        <h1>标题</h1>
         <p>内容</p>
    </section>
</article> 
<aside>
    <h1>评论</h1>
    <section>
        <h2>张<h2>
        <p>好听</p>
    </section>
</aside>    

• nav表示页面的导航，主要包括页面的主导航，侧边栏导航，页内导航和分页导航。

  <nav>
  <ul>
      <li><a href="#">111</li>
      <li><a href="#">222</li>
      <li><a href="#">333</li>
  </ul>
  </nav>

• time表示一个时间戳，表示一个标准时间。

  <div datatime="2017-01-09T13:02">2017-01-09</div>
  <div datatime="2017-01-10Z">2017-01-10</div>
  <div datatime="2017-01-11+9:00">2017-01-11</div>