ol 是语义化有序列表容器，仅当内容顺序不可调换时使用；错误用法包括仅作编号装饰、手动加序号或混用 type 与 css；嵌套需严格包裹于 li 内，深层嵌套建议改用 dl。
ol 标签不是编号装饰工具，而是语义容器。如果你只是想让文字带个数字前缀，用 ol 反而容易出错；但如果你要表达「步骤不可调换」「顺序即逻辑」这类知识结构，ol 就是唯一正确选择。
什么时候该用 ol 而不是 ul 或 p
判断依据只有一条：内容是否依赖顺序才能成立。
- 烹饪步骤、安装流程、法律条款编号、考试评分标准——必须用
ol，换序会改变含义 - 知识点罗列（如“HTML 三大核心标签：
div、span、section”）——用ul更合适，顺序不关键 - 把每个要点写成独立的
p标签再手动加 “1. 2. 3.”——破坏语义，屏幕阅读器无法识别层级，CSS 编号样式也失效
type 和 start 属性的实际取舍
浏览器对 type 的支持稳定，但它的作用仅限于视觉符号切换，不改变语义顺序。真正影响结构的是编号起点和嵌套关系。
-
type="a"适合子步骤（如主步骤用数字，子项用字母），但注意小写a和大写A在不同字体下可能显示异常 -
start="5"比手动删掉前4项更可靠，尤其在动态插入内容时能避免编号断裂 - 不要混用
type和 CSS 的list-style-type：前者是 HTML 层级控制，后者是样式层；若两者冲突，CSS 会覆盖 HTML 属性（但语义仍由ol保留）
嵌套 ol 时最容易漏掉的细节
嵌套不是“套壳”，而是构建可导航的层级结构。错误嵌套会导致大纲混乱、缩进错位、甚至部分编号不递增。
- 子
ol必须完整包裹在父级li内部，不能放在li外面或和li并列 - 嵌套后默认编号不会自动“重置”，比如外层
ol是 1–3，第三项里的子ol默认从 1 开始，不是 4 - 如果子列表需要延续父编号（如“3.1、3.2”），得用 CSS counters 实现，
type和start做不到这点 - 嵌套过深（超过三层）会影响可读性，建议用
dl替代部分场景，比如术语+解释型知识
最常被忽略的一点：编号是否连续，不取决于你写了几个 li，而取决于它们是否都在同一个 ol 的直接子级中。中间插一个 div 或 p，后续 li 就可能被浏览器当作新列表处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
