应使用标签编写产品使用指南，因其提供原生顺序语义，确保屏幕阅读器正确播报步骤编号、搜索引擎识别操作流程，并支持css精准控制编号样式；嵌套时须将子完整置于父内，层级不超过两层。
<ol></ol> 是制作产品使用指南最语义正确、可访问性最强的 HTML 标签，不是“能用”，而是“该用”——它告诉浏览器、屏幕阅读器和搜索引擎：这些步骤有严格先后顺序，跳步或乱序会出问题。
为什么必须用 <ol></ol> 而不是 <ul></ul> 或手写数字
产品使用指南本质是线性操作流程（比如“先插电源，再开机，最后联网”），<ol></ol> 提供原生顺序语义，而 <ul></ul> 表示并列关系，手写数字（如“1. 开箱”）则丢失结构信息。后果包括：
- 屏幕阅读器无法识别步骤逻辑，可能读成“列表，共 5 项”，不报编号
- 搜索引擎难以判断内容为操作流程，影响 FAQ 类页面的富文本摘要展示
- 后续用 CSS counters 或 JS 做自动跳转/进度追踪时，缺乏 DOM 层级锚点
<ol></ol> 的基础写法与常见错误
正确写法只需两层标签：<ol></ol> 包裹多个 <li>，每个 <li> 内放完整步骤描述：
<ol> <li>撕开包装盒顶部封口，取出主机与电源适配器。</li> <li>将电源适配器插入主机背部 DC 接口，另一端接入插座。</li> <li>长按机身右侧电源键 3 秒，直到指示灯常亮。</li> </ol>
容易踩的坑：
- 在
<li>外面手动加数字或括号（如<p>1. 开箱...</p>），破坏语义结构 - 把整个步骤拆成多段
<p></p>塞进一个<li>，导致单步信息碎片化 - 误用
start属性试图“跳过前几步”，比如<ol start="3"></ol>—— 这会让第 1 个<li>显示为 “3.”，但语义上仍是第 1 步，易误导用户
需要自定义编号样式时，优先用 CSS 而非 HTML 属性
type 和 start 是 HTML 属性，但它们已被现代实践弱化；CSS 的 list-style-type 更可控、更兼容：
- 想用大写字母？写
ol { list-style-type: upper-alpha; }，而不是<ol type="A"></ol> - 需要罗马数字？用
lower-roman或upper-roman，CSS 支持更一致 - 若要完全隐藏编号只留视觉图标（如 → 或 ▶），用
list-style: none+::before伪元素，避免 HTML 层面丢失顺序含义
注意：reversed 属性极少用于产品指南（倒序步骤违反直觉），基本可忽略。
嵌套步骤怎么处理才合理
真实产品指南中常出现“子步骤”，比如“联网设置”里包含 Wi-Fi 名称输入、密码填写、确认按钮点击。这时应嵌套 <ol></ol>，而非混用 <ul></ul>：
<ol>
<li>进入设置菜单：按遥控器「Menu」键 → 选择「网络」→「Wi-Fi 设置」。</li>
<li>配置无线连接：
<ol>
<li>从列表中选择您的路由器名称（SSID）。</li>
<li>输入 Wi-Fi 密码（区分大小写）。</li>
<li>点击「连接」，等待状态变为「已连接」。</li>
</ol>
</li>
</ol>
关键点：
- 内层
<ol></ol>必须完整包裹在某个外层<li>内，不能悬空 - 嵌套层级不宜超过 2 层，否则认知负荷过高；三层以上建议拆分为独立小节
- 不要为了“看起来整齐”而用
<div> 模拟列表结构——那等于放弃语义和可访问性底线 <p>真正难的不是写出嵌套，而是判断哪一步该拆、哪一步该合：用户执行时是否必须按此顺序完成子动作？如果是，就该嵌套；如果只是补充说明（如“提示：密码至少 8 位”），就该用 <code><details></details>或旁注，别塞进<li>。
