![HTML5+CSS3从入门到精通(微课精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/697/24172697/b_24172697.jpg)
上QQ阅读APP看书,第一时间看更新
2.6 HTML5文档大纲
HTML5对如何处理位于article、aside、nav和section等结构元素中的h1~h6有一套算法。该算法通常称为HTML5文档大纲,文档大纲不会对页面结构造成破坏,也不会影响布局。不过,目前还没有浏览器实现这套算法,在屏幕阅读器中只有JAWS(一款运行于Windows下的屏幕阅读器)支持,而它的实现还存在问题。鉴于此,W3C已经将文档大纲列入可能从最终定稿的规范中移除的特性。
2.6.1 定义文档节段
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P65_14967.jpg?sign=1739608375-PYrnB0ZVILRX0vzegkdBTaDA7koanRq4-0-51e0049f03b98248afb024a1a6dedc44)
视频讲解
在HTML5文档中,节段是一个很重要的概念,它表示一个语义独立的内容块。能够定义节段的元素包括:body、section、article、aside、nav、header、footer。
节段可以相互嵌套,形成嵌套的结构层次关系。每个节段都必须有自己的标题,即使是嵌套的节段,也必须有自己的标题,标题可以使用h1、h2、h3、h4、h5、h6元素之一标识。
详细示例演示说明,请扫码学习。
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P65_14973.jpg?sign=1739608375-xZdUN71T8ZUyrUpSUdIb2Yp8lL8aqQZy-0-a7ec43752ac72c5f87153baf6a84afdd)
线上阅读
2.6.2 隐式分节
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P65_14964.jpg?sign=1739608375-quvjBumL8282NUGLw28b7wahtr3h4srf-0-edf95ba497651ca6802b071ab77fe388)
视频讲解
HTML5分节元素不会强制性定义大纲,为了与HTML4保持兼容,有一种方式来定义节段,而不需要分节元素,这种方式就是隐式分节。
当标题元素(h1~h6)不是父节段的第一个标题时,它会隐式定义一个新的节段。这种隐式节段通过在父节点中与之前标题的相对级别来确定。如果比之前的标题级别更低,那么就会定义一个新的子节段。
详细示例演示说明,请扫码学习。
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P65_14976.jpg?sign=1739608375-Bga8rWoBDBrIwnicSz7EHbwQ3XIruxQE-0-0f4a711b46d190611335f7ff656530d5)
线上阅读
2.6.3 特殊分节
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P65_14961.jpg?sign=1739608375-S7c66vCW0c5bU7hBRXoOl1Ejkz6VuxKD-0-5a502fad8e3bbcb4a04104a0c7a7c0c4)
视频讲解
1.分节根
分节根拥有独立的大纲体系,其内的节段与外部大纲没有联系。使用blockquote、details、fieldset、figure、td可以定义分节根元素。
2.主纲之外的节段
下面4个元素用来定义不属于文档主要大纲中的节段:aside、nav、header、footer。
详细示例演示说明,请扫码学习。
![](https://epubservercos.yuewen.com/1B54E6/13043253503832006/epubprivate/OEBPS/Images/Figure-P65_14979.jpg?sign=1739608375-g2lt1WZGnLac3uCgz54zP5mdl8BuFFt2-0-7722a1b0e30d101e20337b3ceba5ed4d)
线上阅读