start属性指定首个列表项显示的数字而非跳过项数；reversed仅反转显示顺序而不改变DOM结构；value可手动设置单个li编号，后续项自动递增；复杂编号应使用CSS counter。

start属性不是“从第几个开始”，而是“第一个显示几”

很多人以为 start="5" 是跳过前4项、从第5项开始渲染，其实它只控制第一项的显示数字。浏览器仍按顺序渲染所有

，只是把第一个标为“5.”，第二个自动变成“6.”，依此类推。

常见错误现象：写

5. A
6. B

，结果看到的是“5. A”“6. B”，而不是“1. A”“2. B”加一个偏移量。

• start 值必须是整数（正负都行），不支持字母或罗马数字直接赋值；想从字母“c”开始，得用 type="a" start="3"
• 和 type 配合时，start 指的是该序列中的位置索引：比如 type="I" start="2" → 第一项显示 “II”，不是 “2”
• 动态插入新
• 时，start 不会重算；新增项仍按原逻辑递增，不会自动对齐“当前最大序号+1”

reversed 属性只改显示顺序，不改语义或 DOM 顺序

reversed 是布尔属性，存在即生效，写 reversed 或 reversed="reversed" 效果一样。它让浏览器倒着显示编号：3→2→1，但

在 DOM 中仍是正序排列，焦点顺序、屏幕阅读器读取顺序也保持不变。

容易踩的坑：

• 和 start 一起用时，起始值仍是“第一个显示的数字”：比如
  显示为 “5.”“4.”“3.”，不是 “5.”“4.”“3.” 再加个 “2.”“1.” 后自动截断
• 它不改变列表项的语义权重——别指望靠它实现“最新在前”的逻辑排序；真要倒序数据，得在 JS 里反转数组或后端调整顺序
• 在 XHTML 或严格校验场景下，必须写成 reversed="reversed"，不能只写 reversed

value 属性能手动指定某一项编号，但后续项会接着算

value 是

的属性，不是

的。它只影响当前这一项的显示编号，之后的

会在此基础上 +1 继续递增，不管前面有没有其他 value。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

示例：

10. A
11. B
5. C
6. D

渲染结果是：10. A → 11. B → 5. C → 6. D。

• value 只作用于当前
• ，不影响前面或后面的起始逻辑
• 它和 start 共存时，start 仅对第一个无 value 的
• 生效
• 不要用 value 来“修复”编号错乱——如果编号乱了，大概率是结构或属性用错了，不是靠打补丁能解决的

CSS 的 counter-* 比 HTML 属性更灵活，但也更难调试

当需要“第2章-3节”“附录A-ii”这类嵌套或混合编号时，start 和 reversed 就不够用了。此时得用 CSS 的 counter-reset 和 counter-increment。

关键点：

• counter-reset 初始化计数器，可设初始值；counter-increment 每次触发增加，支持步长
• 它不依赖 HTML 属性，完全由 CSS 控制，所以可以跨元素、跨层级联动
• 但调试困难：浏览器开发者工具里看不到计数器实时值，出问题往往只能靠 console 打印或反复试
• 可访问性风险：纯 CSS 编号可能不被所有屏幕阅读器识别，关键序号建议仍保留在 HTML 结构中（如用 aria-label 辅助）

真正复杂的编号逻辑，HTML 属性只是起点，不是终点。别在 start 和 reversed 上硬扛多层嵌套需求。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！