HTML5新增的块级元素：（这些标签都可以当做一个特殊div来操作）
<header>标签定义文档的页眉（介绍信息）。
<section>标签定义文档中的节（section、区段）比如章节、页眉、页脚或文档中的其他部分
<footer>标签定义文档或节的页脚。应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个 <footer>元素。联系信息应该位于 <address>标签中。
<aside>标签定义其所处内容之外的内容。其内容应该与附近的内容相关。可做侧栏。
<nav>标签定义导航链接的部分。
<main>标签规定文档的主要内容。其元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、 版权信息、站点标志或搜索表单。在一个文档中，不能出现一个以上的 <main>元素。<main>元素不能是以下元素的后代：<article>、<aside>、<footer>、<header>或 <nav>。
<article>标签规定独立的自包含内容。元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论。
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
一、Article元素
从名字上，它已经很好的诠释了自己，但是我们仍要看看官方文档上是如何描述它的：
“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。”
从上描述中，我们可以总结出<article>元素专用于结构化文章，特别是我们要发布的，例如博客，页面内容或是论坛帖子。
以下例子给出了如何使用<article>构建一个博客文章。
<article class="post"><header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>
此外，<article>元素还可与section元素结合，需要的时候，可以使用<section>元素将文章分为几个段落，如下例所示。
<article class="post"><header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>This is the Sub-Heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>
<section>
<h3>This is another Sub-Heading</h3>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>
二、Section元素
这是一个最容易产生歧义的元素。它与<div>元素有什么区别？我们一直在用<div>来划分段落，所以除了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档，对<section>元素做了以下描述：
“<section>元素表示了一篇文档或应用中，通用段落 – WHATWG”
从描述中我们可以看出<section>元素的作用就是分段，或多或少类似于<div>。但是它仍有一个特例。在文档中，加入了一段特别声明：
“当一个元素仅用于风格样式或是为了脚本的方便，我们鼓励作者使用<div>。<section>元素适用于，当元素的内容需要明确的列出时。- WHATWG”
基于这一点，我们可以总结以下两点：
尽管section元素在技术上是可以设计样式的，但是当有复杂的样式或脚本时，我们仍建议使用div元素。
类似于<li>元素，section元素是用来列举内容的。
因此在现实例子中，使用<section>元素的原因是结构化的列出博客的内容，代码如下：
div class="blog"><section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section> </div>
这只是个例子，<section>元素也可以用作其他用途。
