是唯一正确选择，因课程章节天然有序且需被读屏软件、搜索引擎准确识别；必须严格嵌套，编号宜手写进文本以确保稳定；锚点id须唯一、大小写敏感并与href严格匹配。
课程章节必须用 <ol></ol>，不能用 <ul></ul> 或手动写编号——否则会丢失语义、破坏可访问性、干扰 SEO，且后续无法可靠控制编号逻辑。
为什么 <ol></ol> 是唯一正确选择
课程章节天然有序，“第1章”之后必须是“第2章”，不可互换。浏览器和读屏软件依赖 <ol></ol> 的语义识别这种顺序关系：<ul></ul> 只表示“一组项目”，没有先后含义；手动写 “1. ”“2. ” 则无法被程序解析，打印或导出时易错位，也无法用 CSS 计数器动态生成编号。
常见错误现象：
– 屏幕阅读器把“第二章”读作“列表项二”，而非“第二章”
– 搜索引擎不提取章节标题结构，大纲不出现在搜索结果摘要中
– 用 CSS 的 list-style-type: upper-alpha 强行模拟 A. B. C.，但嵌套时计数器不继承，第二级突然从 A 重新开始
<ol></ol> 嵌套必须严格遵循父子关系
多级章节（如“第2章 → 2.1节 → 2.1.1小节”）必须靠 <ol></ol> 嵌套实现，且子 <ol></ol> 必须作为父级 <li> 的直接子内容，不能放在外面。
- ✅ 正确：每个
<li>包裹一章/一节，其内部可嵌一个<ol></ol>表示下级 - ❌ 错误：把二级
<ol></ol>和一级并列写在同一个<ol></ol>外层 —— 浏览器视为全新列表，编号重置 - 参数差异：
type属性只作用于当前<ol></ol>，不影响父或子；start也仅对本层生效 - 性能影响极小，但结构错乱会导致样式调试耗时翻倍；Chrome/Firefox/Safari 全支持，IE 不支持嵌套计数器（需降级为手写编号）
示例片段：
<ol type="1">
<li>HTML 基础
<ol type="a">
<li>标签语法</li>
<li>属性与值</li>
</ol>
</li>
<li>CSS 入门
<ol type="a">
<li>选择器优先级</li>
<li>盒模型详解</li>
</ol>
</li>
</ol>
编号写进文本比依赖 type 和 start 更稳
type 和 start 看似方便，但实际场景中极易失控：JS 动态插入章节后编号错位、CSS 重置了默认样式、打印时 start 被忽略。最可靠的做法是把编号写进 <li> 文本里。
- 例如：
<li>第3章：JavaScript 作用域</li>，而非<li>JavaScript 作用域</li>+<ol start="3"></ol> - 这样编号固定、可搜索、复制粘贴不丢序号、兼容所有旧浏览器
- 如果真要自动化（如上百章），再用 CSS
counter-increment配合::before，但基础场景手写更省心 - 别给
<ol></ol>加reversed—— 课程没人倒着学
容易被忽略的锚点与可访问性细节
课程大纲不是摆设，用户要点进去看内容。每个章节 <li> 应包裹一个跳转链接，且锚点 ID 必须唯一、大小写敏感、与目标 <section id="..."></section> 严格匹配。
- ✅ 正确：
<li>@#@#@#@#@#@#@#@#@#@0</li> - ❌ 错误：
<li>@#@#@#@#@#@#@#@#@#@1</li>（无真实跳转） - ❌ 错误：
<li><span id="Chapter2">第2章...</span></li>（ID 大小写不一致，href="#chapter2"失效） - 键盘 Tab 焦点必须落在
<a></a>上，不能只包文字或用<div> 模拟 <p>复杂点在于：一旦用了 <code><details><summary></summary></details>折叠课时详情，<summary></summary>里就不能再塞<a></a>（语义冲突），此时得把锚点移到<li>内部紧邻位置，确保焦点路径清晰。
