HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

一般来说，人们在书写包括HTML在内的文档时，习惯上按照类似于“章——节——小节”这样的层次结构来进行。

在HTML4中的描述方式：

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <h1>第一章 小强的HTML5移动开发之路</h1>
  6. <h2>1.1 HTML5概述</h2>
  7. <h3>1.1.1 HTML5是什么？</h3>
  8. <h3>1.1.2 HTML5和HTML4的区别</h3>
  9. <h2>1.2 HTML5快速入门</h2>
  10. <h3>1.2.1 HTML与XHTML</h3>
  11. </body>
  12. </html>

上面代码，勉强可以看出文档的主体结构。但是在比较复杂的页面中，这种结构很难看出来，所以就出现了如下写法：

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <div>
  6. <h1>第一章 小强的HTML5移动开发之路</h1>
  7. <div>
  8. <h2>1.1 HTML5概述</h2>
  9. <div>
  10. <h3>1.1.1 HTML5是什么？</h3>
  11. </div>
  12. <div>
  13. <h3>1.1.2 HTML5和HTML4的区别</h3>
  14. </div>
  15. </div>
  16. <div>
  17. <h2>1.2 HTML5快速入门</h2>
  18. <div>
  19. <h3>1.2.1 HTML与XHTML</h3>
  20. </div>
  21. </div>
  22. <div>
  23. </body>
  24. </html>

在HTML5中，为了使文档结构更加清晰，更容易理解，增加了很多具有语义性的专门用来划分文档结构的元素。

section元素：section元素是对页面文档结构进行划分的最基本也是最主要的结构元素，主要用来对网站 或应用程序的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题构成。

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <section>
  6. <h1>第一章 小强的HTML5移动开发之路</h1>
  7. <section>
  8. <h2>1.1 HTML5概述</h2>
  9. <section>
  10. <h3>1.1.1 HTML5是什么？</h3>
  11. </section>
  12. <section>
  13. <h3>1.1.2 HTML5和HTML4的区别</h3>
  14. </section>
  15. </section>
  16. <section>
  17. <h2>1.2 HTML5快速入门</h2>
  18. <section>
  19. <h3>1.2.1 HTML与XHTML</h3>
  20. </section>
  21. </section>
  22. <section>
  23. </body>
  24. </html>

使用section元素的时候要注意：

1、不要将section元素与div元素混淆使用。当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div.

2、通常不建议为哪些没有标题的内容使用section,可以使用HTML5轮廓检测工具来检测（http://gsnedders.Html5.org/outliner/）

article元素：article元素代表文档、页面或应用程序中的所有“正文”部分，它描述的内容应该是独立的、完整的、可以独自被外部引用的，可以使一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评价、一个独立的插件，或任何独立于上下文中其他部分的内容。

在一个section元素或者article元素中，应该只有一个标题，如果有两个标题，则第二个标题会被隐式放入一个新的section元素之内，如下面的代码所示，h2元素之后的内容会被隐式放入一个新的section元素内。

  1. <article>
  2. <h1>标题</h1>
  3. <!--隐式创建出一个新的section元素-->
  4. <h2>副标题</h2>
  5. </article>

nav元素：nav元素是一个可以作为页面导航的链接组。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置改组链接元素。

aside元素：aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他别于主要内容的部分。

下面来实现一个博客主页例子：

界面布局如下：

  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>阳光小强的博客</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta content="" name="keywords">
  6. <meta content="" name="description">
  7. <link href="main.css" type="text/css" rel="stylesheet"/>
  8. <div id="blog">
  9. <header id="bloghead">
  10. <div id="blogTitle">
  11. <h1 id="blogname">阳光小强的博客</h1>
  12. <div id="bloglink">
  13. http://blog.csdn.net/dawanganban
  14. </div>
  15. </div>
  16. <nav id="blognav">
  17. <ul id="blognavInfo">
  18. <li>
  19. <a href="http://blog.csdn.net/dawanganban" id="on">主页</a>
  20. </li>
  21. <li>
  22. <a href="#">博文目录</a>
  23. </li>
  24. </ul>
  25. </nav>
  26. </header>
  27. <div id="blogbody">
  28. <div id="column_1">
  29. <aside>
  30. <section>
  31. <header>
  32. <h1>个人资料</h1>
  33. </header>
  34. <div id="connBody1">
  35. <div>
  36. <figure>
  37. <img src="image\head.jpg">
  38. <figcaption>阳光小强的博客</figcaption>
  39. </figure>
  40. </div>
  41. <div id="divSpecial">
  42. <p>本人目前从事移动互联网开发，希望结识更多朋友</p>
  43. <p>推荐专栏：</p>
  44. <p>
  45. <a target="_blank"
  46. href="http://blog.csdn.net/column/details/dawanganban-html5.html">
  47. 小强的HTML5移动开发之路
  48. </a>
  49. </p>
  50. <p>联系方式：739299362</p>
  51. </div>
  52. </div>
  53. <div id="connFoot1"></div>
  54. </section>
  55. <section id="conn2">
  56. <header id="connHead2">
  57. <h1>分类</h1>
  58. <span id="edit1">
  59. <a href="javascript:;"
  60. onclick="window.CateDialog.show();return false;">
  61. [<cite>管理</cite>]
  62. </a>
  63. </span>
  64. </header>
  65. <div id="connBody2">
  66. <nav id="classList">
  67. <ul>
  68. <li id="dot1">
  69. <a target="_blank" href="#">全部博文</a>
  70. <em>(62)</em>
  71. </li>
  72. <li id="dot2">
  73. <a href="#" target="_blank">HTML5</a>
  74. <em>(40)</em>
  75. </li>
  76. <li id="dot3">
  77. <a href="#" target="_blank">HTML5</a>
  78. <em>(40)</em>
  79. </li>
  80. <li id="dot4">
  81. <a href="#" target="_blank">HTML5</a>
  82. <em>(40)</em>
  83. </li>
  84. <li id="dot5">
  85. <a href="#" target="_blank">HTML5</a>
  86. <em>(40)</em>
  87. </li>
  88. </ul>
  89. </nav>
  90. </div>
  91. <div id="connFoot2"></div>
  92. </section>
  93. <section id="conn3">
  94. <header id="connHead3">
  95. <h1>评论</h1>
  96. </header>
  97. <div id="connBody3">
  98. <nav id="zComments">
  99. <ul id="zCommentsUl">
  100. <li id="commentsCell_linedot1">
  101. <div id="commentsH1">
  102. <span id="commentsName_txtc_dot1">
  103. <a href="#" target="_blank" title="随风">
  104. 随风
  105. </a>
  106. </span>
  107. <time datetime="2014-03-31T16:59">03-31 16:59</time>
  108. </div>
  109. <div id="commentsContants1">
  110. <div id="commentsContantsTxt1">
  111. <a href="#" target="_blank">
  112. 博主，您好。为什么我在url中输...
  113. </a>
  114. </div>
  115. </div>
  116. </li>
  117. <li id="commentsCell_linedot2">
  118. <div id="commentsH1">
  119. <span id="commentsName_txtc_dot1">
  120. <a href="#" target="_blank" title="随风">
  121. 随风
  122. </a>
  123. </span>
  124. <time datetime="2014-03-31T16:59">03-31 16:59</time>
  125. </div>
  126. <div id="commentsContants1">
  127. <div id="commentsContantsTxt1">
  128. <a href="#" target="_blank">
  129. 博主，您好。为什么我在url中输...
  130. </a>
  131. </div>
  132. </div>
  133. </li>
  134. <li id="commentsCell_linedot3">
  135. <div id="commentsH1">
  136. <span id="commentsName_txtc_dot1">
  137. <a href="#" target="_blank" title="随风">
  138. 随风
  139. </a>
  140. </span>
  141. <time datetime="2014-03-31T16:59">03-31 16:59</time>
  142. </div>
  143. <div id="commentsContants1">
  144. <div id="commentsContantsTxt1">
  145. <a href="#" target="_blank">
  146. 博主，您好。为什么我在url中输...
  147. </a>
  148. </div>
  149. </div>
  150. </li>
  151. <li id="commentsCell_linedot4">
  152. <div id="commentsH1">
  153. <span id="commentsName_txtc_dot1">
  154. <a href="#" target="_blank" title="随风">
  155. 随风
  156. </a>
  157. </span>
  158. <time datetime="2014-03-31T16:59">03-31 16:59</time>
  159. </div>
  160. <div id="commentsContants1">
  161. <div id="commentsContantsTxt1">
  162. <a href="#" target="_blank">
  163. 博主，您好。为什么我在url中输...
  164. </a>
  165. </div>
  166. </div>
  167. </li>
  168. </ul>
  169. </nav>
  170. </div>
  171. <div id="connFoot3"></div>
  172. </section>
  173. </aside>
  174. </div>
  175. <div id="column_2">
  176. <section id="conn4">
  177. <header id="connHead4">
  178. <h1>分类</h1>
  179. <span id="edit2">
  180. <a href="javascript:;"
  181. onclick="window.CateDialog.show();return false;">
  182. [<cite>管理</cite>]
  183. </a>
  184. </span>
  185. </header>
  186. <div id="connBody4">
  187. <div id="bloglist">
  188. <section>
  189. <header>
  190. <div id="blog_title_h1">
  191. <h1 id="blog_title1">
  192. <a href="#" target="_blank">
  193. HTML5中新增number元素的ValueAsNumber属性
  194. </a>
  195. </h1>
  196. <img title="此博文包含图片" src="image/head.jpg" id="icon1">
  197. <time datetime="2014-03-31T18:30" pubdate>(2014-03-31 18:30)</time>
  198. </div>
  199. <div id="articleTag1">
  200. <span id="txtb1">分类：</span>
  201. <a target="_blank" href="#">HTML5</a>
  202. </div>
  203. </header>
  204. <div id="content1">
  205. <p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
  206. <p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
  207. <p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
  208. <p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
  209. <p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
  210. </div>
  211. <footer id="tagMore1">
  212. <div id="tag_txtc1">
  213. <a href="#" target="_blank">阅读</a> |
  214. <a target="_blank" href="#">评论</a>  还没有被转载|
  215. <a href="javascript:;" onclick="return false;">收藏</a>
  216. </div>
  217. <div id="more1">
  218. <span id="smore1">
  219. <a href="#" target="_blank">查看全文</a>>>
  220. </span>
  221. </div>
  222. </footer>
  223. </section>
  224. </div>
  225. </div>
  226. </section>
  227. </div>

样式文件main.css

  1. div#blog{
  2. background-position:50% 0%;
  3. background-image:url(image/blogb.png);
  4. width:100%;
  5. /*background-repeat:no-repeat;*/
  6. }
  7. ul{
  8. list-style:none;
  9. }
  10. div#blogbody{
  11. margin:0px;
  12. }
  13. [id^=column_]{
  14. display:inline;
  15. float:left;
  16. overflow:hidden;
  17. }
  18. div#column_1{
  19. margin-left:20px;
  20. width:210px;
  21. }
时间： 2024-10-30 12:22:45

HTML5移动开发之路（42）——HTML4与HTML5文档结构比较的相关文章

HTML5移动开发之路（15）——HTML5中的音频

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(15)--HTML5中的音频 浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准.现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的.然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦.在HTML5的新标准中规定了一种通过

HTML5移动开发之路（13）——HTML5中的全局属性

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(13)--HTML5中的全局属性 一.accssskey  快捷键 [html] view plain copy print? <!DOCTYPE HTML> <html> <body> <a href="http://blog.csdn.net/column/details/dawanganban-html5.html" accesskey="

HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

HTML5移动开发之路（20）——HTML5 Web SQL Database

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(20)--HTML5 Web SQL Database 一.Web Database介绍 WebSQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Opera等主流浏览器都已经支持WebSQL Database WebSQL数据库有三个核心方法: 1)打开数据库openDatabase()方法: 此方法创建数

HTML5移动开发之路（49）——HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器——HBuilder.

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(49)--HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.NET.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App项目 注释:Html5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距.HTML5+规范是一个开放的规范,在W3C中国的指

HTML5移动开发之路（17）——HTML5内联SVG

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(17)--HTML5内联SVG 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改

HTML5移动开发之路（18）——HTML5地理定位

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(18)--HTML5地理定位 在前面的<HTML5移动开发之路(2)--HTML5的新特性>中介绍了关于HTML5的地理定位功能,这一篇我们来详细了解一下怎么使用该功能. HTML5 Geolocation API用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,在使用该功能的时候浏览器会弹出提醒框. 一.地理定位的几种方式 IP地址.GPS.Wifi.GS

【Win10 应用开发】自适应Toast通知的XML文档结构

原文:[Win10 应用开发]自适应Toast通知的XML文档结构 老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我学不来啊.学不来的话你应该检讨.老周比较保守地计算一下,学会C# 6只需要20秒,不信的话,老周笔划笔划一下,你就明白了. 1.属性自动初始化.在4.0中引入了这样声明属性: public int VVVV { get; set;} 以前是属性包装一个字段,在初始化属性时只要对字段赋值即可,这个省略

HTML5与HTML4的区别-----文档结构

HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句     HTML5仅规定了一种:       <!DOCTYPE html> 2.简化了设置字符编码   <meta charset="UTF-8"> charset 属性是 HTML5 中的新属性,且替换了:<meta http-equiv="Content-Type" content="text/html; chars

【Win 10应用开发】Adaptive磁贴模板的XML文档结构

在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win 10的API中也是支持的,此外,Win10 App还支持全新的自适应磁贴模板,本文老周就给大家先讲一下基本结构,下一篇文章中咱们再说一说复杂排版. 应用程序的图标可以分为两类:第一类是应用商店上专用的,就是你的应用提交到商店后,给用户看的图标:另一类就是应用本身的一些图标或磁贴. 磁贴其实也就这么