一个html5页面结构和代码： 

  1. <!DOCTYPE html> 

ps:此标签前不能有空格。

  1. <!DOCTYPE html> 
  2. <meta charset="UTF-8"> 

 ps: utf-8是最佳编码方式。

<div>标签成功地将页面分成区块。但是仅仅从这个标签并不能看出每个区块的含义从而在页面中加以很好的识别。html5提供了几个新的结构标签并赋予他们各自的含义。

  1. 1.<section></section>这个标签代表了任意的文档逻辑区块。比如：产品描述、文章章节、讨论等等。它的功能类似<div>，但是它在划分文档时更加具有描述性和内容敏感度。
    1. <section id="flower"> 
    2.     <h2>beautiful flowers</h2> 
    3.     <p>宜远观，而不可亵玩焉；静养而多娇，多日不见而亭亭。</p> 
    4. </section> 
    5. <section id="woman"> 
    6.     <h2>beautiful woman</h2> 
    7.     <p>宜远观，而不可亵玩焉；静养而多娇，多日不见而亭亭。与珠宝而见其志，陷困苦而知其情。</p> 
    8. </section> 

    ps: <section>和<div>的差别不太大，前者更适宜用在有逻辑划分的地方。

  2. 2. <article></article>

    这个标签的目的不是作为划分文档区块的另一种方法，而是用来把一段文档识别和区分于其它文档。因为本标签是独立的，所以可以包含它自己的<section>等。

    1. <article> 
    2.     <section id="flower">  
    3.         <h2>beautiful flowers</h2>  
    4.         <p>宜远观，而不可亵玩焉；静养而多娇，多日不见而亭亭。</p>  
    5.     </section>  
    6.     <section id="woman">  
    7.         <h2>beautiful woman</h2>  
    8.         <p>宜远观，而不可亵玩焉；静养而多娇，多日不见而亭亭。与珠宝而见其志，陷困苦而知其情。</p>  
    9.     </section> 
    10. </article>  

          ps: 把本标签作为独立的文档，而不是一个更大文档的一部分。

  1. 3. <aside></aside>

    顾名思义，本标签用在侧面，用作讨论栏，评论栏和广告等。可以放在相应的<section>里面。

  2. 4. <header></header>

    本标签作为一个文档区块的头部，可以包含<h1>到<h6>或者logo图标。

    1. <header> 
    2.     <h2>How to be a good husband? </h2> 
    3. </header> 
    4. <p>会洗衣做饭修理电器通下水道洗抽油烟机......</p> 
    5. <p>会普通话英文法语西班牙语欧洲n国游不用愁......</p> 
    6. <p>貌比潘安壮如李小龙会双节棍咏春......</p> 

    ps: 不要把本标签放在<footer>和<address>或者其它<header>里面。

  3. 5. <hgroup></hgroup>

    当想把几个headings放在一起组成主标题和子标题时，可以考虑用本标签包含这些headings。 
    1. <hgroup>  
    2.     <h1>厨房清洗秘籍</h1>  
    3.     <h2>专家建议</h2>  
    4. </hgroup> 

  1.  6. <footer></footer>

    版权标识和其它版权文字信息放在本标签内。

    ps: 不要把本标签放在<header>或者另一个<footer>之内。

  2. 7. <nav></nav>
    1. <nav> 
    2.     <a href="#">首页</a>  
    3.     <a href="#">关于</a>          
    4.     <a href="#">联系</a> 
    5. </nav> 
  3. 8.  <figure></figure> 和 <figcaption></figcaption>
    1. <figure> 
    2.     <img src="cat.jpg">
    3. <figcaption>this is a cat</figcaption>
    4. </figure>