必须用 <nav aria-label="章节导航"> 包裹嵌套标题的 <ol>，外层 <ol> 表达主序，<li> 内嵌 <h2> 等语义标题，子节用 <ol type="a"> 嵌套 <h3>，禁用 start/type 控制编号，改用 CSS counters。
<ol> 是正确选择，但直接套用默认样式会丢失语义层级、破坏可访问性和 SEO —— 章节不是普通步骤，需要明确的标题结构、嵌套关系和机器可读性。
为什么不能只用 <ol> 包裹纯文本
浏览器虽能渲染数字编号，但章节标题本质是内容主体，不是“第1步/第2步”这类操作指令。仅用 <ol><li>第一章</li><li>第二章</li></ol> 会导致：
- 屏幕阅读器无法识别标题级别，读作“列表项一，列表项二”，而非“一级标题：第一章”
- 搜索引擎无法提取章节大纲，
<h2>才是语义化标题锚点 - 后续添加子章节（如“1.1 引言”）时，
start和type难以精准控制，易错位 - 无法支持
aria-current="true"标记当前激活章节，影响 SPA 导航体验
<ol> 必须嵌套 <h2> 或更高阶标题
HTML5 允许 <li> 内部直接包含标题级元素，这是构建章节列表的合法且推荐方式：
<ol>
<li><h2 id="ch1">第一章：背景与动机</h2></li>
<li><h2 id="ch2">第二章：方法论</h2>
<ol type="a">
<li><h3 id="ch2a">2.1 实验设计</h3></li>
<li><h3 id="ch2b">2.2 数据采集</h3></li>
</ol>
</li>
<li><h2 id="ch3">第三章：结果分析</h2></li>
</ol>
- 外层
<ol>表达“章节主序”，内层<ol type="a">表达“子节次序”，语义清晰 - 每个
<h2>/<h3>提供独立 ID，支持锚点跳转和 TOC 自动高亮 - 嵌套结构天然兼容 CSS 选择器，例如
ol > li > h2::before可定制编号样式，不干扰语义
start 和 type 在章节中慎用
章节编号通常由内容逻辑决定（如“第四章”必须是 4），而非渲染控制。滥用属性反而引入维护风险：
立即学习“前端免费学习笔记（深入）”；
-
start="4"仅适用于接续前文（如 PDF 分页导出后半部分），网页章节应靠 HTML 结构顺序保证，而非靠数值硬编码 -
type="I"或type="A"适合附录、参考文献等非主干章节；主章节建议保持阿拉伯数字，默认即可 - 若需“第X章”前缀，用 CSS 的
counter-reset/counter-increment更可靠，避免 DOM 层面污染 - 注意：IE 不支持
type值为"1"以外的属性（如"A"），现代项目可忽略，但若需兼容旧系统，应降级为手动插入文本
章节列表必须包裹在 <nav aria-label="章节导航"> 中
单纯 <ol> 是内容结构，不是导航组件。用户需要明确知道这是“可跳转的目录”，而非“文档正文的一部分”：
- 加
<nav>向辅助技术声明用途，屏幕阅读器会提示“章节导航，共7项” -
aria-label比aria-labelledby更稳妥——避免依赖页面中可能缺失或重复的 visible 标题 - 不要用
<section>或<div>替代<nav>，前者无导航语义，键盘 Tab 流会跳过整块区域 - 如果该列表同时作为侧边栏固定存在，需额外加
role="complementary"并确保 tabindex="-1" 防止焦点陷阱
真正难的不是写出带数字的列表，而是让每个数字背后都有可定位、可索引、可交互的语义支撑。一旦漏掉 <nav>、混用 <h2> 层级、或把编号逻辑塞进 HTML 属性里，章节列表就退化成了装饰性数字串——人眼看得清，机器读不懂，用户找不到。
