html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素。
1、header元素
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个区块的标题,但是也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。
过去常用div元素承载头部、内容和底部,如下:
<body> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </body>
现在则改变写法,如下:
<body> <head></head> <article></article> <footer></footer> </body>
用来做导航,如下:
<body> <header> <h1>IT new technology</h1> <a href="http://www.jikexueyuan.com">jikexueyuan</a> <nav> <ul> <li><a href="#">learn</li> <li><a href="#">technology</li> <li><a href="#">hacker</li> </ul> </nav> </header> </body>
2、footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。
过去用div元素来承载内容,如下:
<body> <div class="footer"> <ul> <li><a href="#">版权信息</li> <li><a href="#">站点地图</li> <li><a href="#">联系方式</li> </ul> </div> </body>
现在则这样写,如下:
<body> <footer> <ul> <li><a href="#">版权信息</li> <li><a href="#">站点地图</li> <li><a href="#">联系方式</li> </ul> </footer> </body>
3、hgroup元素
hgroup是将标题及子标题进行分组的元素,hgroup通常会将h1~h6的元素进行分组,譬如一个内容区块的标题及其子元素算是一组。
<body> <header> <hgroup> <h1>标题1</h1> <h2>标题1.1</h2> </hgroup> <hgroup> <h1>标题2</h1> <h2>标题2.2</h2> </hgroup> </header> </body>
4、address元素
address元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address不止用来呈现这些内容,还用来展示跟文档相关的联系人的所有联系信息。
<body> <address> <a href="#">iwen</a> <a href="#">ime</a> </address> </body>
5、html5的大纲编排的规则
1)显示编排内容区域块
使用section等元素来创建结构
2)隐示编排内容区域块
不使用section等元素,而是根据网页要求,书写h1~h6级标题来创建
3)标题分级
h1~h6,标题的级别是不同的;如果使用级别更低的h标签,则生成下级的区域块;如果使用同级或者更高级别的h标签,则生成新的区域块
4)不同区域块使用相同标题