有序列表用<ol>包裹<li>实现语义化流程步骤，支持type和start属性控制编号样式与起始值，可嵌套表达子流程，需兼顾可访问性与样式分离。
用 <ol> 和 <li> 搭建基础流程步骤
HTML 有序列表的核心就是 <ol>（ordered list）包裹一组 <li>（list item），浏览器默认按 1、2、3 自动编号，适合表达有先后顺序的流程。
注意：不要用 <ul> 替代，它不保证顺序语义，对屏幕阅读器和 SEO 不友好；也不要手动写“1. 启动服务”这类文本——编号交给 HTML 管理更可靠。
基础写法示例：
<ol> <li>安装 Node.js</li> <li>克隆项目仓库</li> <li>运行 <code>npm install</code></li> <li>执行 <code>npm start</code></li> </ol>
type 和 start 属性控制编号样式与起始值
默认是阿拉伯数字（1, 2, 3），但流程中可能需要字母、罗马数字或从非 1 的数字开始（比如接续上一节）。
立即学习“前端免费学习笔记（深入）”；
-
type="a"→ 小写字母（a, b, c）；type="A"→ 大写（A, B, C） -
type="i"→ 小写罗马数字（i, ii, iii）；type="I"→ 大写（I, II, III） -
start="3"强制从第 3 项开始编号（即使只有两项，也会显示为 “3.” 和 “4.”） - 多个属性可共存：
<ol type="a" start="2">→ 输出 b, c, d…
常见误用：在 CSS 中用 counter-reset 覆盖编号逻辑——没必要，原生属性已够用；滥用 value 属性给每个 <li> 设编号，易导致语义断裂和可访问性问题。
嵌套有序列表表达子流程时的层级与语义
当某一步骤本身含多步操作（如“配置环境”包含安装依赖、修改配置文件、重启服务），可用嵌套 <ol> 表达层级关系。
关键点：
- 内层
<ol>必须直接放在某个<li>内部，不能悬空或跨<li> - 浏览器会自动缩进并用不同编号格式区分层级（例如外层 1. 2.，内层 a. b.），无需额外 CSS
- 避免三层以上嵌套——可读性陡降，建议拆成独立流程块或改用描述性段落 + 关键动词强调
示例片段：
<ol>
<li>初始化项目</li>
<li>配置开发环境
<ol type="a">
<li>安装 Python 3.9+</li>
<li>创建虚拟环境</li>
<li>激活环境并安装依赖</li>
</ol>
</li>
<li>启动本地服务</li>
</ol>
可访问性与样式分离的实操提醒
屏幕阅读器依赖 <ol> 的语义识别步骤顺序，所以别用 display: none 隐藏 <li> 或用 <div> 模拟列表——这会让视障用户完全丢失流程结构。
自定义样式时注意：
- 用 CSS 的
list-style-type替代过时的type属性更灵活，但需确保 fallback（如不支持 CSS 的环境仍能读到默认编号） - 不要用
counter-increment重写编号逻辑来“炫技”，除非你明确需要跨元素计数（比如把标题也纳入流程序号） - 移动端小屏下，长流程列表容易横向溢出，建议用
overflow-x: auto包裹容器，而非强行压缩字号
真正难的是判断哪里该用有序列表、哪里该用描述性段落——不是所有带“第一步”的文本都适合 <ol>，只有当顺序不可逆、跳步会导致失败时，才值得用它。
