九、html5中的网页结构

一、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>   //在脚本中创建元素