HTML5新增7个结构元素(详解)

●header

header 元素表示页面中的一个内容区块或者整个页面的标题，通常放在页面的头部。
通常用来显示页面中的标题、logo图片、搜索文本框或者其他相关的内容

 <div class="mian-container">
         <header>
             <div class="logo">
                 <a href="#"><img src="images/logo.jpg" alt=""></a>
             </div>
         </header>
     </div>

●article

article 元素中的内容独立于文档的其余部分，表示页面中的一块与上下文不相关的独立内容。
可能的 article 实例：
1.论坛帖子
2.报纸文章
3.博客条目
4.用户评论

●section

section 元素用于将页面上的内容划分为独立的区域，定义文档中的节，例如章节、页眉、页脚或者文档的其他部分。
article元素通常与section元素一起使用。
article 与 section的区别，section元素强调分段或块，而article元素强调独立性。
如果一块内容相对来说比较独立，完整时，使用article；如果想将一块内容划分为几段，就应该使用section。

    <article>
        <header>
            <h1>第一章</h1>
        </header>
        <section>
            <header><h1>第一节</h1></header>
            <p>第一节的内容</p>
            <footer>第一节的其他信息</footer>
        </section>
     </article>
     

●nav

nav元素的内容可能是导航链接列表，标记为一个有序列表或者一个无序列表 .
使用场合：
1：传统导航条
2：侧边栏导航
3: 页内导航
4：翻页导航

<div class="wrapper">
    <nav>
        <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">关于我们</a></li>
         <li><a href="#">技术支持</a></li>
         <li><a href="#">文章列表</a></li>
         <li><a href="#">最新动态</a></li>
         <li><a href="#">联系我们</a></li>
        </ul>
     </nav>
  </div>

css部分

 <style>
        *{
            padding:0;
            margin: 0;
            list-style: none;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .wrapper{
            width: 100%;
        }
        nav{
            width: 600px;
            margin: 0 auto;
            height: 40px;
            background-color: #ccc;
        }
        nav ul li{
            float: left;
            line-height: 40px;
            text-align: center;
            padding: 0 15px;
            margin:0  5px;
        }
        nav li a{
            text-decoration: none;
            color: #fff;
        }
        nav ul li:hover{
            background-color: pink;
        }
    </style>

●footer

footer元素用来定义父级区块（section），或根区块（document）的脚注信息，使用该元素可以显示作者、文档的创建日期、
相关阅读链接以及版权信息。

 <div class="wrapper">
        <footer>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">技术支持</a></li>
                <li><a href="#">文章列表</a></li>
                <li><a href="#">最新动态</a></li>
                <li><a href="#">联系我们</a></li>
           </ul>
           <p class="copyRight">Copyright Import 2017.All Right Reserved</p>
           <a href="#" class="ht5">HTML5</a><a href="#" class="c3">CSS3</a>
           <p class="design">DESIGNS BY: <a href="#">TEMPLATE WORLD</a></p>
        </footer>
     </div>

●address

address元素为文档或section定义联系信息，这些联系信息可以是E-mail地址、邮政地址或者其他形式。
address元素并不适合所有需要地址信息的情况，例如，对于客户联系信息就不需要该元素.
内容呈现为斜体

 <address>
        <a href="#">I love Myself</a>
    </address>

●hgruop

hgroup元素用于对整页面或section区段的标题进行组合，它是将标题及其子标题进行分组的元素。
注意：
1：如果只有一个标题元素（h1~h6中的一个）,不建议使用hgroup元素
2：当出现一个或者一个以上的标题与元素时，建议使用hgroup元素作为标题容器
3：当一个标题有副标题、其他section或者article的元数据时，建议使用hgroup元素和元数据放到一个单独的header元素容器中。

<hgroup>
        <h1 class="blogtitle">
            <a href="#">Love 微微风的博客</a>
        </h1>
        <h3>记录我生活的点点滴滴...</h3>
    </hgroup>