HTML5 新增文档结构相关元素示例

  1. 云栖社区>
  2. 博客>
  3. 正文

HTML5 新增文档结构相关元素示例

余二五 2017-11-14 22:48:00 浏览534
展开阅读全文

 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:leftwidth:20%;} 
  18. article{float:rightwidth:79%;} 
  19. header{display:blockcolor:yellow; text-align:left;} 
  20. article header{color:bluetext-align:left;} 

最后效果图:

 





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/852852,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
余二五
+ 关注