HTML5新增文档结构相关元素示例
HTML5中多了许多与文档结构相关的元素，以下是示例 (注释都在代码中了）：HTML5页面：
1. <!-- 以下这一行定义了这个html页面是html 5 -->
2. <!DOCTYPE html>
3.
4. <link rel="stylesheet" href="css/common.css" type="text/css">
5. <body>
6. <h1>HTML5 文档结构DEMO</h1>
7.
8. <!-- 这里用nav定义了全局页面导航 -->
9. <nav>
10. <ul>
11. <li><a href="/">主页</a></li>
12. <li><a href="/myaccount">我的账号</a></li>
13. </ul>
14. </nav>
15.
16. <!-- article元素代表了文档，页面或者应用程序中独立的完整的并且可以被外部引用的内容 -->
17. <article>
18.
19. <!-- 这个header元素具有引导和导航作用，网页中可以拥有任意数目的header-->
20. <header>
21.
22. <!-- 如果一个区块有多个标题，那么hgroup则可以为这些标题/子标题分组 -->
23. <hgroup>
24. <!-- 一般标题都应该放在header元素中 -->
25. <h3>苹果</h3>
26. <h4>好吃的苹果</h4>
27. </hgroup>
28. <p>发表日期：
29. <time pubdate datetime="2012/5/5">2012/5/5</time>
30. </p>
31.
32. <!-- 这里的nav定义了页内导航，它的超链接指向了页面内某块，用id选择器语法标识 -->
33. <nav>
34. <ul>
35. <li><a href="#apple">苹果介绍</a></li>
36. </ul>
37. </nav>
38. </header>
39.
40. <!-- 这块是这个article的正文部分 -->
41. <p>
42. <b>苹果</b>，苹果1，苹果2，苹果3，苹果4
43. </p>
44.
45.
46. <!-- 这里的section元素表明对页面的内容进行分块，它不是article(强调独立)，它只是article的内容块（强调分块），它也有标题和内容 -->
47. <!-- section元素可以加id,这样可以被引用，比如超链接的指向 -->
48. <section id="apple">
49. <!-- section也有标题而且推荐使用标题 -->
50. <h3>评论</h3>
51. <!-- 这里演示了article的嵌套 ，所以下面部分的article表示局部内容，而不是整体内容，它作为section的内容部分-->
52. <article>
53. <header>
54. <h4>发布者：charles.wang</h4>
55. <p>
56. <!-- time元素是HTML5中新增的元素，表示24小时中的某个时刻或者时期，允许带时差 -->
57. <!-- datetime属性不会显示在网页中，但是会被浏览器读到，日期和时间用T分隔，时间可以带时差(+ -号） -->
58. <!-- pubdate属性代表了这article的发布时间，这个属性是可选的 -->
59. <time pubdate datetime="2012-5-5T8:00-09:00">
60. 1小时前
61. </time>
62. </p>
63. </header>
64. <p>
65. 我喜欢苹果，因为很好吃
66. </p>
67.
68. </article>
69.
70. <article>
71. <header>
72. <h4>发布者：charles.wang</h4>
73. <p>
74. <time pubdate datetime="2012-5-5T8:00-09:00">
75. 1小时前
76. </time>
77. </p>
78. </header>
79. <p>
80. 我喜欢苹果那种红彤彤的感觉
81. </p>
82.
83. </article>
84.
85. </section>
86. </article>
87.
88. <!-- footer表示为上层内容区块或者根区块做一个页脚，footer个数不受限制，article,section,全局都可以设置footer -->
89. <footer>
90. <ul>
91. <li>版权信息:Charles</li>
92. <li>站点地图</li>
93. <li>联系方式</li>
94.
95. <!-- address用于在文档中呈现联系信息 -->
96. <address>
97. <a title="文章作者：Charles" href="http://supercharles888.blog.51cto.com">Charles</a>
98. 发表于<time datetime="2012/5/5">2012年5 月5日</time>
99. </address>
100. </ul>
101. </footer>
102.
103. </body>
CSS页面：
1. /**********************************************************************************
2. * @CopyRight: Charles Wang (Tech Lead)
3. * mailto: charles_wang888@126.com
4. * This file is only for studying purpose instead of commercial purpose
5. *
6. **********************************************************************************/
7. @CHARSET "UTF-8";
8.
9. /*
10. * 追加block声明，让浏览器页面当使用这些HTML5新增元素时候都使用块方式显示
11. */
12. article,aside,dialog,figure,footer,header,legend,nav,section {display:block;}
13.
14. /*
15. * 其他样式，也就是为每个元素单独定义样式
16. */
17. nav{float:left; width:20%;}
18. article{float:right; width:79%;}
19. header{display:block; color:yellow; text-align:left;}
20. article header{color:blue; text-align:left;}
最后效果图：
补充：web前端 , HTML 5 ,
