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

html5新增的结构化元素

时间:2014-09-01 22:38:53      阅读:389      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   strong   ar   2014   art   div   

1.主题结构元素: article section time  pubdate属性  nav aside 

  article用法:常用来表示一个独立的结构;

  section用法:一个东西可能会有几部分,每一个可用一个section组成;

  article和section的区别:article是section的特例,article更强调与其他部门的独立,section强调分段和分块。

  time  用法:

<time pubdate datetime="2014/09/01T21:51Z">我的博客记录时间是9月1日</time>

   pubdate属性 是要说明 这个time元素代表了文章或整个网页的发布日期。

 

2.非主体结构元素: header footer hggroup address

  非主体结构比较常见且语义较为清晰,不太熟悉的可能是hggroup元素,它的应用场景是:文章同时需要标题 子标题 或者 再低一级的标题

注意:以上结构元素只是为了表示结构,要用div及其他的常用标签表示内容

以上元素的实例:

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     <style type="text/css">
 6         body {border: dotted 1px gray;}
 7         article,header {width:800px;margin:0 auto;}
 8         ul li {list-style-type: none; display: table-cell; padding: 10px; font: 20px bold;}
 9         ul li>a{ text-decoration: none; }
10     </style>
11 </head>
12 <body>
14     <article style="">
15         <header>
16             <hgroup>
17                 <h1>文章主标题</h1>
18                 <h2>文章子标题</h2>
19                 <p><time pubdate datetime="2014/09/01">2014/09/01</time></p>
20             </hgroup>
21         </header>
22         <section>
23             <h2>中国民生银行</h2>
24             <p>客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经           理助理客户经理助理客户经理助理客户经理助理客户经理助理</p>
25         </section>
27         <section>
28             <h2>中国民生银行</h2>
29             <p>客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经           理助理客户经理助理客户经理助理客户经理助理客户经理助理</p>
30         </section>
31     </article>
32 </body>
33 </html>

 

html5新增的结构化元素

标签:style   blog   color   io   strong   ar   2014   art   div   

原文地址:http://www.cnblogs.com/hfhsummer/p/3950147.html

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