value属性仅在的直接子元素li中生效，强制设定当前项编号为指定整数，后续项无条件+1递增，且只接受纯整数字符串。
用 value 属性直接设置单个 li 的编号
HTML 允许你为某个具体列表项强制指定编号，后续项仍按规则自动递增。关键就是 value 属性，它只作用于所在 li 元素，不影响其他项。
常见错误现象：写成 <ol value="100"></ol> —— value 不是 ol 的合法属性，浏览器会忽略；或者在多个 li 上都设相同 value，结果编号不连续、逻辑断裂。
-
value必须是整数（如100、-5），不能是字母或罗马数字 - 设了
value="100"的li，下一项即使没设value，也会显示101 - 如果前一个
li没设value，而第二个设了value="200"，那么它会覆盖默认递增逻辑，直接跳到 200 - 配合
start使用时，value优先级更高：例如<ol start="10"> <li>A</li> <li value="50">B</li> </ol>，B 显示为 50，不是 11
为什么不用 CSS counter 替代 value
value 是语义化原生方案，适合静态内容中「某一项必须是 X」的明确需求；CSS counter 更灵活，但属于表现层控制，无法传达真实序号语义（比如屏幕阅读器不会读出伪元素生成的编号）。
使用场景差异：
- 需要 SEO 或无障碍支持 → 用
value（浏览器和读屏软件能识别真实数值） - 要加前缀如 “Step 1.”、“第 一 条” → 必须用 CSS
::before + counter() - 编号需依赖 JS 动态计算或条件跳变 →
value难以维护，应交由 JS 设置属性或用 CSS counter 配合数据属性 - 嵌套列表中每层独立计数 →
value无法跨层级管理，必须用counter-reset/counter-increment
value 在不同编号类型下的行为
value 只接受数字，但它在 type="A" 或 type="i" 的 ol 中依然有效 —— 浏览器会把数字转成对应格式显示，而不是报错或回退。
例如：
<ol type="A"> <li value="1">First</li> <li value="3">Third</li> <li>Fourth</li> </ol>
渲染结果是：
A. First
C. Third
D. Fourth
注意点：
-
value="0"在type="a"下显示为a（即第 1 个小写字母），因为字母序列从 1 开始映射 -
value="-1"会导致显示异常（如空或符号乱码），应避免负数 - 大写罗马数字对大数值支持有限（
value="4000"可能显示为MMMM或截断），实际项目中慎用于超大编号
容易被忽略的兼容性与结构陷阱
value 是 HTML5 标准属性，所有现代浏览器都支持，但它的生效前提是结构正确 —— 尤其容易栽在标签闭合和嵌套上。
典型翻车点：
- 忘记闭合
li：写成<ol> <li value="10">A</li> <li value="20">B</li> </ol>，第二个li实际被解析为第一个的子内容，value失效 - 在
li内部嵌套div后遗漏闭合：导致后续li被吞进前一项，value完全不触发 - 用 Vue/React 渲染时，动态 key 或条件渲染未同步更新
value，造成视觉编号与 DOM 属性不一致 - W3C 验证器会警告：若
value值远大于列表长度（如 100 项列表里设value="999"），虽不报错，但暗示逻辑可疑
真正难处理的从来不是怎么写 value，而是当它“看起来没生效”时，得先确认 DOM 结构是否干净、有没有被框架或样式意外干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
