HTML5的新特性--结构元素

1、section元素

作用：按主题对内容进行分组，如文章正文内容的章节，或者网站上相同页面的区域，如介绍、产品的展示和联系表单。

例子：

1 <section>
2     <!--博客文章-根据需要可重复出现多次-->
3 </section>

2、header元素

作用：定义一个特定的网站区域，其中可以包含标题、logo、导航以及其他与页眉相关的内容。

例子：

 1 <header>
 2   <!-- 网站名称和导航 -->
 3   <h1>My amazing blog</h1>
 4   <nav>
 5  　　 <ul>
 6         <li><a href="/">Home</a></li>
 7         <li><a href="/archive/">Archive</a></li>
 8         <li><a href="/about/">About</a></li>
 9         <li><a href="/contact/">Contact</a></li>
10      </ul>
11   </nav>
12 </header>

 3、hgroup元素

作用：将标题进行分组的元素，可以用于包含多个标题元素，HTML4普通的方法是用div

例子：

<hgroup>
    <h1><a href="/blog/first-post-link/">Main heading of the first blog post</a></h1>
    <h2>Sub-heading of the first blog post</h2>
</hgroup>

4、footer元素

作用：版权声明和网站制作作者信息通常位于网页的底部，footer元素就是专门用来显示这些内容的；还可以包含一些相关的链接，这就意味着很适合在section和article中使用。与header元素类似，可以在一个页面中使用多个footer。

例子：

<footer>
    <!-- 版权和其它东西  -->
    <p>My amazing blog &copy; 2010</p>
</footer>

5、nav元素

作用：常用用途是包含网站的主导航菜单，它通常位于header元素中，旁边是logo或header元素中的其它常见内容

例子：

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/archive/">Archive</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</nav>

6、article元素

作用：任何独立成文且可以以其它格式重用，如博客文章

例子：

<article>
     <header>
        <hgroup>
             <h1><a href="/blog/first-post-link/">Main heading of the first blog post</a></h1>
             <h2>Sub-heading of the first blog post</h2>
        </hgroup>
              <p>Posted on the <time pubdate datetime="2010-10-30T13:08">30 October 2010 at 1:08 PM</time></p>
      </header>
      <p>Summary of the first blog post.</p>
 </article>
            
 <article> 
       <header>
           <hgroup>
                <h1><a href="/blog/second-post-link/">Main heading of the second blog post</a></h1>
                <h2>Sub-heading of the second blog post</h2>
           </hgroup>
                 <p>Posted on the <time pubdate datetime="2010-10-26T09:36">26 October 2010 at 9:36 AM</time></p>
       </header>
       <p>Summary of the second blog post.</p>
 </article>

7、aside元素

作用：包含内容周围的相关内容。它的典型应用是引文和旁注

例子：

<section>
    <!--主内容-->
    <aside>
    　　<h2>Subscribe to the RSS feed</h2>
    　　<p>Make sure you don't miss a blog post by <a href="/rss">subscribing to the RSS feed</a>.</p>
    </aside>        
</section>