正确做法是用<ol>+<li>构建步骤，禁用<p>硬编号；嵌套用子<ol>而非并列<ol>；跨节续编用start属性；多层嵌套应降级为语义分组；清样式后须补padding-left或用CSS counters。
用 <ol> 包裹步骤，别用 <p> 硬写编号
教程类内容最常犯的错，就是把“第一步”“第二步”当成普通段落写进 <p>，再手动加数字。这不仅语义错误（屏幕阅读器读不出顺序），还导致 CSS 样式失效、缩进错乱、嵌套困难。浏览器只认 <ol> + <li> 这一对组合来建立顺序逻辑。
正确做法是：每个操作步骤必须是 <li> 的直接子元素，所有 <li> 必须在同一个 <ol> 内。如果某一步里还要分小步，就在那个 <li> 里嵌套另一个 <ol> —— 不是另起一个 <ol> 放在旁边。
- ✅ 正确：
<ol><li>打开编辑器</li><li>新建文件</li></ol> - ❌ 错误：
<p>1. 打开编辑器</p><p>2. 新建文件</p> - ⚠️ 常见副作用：内容“贴着左边溢出容器”，其实是
<p>没继承列表默认 margin 和 list-style-position
type 和 start 属性不是装饰，是语义延续的关键
教程常跨章节或接续前文，比如上一节结束在第7步，本节要从第8步开始。这时候不能靠删掉前7个 <li> 或手动改数字——得用 start="8"。同理，子步骤用字母编号时，type="a" 不只是“好看”，它告诉辅助技术：“这是主步骤下的并列子项”，而非独立序列。
注意：HTML5 中 type 在嵌套时会自动降级（外层 type="1" → 内层 type="a" → 再内层 type="i"），但前提是嵌套结构合法；如果外层用了 type="A"，内层又没声明 type，浏览器仍按默认 decimal 渲染，不会自动切字母。
立即学习“前端免费学习笔记（深入）”；
-
<ol start="8">：让编号从 8 开始，后续自动为 9、10… -
<ol type="a">：仅对当前这个<ol>生效，不影响父级或兄弟级 -
reversed属性极少用于教程（倒序编号），但若真需要（如“剩余3步→2步→1步”提示），它比 JS 控制更轻量
嵌套超过两层就容易失控，优先用语义分组代替多级 <ol>
三层以上嵌套（比如 <ol>→<li>→<ol>→<li>→<ol>）会让 CSS 难以精准控制缩进、字体大小和编号对齐，也增加维护成本。实际写教程时，与其硬套四层编号，不如用 <h3> 或 <section> 切分逻辑模块，每块内部用一层 <ol>。
例如安装指南中，“配置环境”部分本身已是独立环节，就该用 <h3>配置环境</h3><ol>...</ol>，而不是把它塞进主流程的第4个 <li> 里再套一个 <ol type="i">。
- 推荐深度：主流程
<ol>→ 子任务用<ol type="a">→ 子任务内细节用<ul>或段落，不强求编号 - 视觉一致性比编号形式更重要：用户关心“下一步做什么”，不是“这行该显示罗马数字还是小写字母”
- 用开发者工具检查
<li>的 computedlist-style-position，若为outside且文字换行后缩进异常，大概率是父级<ol>缺失或嵌套错位
去掉默认样式后，padding-left 和 counter-reset 得手动补上
很多教程模板会加 list-style-type: none 来清空原生编号，改用背景图或伪元素自定义。但清空的同时也清掉了浏览器内置的 padding-left（通常 40px 左右），结果所有 <li> 贴左对齐，编号图标悬在文字外侧却没留空间。
这时候不能只靠 text-indent 或 margin-left 调，得配 padding-left 给编号区域留位。更稳妥的做法是用 CSS counters：给外层 <ol> 设 counter-reset: step，每个 <li> 用 ::before { content: counter(step) ". "; counter-increment: step; } —— 这样即使 JavaScript 动态增删项，编号也自动更新。
- 清空默认样式后必加：
padding-left: 2em（或具体像素值，匹配你的图标宽度） - 避免用
list-style-image：图片路径易出错，缩放失真，且无法像伪元素那样灵活控制颜色/大小 - 移动端要注意：某些旧版 Safari 对嵌套 counter 的支持不稳定，简单教程建议优先用
start+ 原生type
<ol> 却忘了闭合，有人清样式但没补 padding，最终渲染效果就断在某个 <li> 上。 
