应使用<ol>实现语义化自动编号学习步骤，因其支持屏幕阅读器识别、防复制错位、易增删改序；嵌套子列表须在<li>内嵌<ol>，并正确设置type属性与CSS list-style-type值。
直接用 <ol> 就能生成语义清晰、自动编号的学习步骤，比手动写“1. 2. 3.”更可靠，也方便后续用 CSS 或 JS 控制层级和样式。
为什么不用 <p> + 手动编号
手写“1. 预习”“2. 听课”“3. 复习”看似简单，但实际会带来三个问题：屏幕阅读器无法识别顺序逻辑；复制粘贴时编号容易错位；改顺序或增删项时要全手动调整。而 <ol> 是语义化结构，浏览器和辅助工具天然理解这是“有先后关系的序列”。
- 编号由浏览器自动生成，
start属性可指定起始值（如<ol start="5">） - 嵌套子列表时，用
<ol type="a">或<ol type="i">能自然区分层级 - 配合 CSS 的
counter-reset和counter-increment可实现复杂编号格式（如“1.1”“1.2”），但日常学习整理通常不需要
<ol> 嵌套子步骤的正确写法
常见错误是把子项写成 <p> 或直接塞进父 <li> 里不包裹新 <ol>，结果子项没编号、缩进错乱、语义断裂。正确方式是：每个主步骤一个 <li>，子步骤在该 <li> 内部再开一个 <ol>。
例如整理“Python入门学习路径”：
立即学习“前端免费学习笔记（深入）”；
<ol>
<li>搭建开发环境
<ol type="a">
<li>安装 Python 3.12+</li>
<li>配置 VS Code 插件</li>
</ol>
</li>
<li>掌握基础语法
<ol type="a">
<li>变量与数据类型</li>
<li>条件语句与循环</li>
</ol>
</li>
</ol>
注意：<ol type="a"> 必须完整闭合，且只能出现在 <li> 内部——放错位置会导致整个列表渲染异常。
避免 list-style-type 误配导致编号消失
如果用了 CSS 自定义样式但编号突然不见了，大概率是 list-style-type 值选错了。比如对 <ol> 设了 list-style-type: disc，浏览器会忽略——因为 disc 是无序列表专用值，有序列表只认 decimal、lower-alpha、upper-roman 等。
- 有序列表常用值：
decimal（默认数字）、lower-alpha（a, b, c）、upper-alpha（A, B, C）、lower-roman（i, ii, iii） - 无序列表才用
disc、circle、square - 想彻底隐藏编号又保留语义？用
list-style-type: none，但记得同步清掉默认padding-left，否则内容会左移错位
真正难的不是写对第一层 <ol>，而是三层以上嵌套时仍保持语义准确和视觉对齐——这时候建议用开发者工具检查 <li> 的盒模型，而不是反复调 margin。
