本文详细介绍了仅使用HTML和CSS建立强大而可访问的目录（TOC），这是一项令人惊讶挑战但又有意义的努力。目的是创建一个适用于网页（带有可通航链接）和印刷媒体（书籍，小册子）的TOC，优雅地处理多层标题。
TOC的基本结构很简单：每个条目将一个截面标题链接到其页码，通常将视觉“领导者”（点，破折号等）连接起来。鉴于基于HTML的工作流程，虽然很容易在文字处理器中生成，但这并不可行。该解决方案需要一种自动化的HTML兼容方法，以确保可访问性和打印准备。
最初的研究揭示了有用但不完整的解决方案。朱莉·布兰克（Julie Blanc）的“从您的HTML中建立了目录”和Christoph Grabo的“带有CSS的响应式TOC领导者”提供了对布局技术的宝贵见解（基于Float的VS. CSS Grid），但都没有完美地满足要求。
语义正确性指导标记选择。最初，<table>和<code><dl></dl>被考虑，代表标题页数字作为键值对。但是，事实证明，这些不足以用于多级TOC（章节和小节）。嵌套<dl></dl>元素缺乏语义清晰度。
选定的方法利用有序列表（<ol></ol> ） - 比无序列表更合适（<ul></ul> ）对于TOC的顺序性质。标题页数关系是通过明确维护的，包括每个列表项目中的页码之前的“页面”。即使没有视觉提示，这种简单的添加也阐明了上下文。
基本的HTML骨架说明了以下内容：
<ol role="list">
<li>
<a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
章节或小节标题第1页
</a>
<ol role="list"></ol>
</li>
</ol>样式涉及几个步骤：
删除自动生成的数字：手动编号允许书籍中常见的未编号元素（前言等）。
列表样式：顶级列表使用padding: 0用于与段落对齐。嵌套列表使用padding-inline-start: 2ch （基于字体独立性的基于字符宽度的填充）。至关重要的是，在list-style-type: none使用时，添加了role="list"以保留webkit浏览器中的列表语义。
标题和页码样式： CSS网格提供了较高的对齐方式，尤其是对于多行标题。网格的两列（ grid-template-columns: auto max-content ）确保标题扩展以填充可用的空间，而页码（ text-align: right ）则在右侧对齐。 “页面”文本在视觉上使用可访问性的visually-hidden隐藏。
领导者实施： leader() CSS功能虽然指定，但缺乏浏览器支持。从以前的文章中借来的解决方案利用了一个::after带有一串长点的伪元素。但是，通过将dot在元素中包裹在aria-hidden="true"中，以防止屏幕读取器宣布点，从而改善了可访问性。
完成触摸：顶级项目是粗体的（ font-weight: bold ），边距（ margin-block-start: 1em ）将章节与小节分开。 font-variant-numeric: tabular-nums和min-width: 2ch确保在不同数字上的页数宽度一致，以使其适当的领导者对齐。
所得的CSS是有效，灵活且可访问的，可容纳的嵌套小节，而无需修改。该解决方案对于Web导航和打印输出同样有效。朱莉·布兰克（Julie Blanc），克里斯托夫·格拉伯（Christoph Grabo）和萨拉·索伊丹（Sara Soueidan）的贡献和见解表示感谢。
以上是HTML CSS的完美目录的详细内容。更多信息请关注PHP中文网其他相关文章！
