value属性用于覆盖单个<li>的自动编号，后续项在此值基础上+1递增；仅对<ol>直接子元素生效，必须为整数，与start共存时优先级更高。
用 value 属性给单个 <li> 指定编号
value 是 <li> 的原生属性，作用是覆盖当前项的自动编号值，后续项仍按此值递增。它不改变 DOM 顺序，也不影响其他项的计数逻辑，只改“显示数字”。
常见错误现象：写成 <ol value="10">（value 不属于 <ol>）；或以为设了 value="10" 后下一项会跳到 12（实际是 11）。
-
value必须是整数，非数字字符串（如"10a"）会被忽略，退化为默认序号 - 负数和零合法：
<li value="-5">...显示为 “-5.”，下一项是 “-4.” - 多个
value可混用：<li value="100">...</li><li value="20">...</li>→ 显示 “100.”、“20.”、“21.” - 与
start共存时，value优先级更高：外层start="5"，但第一个<li value="99">就显示 “99.”
为什么不用 CSS counter 替代 value
直接用 value 更轻量、语义清晰、无障碍友好——屏幕阅读器会如实播报该数字，且无需额外样式或 JS。
而 CSS counter 需要 counter-reset + counter-increment + ::before + content 四步配合，一旦漏掉任一环，编号就消失或错乱；更麻烦的是，它生成的内容无法被读屏软件可靠识别为“列表序号”，尤其在嵌套或动态插入时容易脱节。
立即学习“前端免费学习笔记（深入）”；
适用场景对比：
- 只需个别项“跳号”或“重置起点” → 用
value - 需要前缀（如 “Step 1:”）、多级嵌套编号（如 “2.3.1”）、或跨容器计数 → 才上 CSS counter
- 想隐藏某几项编号（如只显前 5 项）→ 用
li:nth-of-type(n + 6) { list-style-type: none; }，不是value
value 在嵌套 <ol> 中是否生效
生效，但仅作用于所在层级的 <li>。子 <ol> 的编号完全独立，不受父级 value 影响。
例如：
<ol>
<li value="10">主项 10</li>
<li>主项 11
<ol>
<li>子项 1</li>
<li value="99">子项 99</li>
</ol>
</li>
</ol>
渲染结果是：10. 主项 10；11. 主项 11；然后子列表单独显示 1. 子项 1；99. 子项 99；100.（隐式）。
注意：value 不会“传染”到子列表，也不触发父列表重新计数——这是它和 start 最关键的区别之一。
容易被忽略的兼容性细节
value 是 HTML5 标准属性，所有现代浏览器（Chrome/Firefox/Safari/Edge）及 IE8+ 均支持，但有两点易踩坑：
- 若
<li>内部有块级元素（如<div>），某些旧版 Safari 可能忽略value，建议保持<li>直接包裹内联内容 - 服务端渲染或模板引擎（如 Handlebars、Jinja）若对属性名做转义，可能把
value="10"渲染成value="10"，这本身合法，但若中间混入 JS 动态操作，要注意引号匹配 - 当用 JavaScript 动态插入带
value的<li>时，需确保插入后浏览器重绘，部分低配安卓 WebView 可能延迟响应，可强制el.style.display = 'none'; el.offsetHeight; el.style.display = '';触发重排
最稳妥的做法：只在静态 HTML 或 SSR 场景中使用 value，避免在频繁增删的交互列表里依赖它做核心逻辑。
