正确做法是主步骤用<ol>，子步骤嵌套在对应<li>内再用<ol>，确保语义清晰、层级明确；禁用手动编号，用CSS控制编号类型与缩进；可结合<details><summary>实现无JS折叠展开。
用 HTML 制作步骤条引导的多级列表结构，核心是语义正确、层级清晰、视觉可读。关键不是堆砌标签，而是让每层步骤都有明确顺序和归属关系——主步骤用 <ol>，子步骤嵌套在对应项内，也用 <ol>，不能混用 <ul>。
主步骤必须用 <ol>，不能手动写“1.”“2.”
浏览器和屏幕阅读器靠 <ol> 识别顺序逻辑。手动编号（比如写“① 准备材料”）会丢失语义，对无障碍访问不友好，也无法用 CSS 自动重编号或倒序。
- ✅ 正确：
<ol><li>准备材料</li><li>开始烹饪</li></ol> - ❌ 错误：
<div>1. 准备材料</div><div>2. 开始烹饪</div>
子步骤嵌套在对应 <li> 内部，再用 <ol>
二级步骤不是并列项，而是对某一步的细化说明。必须放在父级 <li> 标签内部，再包裹一层 <ol>，这样语义上才构成“步骤下的步骤”。
- 结构示例：
<ol><br> <li>准备食材<br> <ol><br> <li>洗净青菜</li><br> <li>切好葱姜</li><br> </ol><br> </li><br> <li>热锅下油...</li><br> </ol> - 注意：嵌套的 <ol> 不需要加 id 或 class 才能生效，只要位置正确，浏览器自动识别层级
用 CSS 控制编号样式与缩进，保持视觉一致
默认数字编号可能不够直观，可用 CSS 统一调整。重点控制两件事：编号类型（如 1. → a. → i.）和缩进距离，让多级关系一目了然。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
ol { list-style-type: decimal; }<br> ol ol { list-style-type: lower-alpha; }<br> ol ol ol { list-style-type: lower-roman; }<br> li { margin-left: 1.5em; } - 避免用
padding-left替代margin-left，否则编号可能错位 - 如需去掉编号只留缩进，用
list-style: none，但务必保留 <ol> 标签——语义不能丢
需要展开/收起交互？用 <details> + <summary> 轻量实现
如果某一级步骤内容较多（比如“注意事项”“常见问题”），想默认折叠，直接在对应 <li> 内用 <details> 包裹子内容，无需 JS。
- 示例：
<li>调味<br> <details><br> <summary>点击查看详细配比</summary><br> <ol><br> <li>盐：3g</li><br> <li>酱油：10ml</li><br> </ol><br> </details><br> </li> - <summary> 文字自带小箭头，点击自动展开，兼容性好（Chrome/Firefox/Safari/Edge 均支持）
