ol必须只包含li，其他内容会被浏览器“悄悄吃掉”；直接在里写段落、标题或纯文本，浏览器不报错但会移出列表，导致编号消失、缩进错乱、语义丢失。
ol必须只包含li，其他内容会被浏览器“悄悄吃掉”
直接在<ol></ol>里写段落、标题或纯文本，浏览器不会报错，但会把它们移出列表结构——编号消失、缩进错乱、语义全丢。这是最常被忽略的底层规则。
常见错误现象：<ol>
<p>第一步</p>
<li>第二步</li>
</ol> 渲染后只有“第二步”带编号，“第一步”变成普通段落，脱离列表流。
- 所有内容必须包裹在
<li>内，哪怕是一句话、一个链接或一段代码 - 若某条目含多段文字，用
<p></p>包在<li>内部，而非放在<ol></ol>里 - 嵌套列表（如子步骤）必须作为
<li>的子元素出现，不能平级写在<ol></ol>下
start属性够用就别碰CSS计数器
start是<ol></ol>原生属性，设整数就能控制起始编号，比如<ol start="100"></ol> → 100、101、102。它轻量、语义清晰、无障碍友好，90%场景下就是最优解。
容易踩的坑：start只接受整数，start="-2"合法，start="3.5"或start="A"会被忽略并回退到1；IE11及更早版本完全不支持该属性。
- 需要从非1开始编号时，优先用
start，别手写<li value="X">——它只改单个项，后续编号逻辑混乱 - 要跳号（如1、2、5、6）或非线性（如1.1、1.2），才考虑
counter-reset+counter-increment - 用CSS计数器时，
counter-reset: item 99表示第一个counter(item)显示为100，不是设成100
嵌套ol时type和start都得写在父ol上，不是li上
多级编号（如1 → a → i）靠的是<ol></ol>层级嵌套，不是靠给<li>加属性。把type="a"写在<li>上完全无效，浏览器直接忽略。
典型错误：想让第二级用小写字母，却写成<li type="a">子项</li>——结果还是数字，因为type只对<ol></ol>生效。
- 正确结构：外层
<ol start="34"></ol>，某条<li>内部嵌一个<ol type="a"></ol> - 子
<ol></ol>的start和type独立于父级，不会继承，也不受父级影响 - 如果子列表需延续父级编号（如34a、34b），那已超出HTML原生能力，必须用CSS计数器+手动
aria-posinset补语义
reversed只对decimal类型可靠，别在生产环境乱用
reversed会让编号倒着排（如3项显示为3、2、1），但它有严重限制：仅对type="1"（默认数字）生效；一旦设了type="a"或type="i"，Chrome/Firefox都会静默忽略该属性。
更麻烦的是兼容性：IE全系不支持，旧版Edge渲染异常。如果你看到倒序字母，大概率是CSS伪造的，不是原生reversed。
- 真要倒序，且必须用字母/罗马数字，老实用CSS
counter-reset反向递减 -
reversed可与start共存，例如<ol reversed start="5"></ol>→ 5、4、3、2、1 - 注意：
reversed只改编号方向，DOM顺序和屏幕阅读器播报顺序不变——它不是“反转DOM”，只是视觉倒计数
<ol></ol>的语义刚性：它不是“带数字的容器”，而是“顺序不可变”的契约。一旦混入<p></p>、硬编码数字或滥用value，表面看起来能用，背后已埋下可访问性断裂、自动化测试失败、未来维护成本翻倍的隐患。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
