标签:
HTML5 新增的的非主体结构元素包括header元素、footer元素、address元素、hgroup元素。
header元素:header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,如:数据表格、搜索表单、或者相关的logo。它可以出现多次。
<!DOCTYPE html> <html> <head lang="en"> <title>header元素</title> <meta charset="utf-8"> </head> <body> <header> <h1>页面标题</h1> </header> <article> <header> <h1>hello</h1> </header> </article> <br/> <header> <h1>天气预报</h1> <a href="http://www.weather.com.cn/weather/101271401.shtml">详情页</a> <nav> <ul> <li><a href="#">北京</a></li> <li><a href="#">上海</a></li> <li><a href="#">广州</a></li> </ul> </nav> </header> </body> </html>
footer元素:footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。
<!DOCTYPE html> <html> <head lang="en"> <title>footer元素</title> <meta charset="utf-8"> </head> <body> <footer> <ul> <li><a href="#">版权信息</a></li> <li><a href="#">站点地图</a></li> <li><a href="#">联系方式</a></li> </ul> </footer> <article> <footer> 这是文章的底部 </footer> </article> <section> <footer> 这也是文章的底部 </footer> </section> </body> </html>
address元素:address元素用来在文档中呈现联系地址,包括文档作者或文档维护者的名字、网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或者真实地址,还可以用来展示跟文档相关的联系人的所有联系信息。
<!DOCTYPE html> <html> <head lang="en"> <title>address元素</title> <meta charset="utf-8"> </head> <body> <address> <a href="#">周六</a> <a href="#">王五</a> </address> <footer> <div> <address> <a href="#">小王</a> 这里可以是地址 </address> </div> </footer> </body> </html>
hgroup元素:hgroup元素是将标题及子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,比如一个内容区块的标题及其子元素算一组。标题过多的时候,使用hgroup将其包裹。
<!DOCTYPE html> <html> <head lang="en"> <title>hgroup元素</title> <meta charset="utf-8"> </head> <body> <article> <header> <hgroup> <h1>这是主标题</h1> <h4>这是子标题</h4> </hgroup> <p><time datetime="2016-04-30">2016-04-30</time></p> </header> <div>这是文章内容</div> <footer>这是文章底部</footer> </article> </body> </html>
H5网页编排示例:
<!DOCTYPE html> <html> <head lang="en"> <title>H5网页编排示例</title> <meta charset="utf-8"> </head> <body> <header> <h1>网页标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">帮助</a></li> </ul> </nav> </header> <article> <hgroup> <h1>这是主标题</h1> <h3>这是子标题</h3> <p>文章正文</p> </hgroup> <section> <div> <article> <h1>评论标题</h1> <p>评论正文</p> </article> </div> </section> </article> <footer> <small>版权声明</small> </footer> </body> </html>
标签:
原文地址:http://www.cnblogs.com/bob-yu/p/5449146.html