初识HTML5
1. HTML5 doctype
<!DOCTYPE html>
2. HTML5 head 部分
1 <head> 2 <meta charset="utf-8"> 3 <title>Page Title</title> 4 <!-- meta tags --> 5 <meta name="keywords" content=""> 6 <meta name="description" content=""> 7 <!-- stylesheets --> 8 <link rel="stylesheet" type="text/css" href="css/style.css"> 9 <!-- javascript --> 10 <script src="js/jquery-1.11.1.min.js"></script> 11 <!-- conditional comments --> 12 <!--[if IE]> 13 <script src="js/html5.js"></script> 14 <![endif]--> 15 </head>
注：html5.js — 为了支持 IE8。
附：完美解决 IE（IE6/IE7/IE8）不兼容 HTML5 标签的方法
3. HTML5 body 部分
相比早先的 HTML 开发用镶嵌的 div 来完成，在 HTML5 开发中，已经定义了相关的标签帮助完成这个任务，以便有效的组织整个 html 内容。
4. header 和 nav 元素
1 <header id="pageHeader" class="page-header clearfix"> 2 <h1 id="pageLogo" class="page-logo fl"> 3 <a href="#"><img src="images/page-logo.jpg" alt="logo name"></a> 4 </h1> 5 <nav id="pageMainNav" class="page-main-nav fl"> 6 <ul class="clearfix"> 7 <li class="active"><a href="#">网站首页</a></li> 8 <li><a href="#">关于我们</a></li> 9 <li><a href="#">律所动态</a></li> 10 <li><a href="#">业务领域</a></li> 11 <li><a href="#">专业团队</a></li> 12 <li><a href="#">经典案例</a></li> 13 <li><a href="#">诚聘英才</a></li> 14 <li><a href="#">联系我们</a></li> 15 </ul> 16 </nav> 17 </header>
header 可以用来定义页面头部的内容；而 nav 可以定义导航内容，nav 在一个页面中可以多次使用，如：侧栏也可以有导航。
5. HTML5 的 article、section 和 hgroup 元素
1 <article id="pageMainContent" class="page-main-content"> 2 <section class="content-item"> 3 <hgroup class="title-group"> 4 <h1 class="main-title">HTML5代码样例</h1> 5 <h2 class="sub-title">An HTML5 Template</h2> 6 </hgroup> 7 <p class="content-des">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.</p> 8 <h2 class="sub-title">A demonstration of list items</h2> 9 <ul> 10 <li>Lorem ipsum dolor sit amet</li> 11 <li>Lorem ipsum dolor sit amet</li> 12 <li>Lorem ipsum dolor sit amet</li> 13 <li>Lorem ipsum dolor sit amet</li> 14 <li>Lorem ipsum dolor sit amet</li> 15 </ul> 16 <ol> 17 <li>Lorem ipsum dolor sit amet</li> 18 <li>Lorem ipsum dolor sit amet</li> 19 <li>Lorem ipsum dolor sit amet</li> 20 <li>Lorem ipsum dolor sit amet</li> 21 <li>Lorem ipsum dolor sit amet</li> 22 </ol> 23 </section> 24 <aside class="side-content"> 25 <h2 class="sub-title">Related Content</h2> 26 <p class="content-des">Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi ultricies convallis. Curabitur a nunc nisi, ac ornare nisi. Ut semper placerat accumsan. Cras eu nibh lorem. Sed sit amet ligula vitae orci molestie sollicitudin sit amet at odio. Mauris non elit ac ipsum facilisis eleifend. Maecenas eu velit sit amet neque iaculis dapibus. Integer mollis est id erat dignissim blandit. Quisque malesuada mattis sollicitudin. Pellentesque volutpat pellentesque luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus augue ut sem convallis ullamcorper. Donec vitae magna nec lacus varius pellentesque vel nec diam. Morbi sagittis, magna sit amet sollicitudin ultricies, neque orci fermentum ipsum, non cursus lectus velit at ante. Donec nec neque in sem suscipit faucibus. Aliquam nisi turpis, volutpat quis suscipit in, varius vitae nunc.</p> 27 </aside> 28 </article>
article 定义一个主要页面内容；section 用来定义内容的块，如：评论，文章内容；hgroup 用来组织相关的一些标题元素。
6. HTML5 的 aside 元素
aside 元素用来定义侧栏内容，如：在浏览的当前文章页面，右边的文章列表就处于 aside 元素内。
7. HTML5 的 footer 元素
footer 元素定义了页面底部内容，可以放在页面底部，也可以放在 section 后面，具体取决于想要实现的目的。
8. 总结
上述为 HTML5 的主要元素，先大概了解 HTML5 的使用。
