html有序列表用start属性控制起始数字，支持正负整数；type属性切换编号样式（如1/a/i）；复杂场景用css counter-increment；注意list-style、flex布局及js动态修改的影响。
用 start 属性控制有序列表起始数字
HTML 的 <ol></ol> 默认从 1 开始编号，但实际场景中常需要从其他数字（比如 5、100）或跳过前几项开始。这时直接在 <ol></ol> 标签上加 start 属性最简单可靠：
-
start接整数，支持正负值（如start="-2"），但浏览器通常只渲染非负序号为可见数字 - 它不影响内部
<li>的语义或 DOM 结构，只是视觉和 ARIA 可访问性序号的起点 - 注意：CSS 的
counter-reset也能改序号，但会绕过原生语义，屏幕阅读器可能不识别，优先用start
用 type 属性切换序号样式
<ol></ol> 的 type 决定数字/字母/罗马数字等格式，和 start 可组合使用：
-
type="1"（默认）：阿拉伯数字（1, 2, 3…） -
type="a"：小写字母（a, b, c…），start="3"会显示为c -
type="I"：大写罗马数字（I, II, III…），start="2"显示为II -
type值区分大小写，"i"和"I"效果不同；"A"是大写英文字母
用 CSS counter-increment 精确控制复杂序号逻辑
当需要跨多个列表连续编号、嵌套时重置、或插入非标准前缀（如 “Step 1”、“Part B-3”），纯 HTML 属性不够用，得靠 CSS 计数器：
- 给
<ol></ol>设counter-reset: step;，再对每个<li>用counter-increment: step; - 用
::before伪元素结合content: "Step " counter(step);插入自定义文本 - 避免在
<li>里直接写序号文字——这会破坏可访问性和复制粘贴行为 - 注意：CSS 计数器不改变
<ol></ol>的语义层级，辅助技术仍依赖原生start和type做判断
常见坑：序号错乱或不显示的原因
序号异常往往不是代码写错，而是被其他样式或结构干扰：
-
<li>被设了list-style: none且没补::before，序号就彻底消失 - 父容器有
display: flex或display: grid，可能让<ol></ol>的计数器失效，需显式重置counter-reset - 动态插入
<li>后没调用olElement.setAttribute('start', newStart)，JS 修改 DOM 不会自动更新原生序号 - 用
reversed属性时，start表示的是最大值（如<ol reversed start="5"></ol>渲染为 5, 4, 3, 2, 1），容易误解
序号看似简单，但混用 HTML 属性、CSS 计数器和 JS 操作时，语义一致性最容易被忽略——尤其当内容要被爬虫或读屏软件解析时，start 和 type 仍是不可替代的底线保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
