15859020900

15859020900

关注
发信
关注(28)粉丝(399)

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

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

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

在HTML4中的描述方式：

 

  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与XHTMLh3>  
  12.     body>  
  13. html>  

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

 

 

  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与XHTMLh3>  
  21.                 div>  
  22.             div>  
  23.         <div>  
  24.     body>  
  25. html>  

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

 

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

 

  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与XHTMLh3>  
  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元素内。

 

  1. <article>  
  2.     <h1>标题h1>  
  3.       
  4.     <h2>副标题h2>  
  5. article>  

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

 

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

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

界面布局如下：

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

  1. >  
  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>联系方式：739299362p>  
  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">HTML5a>  
  74.                             <em>(40)em>  
  75.                         li>  
  76.                         <li id="dot3">  
  77.                             <a href="#" target="_blank">HTML5a>  
  78.                             <em>(40)em>  
  79.                         li>  
  80.                         <li id="dot4">  
  81.                             <a href="#" target="_blank">HTML5a>  
  82.                             <em>(40)em>  
  83.                         li>  
  84.                         <li id="dot5">  
  85.                             <a href="#" target="_blank">HTML5a>  
  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:59time>  
  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:59time>  
  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:59time>  
  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:59time>  
  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="#">HTML5a>  
  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.   
  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. }  
11-10 21:03
Powered by LMLPHP ©2024 15859020900 0.077263