ol标签是组织章节内容最语义正确、可访问性最强的方式，因其明确传达逻辑顺序与层级关系；手动编号丢失结构信息，导致屏幕阅读器无法识别章节、搜索引擎难以提取层级、维护易出错；嵌套ol必须严格置于li内，CSS计数器比type属性更灵活可靠，且需避免破坏可访问性的错误用法。
ol 标签是组织章节内容最语义正确、可访问性最强的方式——它明确告诉浏览器、搜索引擎和屏幕阅读器：“这些条目有逻辑顺序，不可随意调换”。
为什么不能用 p + 手动编号写章节？
手动写“1. 引言”“2. 基础概念”看似简单，但会丢失结构信息：
– 屏幕阅读器无法识别这是“第几章”，只能逐字读出“一 点 空 格 引 言”；
– 搜索引擎难以提取章节层级，影响文档片段（snippet）生成；
– 后续想加个“1.1 子节”或自动重排序号时，必须全手动改，极易出错。
ol 的嵌套必须用 li 包裹子 ol
章节常含多级结构（如“第二章 → 2.1 → 2.1.1”），ol 允许嵌套，但规则严格：
– 子 ol 必须直接放在某个 li 内部，不能悬空或放在 div 里；
– 每层 ol 都应保持语义连贯（比如不跳过“2.1”直接写“2.2”）；
– 浏览器默认编号会自动递进，无需设置 start 属性。
示例：
<ol>
<li>引言</li>
<li>基础概念
<ol>
<li>术语定义</li>
<li>适用范围</li>
</ol>
</li>
<li>实践方法
<ol>
<li>准备阶段</li>
<li>执行步骤</li>
<li>验证方式</li>
</ol>
</li>
</ol>
CSS 控制编号格式比 type 属性更可靠
ol 的 type 属性（如 type="A"）已被现代开发视为过时做法，原因：
– 它只支持有限几种标记（1、A、a、I、i），无法实现“2.1”“§3.2.1”等复杂章节编号；
– 在不同浏览器中行为不一致，尤其嵌套时；
– 与 CSS counter-reset/counter-increment 相比，缺乏灵活性和可维护性。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
推荐用 CSS 实现章节编号：
ol { counter-reset: section; }
li { counter-increment: section; }
li::before { content: counters(section, ".") ". "; }
这样能自然生成 “1.” “1.1.” “1.1.1.” 等格式，且可单独控制字体、间距、缩进。
容易被忽略的可访问性细节
即使结构正确，仍可能破坏辅助技术体验：
– 不要给 li 加 role="heading" 或 aria-level：章节标题语义应由真实 heading 元素（h2、h3）承担，ol 只管顺序；
– 若章节标题需链接跳转，把 a 放在 li 内，而非包裹整个 li；
– 避免在 ol 外再套一层 div 并设 tabindex：这会干扰列表的焦点流和阅读顺序。
真正关键的不是“能不能显示编号”，而是“能否被机器准确理解层级与顺序”。ol 是 HTML 提供的唯一原生机制，绕开它等于主动放弃语义化红利。
