html5新增的结构化元素

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>

 

posted @ 2014-09-01 22:05  SweetyDaisy  阅读(1017)  评论(0)  编辑  收藏  举报