start属性用于设置<ol>首个<li>的起始编号,值必须为整数(支持负数、零),后续自动递增;value仅覆盖单个<li>编号并影响后续递增;type控制样式(如a、I),需与start配合映射序列位置。

用 start 属性设置起始编号
HTML 有序列表(<ol>)默认从 1 开始编号,但实际开发中常需要从其他数字、甚至负数或字母起始。最直接的方式是使用 start 属性,它接受整数值,表示第一个 <li> 的编号。
注意:start 只影响显示编号的起始值,不影响语义或可访问性(屏幕阅读器仍按自然顺序播报)。
-
start="5"→ 第一个<li>显示为 “5.”,后续依次为 6、7… -
start="-2"→ 显示为 “-2.”、“-1.”、“0.”、“1.”…(合法但少见) - 若列表被截断(比如只渲染后半部分),用
start比手动加序号更可靠
用 value 属性覆盖单个列表项编号
当只需要个别 <li> 偏离自动计数逻辑时,给该项加 value 属性即可。它会覆盖该 <li> 的编号,并影响后续所有项的自动递增——后续项从 value + 1 开始继续编号。
常见误用:以为 value 是“绝对编号”,其实它是“重置计数器的位置”。比如:
立即学习“前端免费学习笔记(深入)”;
<ol> <li>第一项</li> <li value="10">第十项(不是“第十个”)</li> <li>第十一项</li> </ol>
渲染结果是:1. 第一项 → 10. 第十项 → 11. 第十一项
-
value只对当前<li>生效,不能用于跳过编号(如想跳过 4 直接到 5,得用两个value) - 与
start混用时,value优先级更高;第一个<li>有value,则start被忽略 - 不支持小写字母或罗马数字等类型——那些靠
type属性控制,和编号值无关
用 type 改变编号样式,但不改变编号逻辑
type 属性只负责视觉呈现格式(如 a、I、1),完全不影响编号的起始值或递增规则。它和 start/value 是正交的,可以组合使用。
-
<ol type="a" start="3">→ 渲染为 c., d., e.(不是 a., b., c.) -
<ol type="I" value="4">→ 当前项显示为 IV.,下一项自动为 V. -
type在现代 CSS 中基本被list-style-type取代,但 HTML 属性仍有效且更轻量 - 注意兼容性:
type="i"(小写罗马)在旧版 IE 中可能回退为数字,建议用 CSS 控制更稳妥
为什么不用 CSS 的 counter-reset 和 counter-increment
纯 CSS 方案看似灵活,但容易出问题:它只控制伪元素内容,无法让屏幕阅读器正确识别编号语义,也不参与 HTML 列表的原生计数逻辑。当你需要导出为 PDF、被爬虫解析,或依赖辅助技术时,CSS 计数器会失效。
- 如果只是美化(比如加括号、改颜色),用
::marker更安全 - 如果真要动态重编号(如根据数据过滤隐藏某些
<li>后保持连续编号),start+ JS 动态计算仍是首选 - CSS 计数器适合非语义化场景(如自定义侧边栏章节号),别强行套在标准
<ol>上
start、value、type 三者叠加时,浏览器实际渲染行为容易和直觉不符——尤其在嵌套列表或动态更新 DOM 后,建议始终用 DevTools 查看最终生成的 ::marker 内容验证。



















