
上QQ阅读APP看书,第一时间看更新
2.6 HTML5文档大纲
HTML5对如何处理位于article、aside、nav和section等结构元素中的h1~h6有一套算法。该算法通常称为HTML5文档大纲,文档大纲不会对页面结构造成破坏,也不会影响布局。不过,目前还没有浏览器实现这套算法,在屏幕阅读器中只有JAWS(一款运行于Windows下的屏幕阅读器)支持,而它的实现还存在问题。鉴于此,W3C已经将文档大纲列入可能从最终定稿的规范中移除的特性。
2.6.1 定义文档节段

视频讲解
在HTML5文档中,节段是一个很重要的概念,它表示一个语义独立的内容块。能够定义节段的元素包括:body、section、article、aside、nav、header、footer。
节段可以相互嵌套,形成嵌套的结构层次关系。每个节段都必须有自己的标题,即使是嵌套的节段,也必须有自己的标题,标题可以使用h1、h2、h3、h4、h5、h6元素之一标识。
详细示例演示说明,请扫码学习。

线上阅读
2.6.2 隐式分节

视频讲解
HTML5分节元素不会强制性定义大纲,为了与HTML4保持兼容,有一种方式来定义节段,而不需要分节元素,这种方式就是隐式分节。
当标题元素(h1~h6)不是父节段的第一个标题时,它会隐式定义一个新的节段。这种隐式节段通过在父节点中与之前标题的相对级别来确定。如果比之前的标题级别更低,那么就会定义一个新的子节段。
详细示例演示说明,请扫码学习。

线上阅读
2.6.3 特殊分节

视频讲解
1.分节根
分节根拥有独立的大纲体系,其内的节段与外部大纲没有联系。使用blockquote、details、fieldset、figure、td可以定义分节根元素。
2.主纲之外的节段
下面4个元素用来定义不属于文档主要大纲中的节段:aside、nav、header、footer。
详细示例演示说明,请扫码学习。

线上阅读