HTML5新增文档结构相关元素示例
导读：收集整理的这篇文章主要介绍了html5教程-HTML5新增文档结构相关元素示例，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HTML5中多了许多...
收集整理的这篇文章主要介绍了html5教程-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; }
最后效果图：
摘自 平行线的凝聚 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; }
最后效果图：
摘自 平行线的凝聚
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5新增文档结构相关元素示例
本文地址： https://pptw.com/jishu/586585.html