html中步骤列表必须用包裹，因只接受为直接子元素；内可嵌套任意内容，type属性控制编号样式（推荐type="1"/"a"/"i"），start属性用于接续编号，reversed实现倒序，css自定义需兼顾可访问性。
用 <ol></ol> 写步骤必须包裹 <li>
HTML 里没有“步骤列表”这个独立标签，<ol></ol> 就是专门干这事的——但很多人直接往 <ol></ol> 里塞段落或换行，结果编号消失或错位。浏览器只认 <li> 为合法子元素，其他内容（比如 <p></p>、<div>、甚至纯文本）若不在 <code><li> 里，会被自动移到列表外，导致序号断开或样式失效。
正确写法只有一条铁律：<ol></ol> 的直接子节点只能是 <li>，每个步骤一条 <li>：
<ol> <li>准备工具：螺丝刀、万用表</li> <li>断开电源，确认无电压</li> <li>拆卸外壳，注意卡扣位置</li> </ol>
- 别写成
<ol><p>第一步...</p></ol>—— 编号会丢 -
<li>内部可以嵌套任意内容：链接、图片、<strong></strong>、甚至另一个<ol></ol>（多级步骤） - 空
<li>会导致编号占位但无内容，视觉上像漏了一步
type 属性控制编号样式，但别混用大小写罗马数字
步骤文档常需字母或罗马数字编号，type 是最简方案。但它有隐性限制：浏览器对 i 和 I 的渲染逻辑不一致，尤其在旧版 Safari 或某些安卓 WebView 中，type="i" 可能被降级为 type="1"，而 type="I" 更稳定。
-
type="1"：默认，阿拉伯数字（推荐用于技术文档、操作手册） -
type="A"：大写字母（适合章节标题，如“A. 安装”、“B. 配置”） -
type="I"：大写罗马数字（较安全，type="i"易出兼容问题） - 避免
type="a"或type="i"用于正式交付文档——小写形式在部分环境显示为问号或方块
start 用来接续前文，不是重置计数器
当步骤跨多个 HTML 片段（比如分页文章、Tab 切换内容），用 start 比 JS 动态改序号更可靠。但它不是“从 X 开始重新编号”，而是“让第一个 <li> 显示为 X，后续仍按自然顺序递增”。
例如：
<ol start="4"> <li>检查日志输出</li> <li>重启服务进程</li> </ol>
实际显示为 “4. 检查日志输出”、“5. 重启服务进程”。
- 别用
start="0"—— 多数浏览器会转成 1，语义混乱 - 若需倒序（如“第三步 → 第二步 → 第一步”），用
reversed属性，配合start精确控制起点 -
start值必须是整数，传字符串如start="5"会被强制转为数字，但写成start="five"会失效回退到 1
CSS 替代 type 更可控，但别忽略可访问性
当需要自定义编号颜色、字体或添加图标前缀（如 “▶ 1.”），CSS 的 counter-reset/counter-increment 比 HTML type 更灵活。但盲人用户依赖屏幕阅读器读取原生 <ol></ol> 的序号语义，纯 CSS 编号可能被跳过。
- 基础增强写法（保留语义）：
ol { list-style-type: none; }<br>ol li::before { content: counter(step) ". "; counter-increment: step; } - 如果用
list-style-type: lower-alpha，等价于type="a"，仍有兼容风险 - 真正要隐藏原生编号又保持可访问性？加
aria-label手动补全，例如<li aria-label="步骤 7：验证证书">...</li>
步骤类内容的核心是顺序不可错乱，<ol></ol> 的语义价值远大于视觉样式——哪怕编号看起来“不够酷”，也比用 <div> + 手动数字更可靠。</div>
