HTML5新特性-结构标签

1.<article>标签：定义独立的内容。

2.<aside>标签：定义所处内容之外的内容。常用于做文章的侧边栏。

3.<figure>标签：定义独立的流内容（图像、图表、照片、代码等等）。常用来做一组媒体对象及其文字描述的容器。

4.<figcaption>标签：定义文档中插图的图像，带有一个标题，与<figure>结合使用，用作figure的标题：

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

5.<header>标签：定义页眉内容。

6.<footer>标签：定义页脚。

7.<nav>标签：定义导航栏。

8.<section>标签：定义文档中的区段。

学习总结：

（1.）<section>标签，<article>标签与<div>标签的区别：

1.<div>无语义。

2.<section>出席的场景一般是有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。<section>不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该去找我的朋友 div 。一般来说，当元素内容明确地出现在文档大纲中时，我是很好的人选。通常会带有标题，<section><h1></h1><p></p></section>。我会用于对网站或者应用程序中页面上的内容进行分块。

3. <article>标签是特殊的<section>标签，比section具有更明确的语义，是一个独立的、完整的相关内容块的代表。一般来说， <article>标签会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，<article>本身就是独立的、完整的，代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。

综合来说，section元素的作用，是对页面上的内容分块处理，例如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。

例如：

  <article>
      <header><h1>计算机各类语言介绍</h1></header>
      <p>本文列举了部分计算机语言的一些介绍</p>
      <section>
        <h2>JavaScript</h2>
        <p>js是一门……</p>
      </section>
      <section>
        <h2>HTML</h2>
        <p>HTML是一门……</p>
      </section>
      <footer>版权归微也所有</footer>
    </article>

很多人会说，要丢弃div,用html5的section，article，都是划分区域，不是说推荐用语义化标签么，来布局网页。咳咳咳，之前我就有这么想过，可是这就好像将ul代替table似的，也有说，尽量少用table，但是该用table还是要用的，放着方便快捷的table不用，我跑去用ul来打造表格，这似乎并不明智。该用div还是用div，进行网页布局，得有个规范，至少自己有个规范，然后让其他人也能看得懂。其实三者说实在，也并没有什么差别，个人觉得，只是section，article更语义化了。