的value属性仅在内有效，必须为正整数，否则被忽略或强制转为1；中无效；复杂场景应使用css counter或data-*属性替代。
HTML中<li>的value属性只对有序列表<ol></ol>内有效
直接给<li>加value属性，但没包在<ol></ol>里——浏览器会忽略它。这是最常见的误解来源。value不是<li>的通用属性，而是<ol></ol>上下文下的计数控制机制。
正确用法必须满足两个条件：父容器是<ol></ol>，且value值为正整数（非字符串、不支持小数或负数）。
-
<ol><li value="3">第三项</li></ol>→ 渲染为“3. 第三项” -
<ul><li value="3">第三项</li></ul>→value被完全忽略，仍按无序符号显示 - 若
<ol></ol>已有start属性（如start="5"），后续<li value="7">会从7开始重新计数，覆盖start
value设成非数字或负数会发生什么
浏览器不会报错，但行为不可靠：value="0"、value="-2"、value="abc"均被当作1处理（部分浏览器可能跳过或重置计数）。W3C规范明确要求value为“有效的整数”，实际解析时会强制转为整数，失败则退回到默认序列。
-
<ol> <li value="0">A</li> <li value="abc">B</li> </ol>→ 显示为“1. A”、“2. B” -
<ol><li value="2.5">X</li></ol>→ 解析为2，但某些旧版IE可能渲染异常 - 想实现字母或罗马数字编号？用
type属性（如type="A"或type="i"），而非value
用CSS counter替代value更灵活
当需要动态值、非整数、嵌套计数或跨元素联动时，原生value力不从心。CSS counter()能绕过HTML限制，且支持任意内容拼接。
ol.custom {
counter-reset: item;
}
ol.custom li {
list-style: none;
}
ol.custom li::before {
counter-increment: item 2; /* 每次+2 */
content: "第" counter(item) "条：";
}
-
counter-increment可设步长、多个计数器、甚至负值 -
content里能混入文字、符号、attr()读取data-*属性 - 不依赖
<ol></ol>结构，<div>或<code><section></section>也能用React/Vue等框架里别直接写
value属性JSX或模板语法中，
value容易和表单控件的value属性混淆，且框架可能对非标准属性做特殊处理（如Vue 3中未声明的prop会被过滤）。更稳妥的做法是用data-value存逻辑值，再用CSS或JS控制显示。- 错误写法：
<li value="{dynamicNum}">...</li>→ 可能被忽略或触发警告 - 推荐写法：
<li data-value="{dynamicNum}" classname="custom-li">...</li>，配合CSScontent: attr(data-value) - 若需服务端渲染一致性，优先用
<ol start="..."></ol>+ 纯静态value，避免运行时差异
实际项目里，
value只适合简单线性编号调整；一旦涉及动态、样式定制或跨框架协作，CSS counter或JS生成才是更可控的选择。 - 错误写法：
