是展示步骤最贴切的语义化标签，因其明确传达顺序执行语义，支持自动编号、无障碍访问及嵌套结构；手动用加数字或滥用css会破坏可访问性与维护性。
<ol></ol> 是展示使用说明最贴切的语义化标签——它告诉浏览器和辅助技术“这些步骤必须按顺序执行”，而不是靠人眼数数字或手动加 1.、2. 等硬编码。
为什么不能用 <p></p> 或手动编号写步骤
常见错误是把步骤写成这样：
<p>1. 打开电源</p><br><p>2. 连接 USB</p><br><p>3. 启动软件</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
问题在于：<p></p> 没有顺序语义，屏幕阅读器无法识别这是步骤序列；编号是纯文本，无法随内容增删自动重排；CSS 无法统一控制编号样式或位置。一旦漏掉某步或调整顺序，就得全手动改数字。
<ol></ol> 基础用法与必要属性
标准结构只需三样东西：<ol></ol> 容器、每个步骤一个 <li>、不写编号数字。
-
start属性用于非从 1 开始的场景（比如说明书续接上一节）：<ol start="5"></ol> -
reversed属性适用于倒计时类步骤（如“3 秒后关机”），但实际极少用，慎加 - 避免用已废弃的
compact属性，现代浏览器基本忽略它
嵌套子步骤：必须用 <li> 包裹再嵌 <ol></ol>
当某一步骤内部还有细分动作（例如“配置网络”含 IP、DNS、网关三项），必须把子列表放在父 <li> 内部，而不是平级写两个 <ol></ol>：
<ol> <br><li>连接设备</li> <br><li>配置网络<br><ol type="a"> <br><li>设置 IP 地址</li> <br><li>填写 DNS</li> <br><li>确认网关</li> <br> </ol> <br> </li> <br> </ol>
关键点：
- 子
<ol></ol>必须完整写在某个<li>的开始与结束标签之间 - 外层编号（1. 2.）和内层编号（a. b. c.）由浏览器自动关联，无需额外 JS
- 用
type="a"或type="i"时，仅影响显示，不影响语义层级
CSS 样式微调最容易被忽略的两个坑
默认缩进和编号对齐经常让文字“挤出容器”或“悬在左边”。真正起作用的是这两个 CSS 属性：
-
list-style-position: inside—— 把编号拉进文本框内，避免长文本换行后第二行顶到左边界 -
padding-left: 0配合margin-left: 1.5em—— 浏览器默认给<ol></ol>加了大量 padding，直接设list-style: none又会丢掉语义，应优先调整间距而非删除 - 不要用
float或display: inline-block强行对齐编号，会破坏可访问性流顺序
复杂点在于：嵌套层级越深，各浏览器对 list-style-type 的默认 fallback 不一致（比如 Safari 对 type="i" 渲染为小写罗马，Chrome 可能回退成数字），若需强一致，建议用 CSS counters 替代原生 type 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
