首页 > 代码库 > html5新增的结构化元素
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>
html5新增的结构化元素
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。