适合安装流程，因其语义明确表示不可交换的线性步骤，支持原生编号、屏幕阅读器正确播报“第1步”等，自动重排序号，嵌套子步骤结构合法，而和分别缺失顺序语义与结构信息。
<ol></ol> 适合做安装流程，因为步骤天然有顺序、需编号、支持跳转和语义化。
为什么用 <ol></ol> 而不是 <ul></ul> 或 <div>
<p>安装流程本质是线性、不可跳过、强依赖前序的步骤序列。<code><ol></ol> 提供原生编号（含 start、reversed、type 属性），屏幕阅读器会读出“第1步”“第2步”，而 <ul></ul> 只能靠 CSS 模拟编号，语义丢失；<div> 则完全无结构信息，不利于 SEO 和可访问性。
<ul>
<li>编号自动管理：改顺序或删中间项时，后续编号自动重排</li>
<li>支持 <code>start="3" 从第3步开始（例如续接上一页面）
type="a" 或 type="i" 可适配技术文档常见格式<li><code>npm install
<ol></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></ol> 内，不能包 <div> 或 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> —— 否则部分旧版 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></ol> 内只能直接放 <li>，子 <ol></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></ol> 编号自动降级（如 1 → a, b），但不会继承父级 start；如果需要统一编号（如 1.1、1.2），得用 CSS counters 或 JS 动态生成——这时候就得承认：纯 HTML <ol></ol> 的能力边界到了。
