<ol>适合安装流程，因其语义明确表示不可交换的线性步骤，支持原生编号、屏幕阅读器正确播报“第1步”等，自动重排序号，嵌套子步骤结构合法，而<ul>和<div>分别缺失顺序语义与结构信息。
<ol> 适合做安装流程，因为步骤天然有顺序、需编号、支持跳转和语义化。
为什么用 <ol> 而不是 <ul> 或 <div>
安装流程本质是线性、不可跳过、强依赖前序的步骤序列。<ol> 提供原生编号（含 start、reversed、type 属性），屏幕阅读器会读出“第1步”“第2步”，而 <ul> 只能靠 CSS 模拟编号，语义丢失；<div> 则完全无结构信息，不利于 SEO 和可访问性。
- 编号自动管理：改顺序或删中间项时，后续编号自动重排
- 支持
start="3"从第3步开始（例如续接上一页面） - 用
type="a"或type="i"可适配技术文档常见格式 - 配合
<li><code>npm install</code></li>等嵌套，代码块语义清晰
<ol> 安装流程的最小可用写法
别加多余属性，先跑通结构。浏览器默认用阿拉伯数字，足够表达步骤关系：
<ol> <li>克隆仓库：<code>git clone https://example.com/repo.git</code></li> <li>进入目录：<code>cd repo</code></li> <li>安装依赖：<code>npm install</code></li> <li>启动开发服务器：<code>npm run dev</code></li> </ol>
注意：<li> 必须直接在 <ol> 内，不能包 <div> 或 <p> —— 否则部分旧版 Safari 会忽略编号。
立即学习“前端免费学习笔记（深入）”；
CSS 控制编号样式时的三个易错点
用 list-style-type 改编号类型没问题，但容易踩坑：
- 不要混用 HTML
type属性和 CSSlist-style-type：两者冲突时，CSS 优先级更高，但语义层已混乱 -
list-style-position: inside会让编号进内容流，导致文本换行错位；生产环境建议保持默认outside，靠padding-left微调缩进 - 若需自定义图标（如 ✅ ▶️），别用
list-style-image—— 它不支持缩放、对齐难；改用::marker伪元素（Chrome 89+ / Firefox 86+ 支持）：ol li::marker { content: "▶ "; color: #007bff; }
多级安装流程怎么嵌套？
真实安装流程常含子步骤（比如“安装依赖”下分 Node.js 版本检查、pnpm 替代等）。正确嵌套只有一条规则：<ol> 内只能直接放 <li>，子 <ol> 必须放在某个 <li> 里面：
<ol>
<li>环境准备
<ol>
<li>确认 Node.js ≥ 18.17.0</li>
<li>推荐使用 pnpm：<code>npm install -g pnpm</code></li>
</ol>
</li>
<li>安装项目依赖：<code>pnpm install</code></li>
</ol>
嵌套后，子 <ol> 编号自动降级（如 1 → a, b），但不会继承父级 start；如果需要统一编号（如 1.1、1.2），得用 CSS counters 或 JS 动态生成——这时候就得承认：纯 HTML <ol> 的能力边界到了。
