ol 标签原生支持有序步骤列表，语义正确且无障碍友好；应直接使用 ol+li 结构，通过 start 和 type 属性控制编号，避免手动计数或 css 模拟。
ol 标签默认就是有序步骤列表，不需要额外 hack
ol 本意就是“ordered list”，浏览器默认渲染为带数字序号的垂直列表，语义上天然适合步骤说明。只要结构正确，ol 就是步骤列表的正确选择，不是“模拟”或“凑合用”。
常见错误是套一层 div 或用 ul + 手动编号——这既破坏语义，又让屏幕阅读器无法识别步骤顺序，还增加维护成本。
- 每个步骤必须用
li直接包裹在ol内，不能嵌套其他块级容器（如div）作为直接子元素 - 不要给
li加style="counter-increment: step"这类手动计数逻辑，ol自带序号生成机制 - 如果步骤含多段文字、图片或代码块，把它们放在
li内部即可，li是块级容器，支持嵌套
修改起始编号用 start 属性，别用 CSS counter
想让步骤从 2 开始？或者跳过某步重编号？直接写 start="2" 就行。这是 HTML 原生支持的属性，兼容性好，语义清晰，且不影响辅助技术读取。
示例：
<ol start="3"> <li>保存文件</li> <li>重启服务</li> </ol>渲染结果是 “3. 保存文件”、“4. 重启服务”。
-
start只接受整数，不支持字母或罗马数字（那些靠type控制） - 避免用 CSS 的
counter-reset或counter-increment替代start，那样会断开与 DOM 序号的同步，对打印样式和语音朗读都不友好 - 若需混合类型（如主步骤用数字、子步骤用字母），应嵌套
ol，而不是强行用 CSS 模拟
type 属性控制编号样式，但别滥用
type 可设为 "1"（默认）、"a"、"A"、"i"、"I"，对应阿拉伯数字、小写/大写英文字母、小写/大写罗马数字。它影响的是视觉呈现，不改变语义顺序。
注意：这些值是 HTML 属性值，不是 CSS list-style-type 的全部取值（比如 lower-greek 在 type 中无效）。
- 用
type="a"时，序号从 a 开始，不是从当前start值映射为字母（例如start="27" type="a"不会显示 "a"，而是按字母循环到 "a"） - 若需自定义符号（如 ✅、▶️），应改用 CSS
list-style-type: none+::marker，但此时已脱离原生有序语义，仅作视觉装饰 - 移动端 Safari 对
type="i"渲染不稳定，建议优先用"1"或"a"
可访问性要点：别删掉 ol 的默认语义
屏幕阅读器会把 ol 读作“列表，共 N 项”，并告知当前项序号（如“第 2 项，重启服务”）。这个能力依赖于原生 ol 结构。
- 不要用
role="list"或aria-list覆盖原生标签，反而可能干扰读屏行为 - 避免给
ol加tabindex或onclick，步骤列表通常不是交互控件 - 如果某步需要展开详情，用
details/summary嵌在li里，而不是把整个ol变成手风琴组件
复杂步骤（比如含条件分支、并行操作）超出 ol 表达能力时，得换结构——比如用 section + 标题层级，而不是硬塞进一个 ol 里强行编号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
