最稳妥的操作步骤HTML写法是用<ol>和<li>构建语义化有序列表，确保可访问性与机器可读性；每步用<li>包裹，支持嵌套子流程，禁用<ul>或CSS模拟编号。
用 <ol> 和 <li> 写操作步骤最稳妥
HTML 有序列表不是靠数字样式驱动的，而是语义上表达「有先后顺序的操作流程」。浏览器默认渲染为 1. 2. 3.，但真正起作用的是 <ol> 元素本身 —— 它告诉解析器“这些项必须按此顺序执行”。<li> 只负责包裹每一步内容，不需手动写数字。
常见错误是把步骤写成无序列表 <ul> 加人工编号（如 “1. 打开设置”），这会导致屏幕阅读器无法识别顺序逻辑，也破坏可访问性。
- 始终用
<ol>包裹全部步骤，不要嵌套在<div>或段落里 - 每个步骤单独一个
<li>，内部可含<p>、<code>等行内元素 - 避免在
<li>里再套<ol>，除非是子流程（如“第3步包含3个子动作”）
start 和 type 属性控制起始值与编号样式
默认从 1 开始、阿拉伯数字编号，但实际场景常需调整：比如续接上一页的步骤，或用字母/罗马数字区分层级。这时靠 start 和 type 属性即可，无需 JS 或 CSS 模拟。
注意 start 是数值（即使 type="a" 也要写 start="4"，对应 d），而 type 只接受有限值："1"、"a"、"A"、"i"、"I"。
立即学习“前端免费学习笔记（深入）”；
-
start="3"→ 列表从 3 开始计数，后续自动为 4、5… -
type="a"→ 小写字母 a. b. c.；type="A"→ 大写 A. B. C. -
type="i"→ 小写罗马数字 i. ii. iii.（注意不是 "I" 的视觉大写，而是真正的罗马序数） - 多个属性可共存：
<ol start="2" type="a">→ b. c. d. …
嵌套 <ol> 表达多级操作时，语义和缩进要一致
当某一步骤本身含多个子步骤（如“配置网络”下分“输入IP”“选择协议”“保存设置”），应嵌套一层 <ol>，而不是用缩进空格或 CSS margin-left。否则语义断裂，键盘导航或读屏软件会丢失层级关系。
嵌套后浏览器默认缩进，但关键在于 DOM 结构清晰：<li><ol><li>…</li></ol></li>。此时子 <ol> 的 type 建议换一种，比如外层用数字，内层用字母，避免混淆。
- 外层
<ol type="1">，内层用<ol type="a">或<ol type="i"> - 不要用
<ul>替代内层<ol>，即使子步骤“看似没顺序”——只要用户必须按提示逐条操作，就仍是有序逻辑 - 嵌套层级不宜超过两层，三层以上建议拆分成独立小节，否则可读性下降
别依赖 CSS counter-reset 模拟有序列表
有人用 <div> + CSS counter-increment 手动造编号，看起来一样，但这是反模式。它绕过了 HTML 语义，导致：打印时编号可能丢失、搜索引擎无法识别操作结构、辅助技术完全不可见。
现代浏览器对 <ol> 支持极好，连 IE8 都能正确渲染基础功能。真正需要定制样式（如圆点+数字混合、图标前缀）时，应优先用 CSS ::marker 伪元素，而非抛弃 <ol>。
-
<ol>是唯一原生支持跨页打印续编、无障碍导航、键盘Tab顺序的方案 - 若必须改样式，用
ol { list-style: none; }+li::marker { content: ... }，保留语义骨架 - 动态插入步骤？用 JS 操作
<ol>的appendChild()即可，编号自动更新，不用重算
最易被忽略的一点：很多人把操作指南写成纯文本段落加手动编号，以为“看着像就行”。但只要涉及用户必须按顺序执行的动作，<ol> 就不是可选项，而是语义底线 —— 它决定了这个指南能不能被机器理解、被残障用户使用、被未来工具自动提取步骤。
