HTML有序列表应使用<ol>包裹步骤，浏览器自动编号；仅允许<li>子元素，支持type和start属性定制样式与起始值；避免CSS伪元素重编号或混用无序列表，分支逻辑需独立<ol>，动态显示用aria-hidden而非删除DOM。
用 <ol> 标签包裹步骤，浏览器自动编号
HTML 有序列表的核心就是 <ol> 元素，它默认按 1、2、3… 顺序渲染子项。不需要手动写数字，也不依赖 CSS 计数器——只要每个步骤用 <li> 包裹，浏览器就自动处理序号生成和更新。
常见错误是把步骤写成普通段落或无序列表，导致语义丢失、屏幕阅读器无法识别操作顺序，也失去后续通过 reversed 或 start 属性调整序号的灵活性。
-
<ol>必须只包含<li>（或脚本生成的内容），不能直接放文本 - 嵌套步骤时，可在某个
<li>内部再套一层<ol> - 避免用
<div>模拟序号（如 “1. 点击按钮”），这会让语义断裂且不利于可访问性
type 和 start 属性控制编号样式与起始值
默认编号是阿拉伯数字，但实际场景中可能需要字母、罗马数字，或从非 1 的数字开始（比如续接上一页的第 5 步）。这时靠 type 和 start 就够用，无需 JS 或 CSS 干预。
注意：HTML5 中 type 的合法值只有 "1"（数字）、"a"（小写字母）、"A"（大写字母）、"i"（小写罗马）、"I"（大写罗马）；其他值（如 "circle"）已被废弃，不要混用 CSS 的 list-style-type。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<ol start="3">→ 第一项显示为 “3.” -
<ol type="a">→ 显示为 “a. b. c.” -
<ol type="I" start="2">→ 显示为 “II. III. IV.”
避免用 CSS 覆盖默认序号，除非有强定制需求
用 counter-reset + ::before 手动实现编号，看似灵活，实则绕过 HTML 语义、增加维护成本，且容易在打印、高对比度模式或辅助技术下失效。
真正需要定制样式（比如带背景色的圆角序号）时，应优先用 list-style: none 隐藏原生序号，再用伪元素仅装饰视觉，同时保留 <ol><li> 结构供语义和逻辑使用。
- 纯视觉调整（颜色、间距、字体大小）直接作用于
ol li即可 - 若必须重绘序号，请确保
aria-label或data-attr同步暴露逻辑序号，供自动化工具读取 - 移动端缩放时，CSS 生成的序号可能错位，原生序号更稳
多步骤流程中，别把条件分支塞进同一 <ol>
有序列表表达的是线性、确定的操作序列。如果某一步要根据用户选择跳转到不同后续步骤（比如“若登录成功，执行 A；否则执行 B”），强行塞进一个 <ol> 会破坏顺序语义，也让 JS 判断逻辑变复杂。
此时更合理的做法是：主流程用 <ol>，分支用独立的 <ol> 或 <details> 包裹，并通过文字明确标注触发条件。
- 错误示例：
<li>点击提交</li><li>如果弹窗出现 → <ol><li>点确定</li></ol> 否则 → <ol><li>刷新页面</li></ol></li> - 正确做法：主
<ol>到“点击提交”为止，后续分支各自用新<ol>，并加说明文字前缀 - JS 动态控制显示时，用
aria-hidden配合display: none，别删 DOM
<ol> 的原生支持已经足够健壮，多数定制需求其实是误判了问题本质。 
