《HTML 5与CSS 3 权威指南（第4版·上册）》 —3.3.2　大纲的编排规则

3.3.2　大纲的编排规则

关于内容区块的编排，可以分为显式编排与隐式编排两种方式。

1.显式编排内容区块

显式编排是指明确使用section等元素创建文档结构，在每个内容区块内使用标题（h1～h6），如代码清单3-25所示。

代码清单3-25　显式编排内容区块示例

2.隐式编排内容区块

所谓隐式编排，是指不明确使用section等元素，而是根据页面中所书写的各级标题（h1～h6）自动创建各级内容区块。因为html 5分析器只要看到书写了某个级别的标题，就会判断存在相对应的内容区块。代码清单3-26为一个隐式编排内容区块的示例。

代码清单3-26　隐式编排内容区块示例

将这两种编排方式进行对比，很明显，显式编排更加清晰明确、易读。

3.标题分级

不同标题之间是有级别的，h1的级别最高，h6的级别最低。隐式编排时按如下规则自动生成内容区块。

如果新出现的标题比上一个标题级别低，生成下级内容区块。

如果新出现的标题比上一个标题级别高或级别相等，生成新的内容区块。

第一条规则的示例与前面一样，现在我们来看关于第二条规则的示例，如代码清单3-27所示。

代码清单3-27　第二条规则示例

如果把上一个示例改成显式编排，代码如代码清单3-28所示。

代码清单3-28　第二条规则的显式编排示例

因为隐式编排容易让自动生成的整个文档结构与所想要的文档结构不一样，而且也容易引起文档结构混乱，所以尽量使用显式编排。

4.不同的内容区块可以使用相同级别的标题

另外，不同的内容区块可以使用相同级别的标题。例如，父内容区块与子内容区块可以使用相同级别的标题h1。这样做的好处是，每个级别的标题都可以单独设计，如果既需要“整个网页的标题”，又需要“文章的标题”（譬如书写文档时），这样做将会带来很大的便利性，如同代码清单3-29所示。

代码清单3-29　不同的内容区块可以使用相同级别的标题

5.网页编排示例

基于以上讲解过的知识点，我们来看应该怎样编排网页的内容。代码清单3-30为一个标准博客网页的示例，这个示例具备一个标准博客网页的基本要素，只缺少为了使用样式而补充添加的div元素。

代码清单3-30　网页编排示例

这个示例使用了嵌套artilce元素的方式，将关于评论的article元素嵌套在主article元素中，在HTML 5中，推荐使用这种嵌套article元素的方式。

css HTML5 html

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。