使用<ol>和<li>构建语义化阅读清单，支持type与start属性控制编号格式，嵌套时需确保子<ol>置于父<li>内，并兼顾无障碍访问性。
用 <ol> 和 <li> 构建基础阅读清单
HTML 有序列表的核心就是 <ol>（ordered list）包裹一组 <li>（list item）。它默认按数字 1、2、3… 自动编号，适合表达有先后顺序或优先级的阅读项。
常见错误是把阅读条目直接写成段落或无序列表——那样既没语义，也无法被屏幕阅读器正确识别为“序列”。
- 每个书名/文章标题必须放在独立的
<li>内，不能塞进一个<li>里用换行分隔 -
<ol>外层不要套<div>或<p>—— 除非真有布局需要，否则纯语义结构更干净 - 如果清单后续要加 JS 交互（比如标记“已读”），
<li>是天然的绑定目标，比用<span>模拟更可靠
控制编号样式：用 type 和 start 属性
默认数字编号（1. 2. 3.）不够灵活？<ol> 支持原生属性快速切换格式，无需 CSS 干预。
例如想用大写字母标出经典三部曲：
立即学习“前端免费学习笔记（深入）”；
<ol type="A"> <li>《理想国》</li> <li>《形而上学》</li> <li>《尼各马可伦理学》</li> </ol>
-
type可选值包括"1"（数字）、"a"（小写字母）、"A"（大写字母）、"i"（小写罗马数字）、"I"（大写罗马数字） -
start属性能跳过前几项，比如<ol start="5">会从 5 开始编号，适合接续上一页清单 - 注意：
type在现代浏览器中仍受支持，但若需更复杂的编号（如“第1章”“附录A”），就得用 CSS 的counter-reset和::marker
嵌套列表处理多层级阅读计划
当阅读清单本身有子结构——比如“先读导论，再分主题精读”——用嵌套 <ol> 最自然。
关键点不是“能不能嵌”，而是“要不要嵌”：语义上，子列表应是父项的展开步骤，而非平行条目。
- 第二层
<ol>必须放在某一个<li>内部，不能悬空；否则 HTML 结构会错乱 - 浏览器默认对嵌套列表缩进并变更编号类型（如外层数字、内层小写字母），这是可预期行为，不必强行重置
- 避免三层以上嵌套——可读性陡降，此时更适合拆成多个独立清单，或改用描述性结构（如
<details>+<summary>）
无障碍与可访问性必须检查的三点
阅读清单常被视作静态内容，但对使用读屏软件的用户来说，<ol> 的语义直接影响操作效率。
- 确保每个
<li>里的文本能独立说明内容，避免依赖上下文（比如只写“见上”“同上”） - 不要用
aria-label覆盖默认序号（如aria-label="第一本书"），这会让读屏器跳过原生计数逻辑 - 如果清单动态加载（比如通过 JS 插入新
<li>），记得触发aria-live区域提示更新，否则用户可能不知道新增了条目
最易被忽略的是：很多人给 <ol> 加了 class 或 style 后，顺手删掉了原生标签——结果只剩视觉序号，语义全失。只要保留 <ol> 和 <li>，样式和功能才能兼得。
