一、html5中的大纲
在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲。因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个局部使用整体样式时。http://gsnedders.html5.org/outliner/网站中有一个文档大纲分析器,可以将文档大纲以可视化的形式展示出来。“Untitled Section”表示缺乏标题
二、大纲的编排规则
关于内容区块的编排,可以分为显示编排与隐式编排两种方式。
1、显示编排内容区块是指明确使用section等元素创建文档结构,在每个文档区块内使用标题好(h1~h6、hgroup等)
2、隐式编排内容区块是指不明确使用section元素,而是根据页面中所书写的各级标题等自动创建各级内容区块。因为html5中分析器只要看到书写了某个级别的标题,就会判断存在相对应的内容区块。
3、 标题分级规则:不同标题之间是有级别的,h1级别最高,h6级别最低,
(1)如果新出现的标题比上一个标题级别低,生成下级内容区块
(2)如果新出现的标题比上一个标题级别高或相等,生成新的内容区块
4、不同内容区块可以使用相同级别的标题
父内容区块与子内容区块可以使用相同级别的标题,这样做的好处是,每个级别的标题都可以单独设计,如果既需要“整个网页的标题”,又需要“文章的标题”,这样做可以带来很大的便利性。
三、对新的结构元素使用样式
因为很多浏览器尚未对html5中的新增的结构元素提供支持,我们无法知道客户端使用的浏览器是否支持这些元素,所以需要使用css追加如下说明:
article,aside,dialog,figure,footer,header,legend,nav,section,main{
display: block;
} /*追加block说明*/
另外,ie8以及之前的浏览器不支持用css的方法来使用这些尚未支持的结构元素,所以为了在ie中也能正常使用这些结构元素,需要使用javascript脚本:
<script type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
</script> //在脚本中创建元素