码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-11-14 17:30:07      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:.sh   dialog   text   为什么   outline   nts   cell   html4   jsb   

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

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

在HTML4中的描述方式:

 

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

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

 

 

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

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

 

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

 

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

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

 

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

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

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

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

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <article>  
  2.     <h1>标题</h1>  
  3.     <!--隐式创建出一个新的section元素-->  
  4.     <h2>副标题</h2>  
  5. </article>  

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

 

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

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

界面布局如下:

技术分享

[html] view plain copy
 
 print?技术分享技术分享
  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.                     <href="http://blog.csdn.net/dawanganban" id="on">主页</a>  
  20.                 </li>  
  21.                 <li>  
  22.                     <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.                         <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.                     <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.                             <target="_blank" href="#">全部博文</a>  
  70.                             <em>(62)</em>  
  71.                         </li>  
  72.                         <li id="dot2">  
  73.                             <href="#" target="_blank">HTML5</a>  
  74.                             <em>(40)</em>  
  75.                         </li>  
  76.                         <li id="dot3">  
  77.                             <href="#" target="_blank">HTML5</a>  
  78.                             <em>(40)</em>  
  79.                         </li>  
  80.                         <li id="dot4">  
  81.                             <href="#" target="_blank">HTML5</a>  
  82.                             <em>(40)</em>  
  83.                         </li>  
  84.                         <li id="dot5">  
  85.                             <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.                                     <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.                                     <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.                                     <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.                                     <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.                                     <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.                                     <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.                                     <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.                                     <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.                 <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.                                 <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.                             <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.                             <href="#" target="_blank">阅读</a> |   
  214.                             <target="_blank" href="#">评论</a>  还没有被转载|   
  215.                             <href="javascript:;" onclick="return false;">收藏</a>   
  216.                         </div>  
  217.                         <div id="more1">  
  218.                             <span id="smore1">  
  219.                                 <href="#" target="_blank">查看全文</a>>>  
  220.                             </span>  
  221.                         </div>  
  222.                     </footer>  
  223.                 </section>  
  224.             </div>  
  225.         </div>  
  226.     </section>  
  227. </div>  

样式文件main.css

[css] view plain copy
 
 print?技术分享技术分享
  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.   
  8. ul{  
  9.     list-style:none;  
  10. }  
  11.   
  12. div#blogbody{  
  13.     margin:0px;  
  14. }  
  15.   
  16. [id^=column_]{  
  17.     display:inline;  
  18.     float:left;  
  19.     overflow:hidden;  
  20. }  
  21.   
  22. div#column_1{  
  23.     margin-left:20px;  
  24.     width:210px;  
  25. }  

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

标签:.sh   dialog   text   为什么   outline   nts   cell   html4   jsb   

原文地址:http://www.cnblogs.com/itxdl/p/6062262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!