正确做法是主步骤用，子步骤嵌套在对应内再用，确保语义清晰、层级明确；禁用手动编号，用css控制编号类型与缩进；可结合实现无js折叠展开。

用 HTML 制作步骤条引导的多级列表结构，核心是语义正确、层级清晰、视觉可读。关键不是堆砌标签，而是让每层步骤都有明确顺序和归属关系——主步骤用

，子步骤嵌套在对应项内，也用

，不能混用

。

主步骤必须用

，不能手动写“1.”“2.”

浏览器和屏幕阅读器靠

识别顺序逻辑。手动编号（比如写“① 准备材料”）会丢失语义，对无障碍访问不友好，也无法用 CSS 自动重编号或倒序。

• ✅ 正确：<ol> <li>准备材料</li> <li>开始烹饪</li> </ol>
• ❌ 错误：<div>1. 准备材料</div> <div>2. 开始烹饪</div>

子步骤嵌套在对应

内部，再用

二级步骤不是并列项，而是对某一步的细化说明。必须放在父级


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
1. 标签内部，再包裹一层
   ，这样语义上才构成“步骤下的步骤”。
   • 结构示例：
     

     <ol>
     <br><li>准备食材<br><ol>
     <br><li>洗净青菜</li>
     <br><li>切好葱姜</li>
     <br>
     </ol>
     <br>
     </li>
     <br><li>热锅下油...</li>
     <br>
     </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，但务必保留
     标签——语义不能丢

   需要展开/收起交互？用

   +

   轻量实现

   如果某一级步骤内容较多（比如“注意事项”“常见问题”），想默认折叠，直接在对应

2. 内用
   包裹子内容，无需 JS。

   • 示例：
     

   • 调味
     
     
     

     点击查看详细配比

     
     

     
     
     1. 盐：3g
     
     
     2. 酱油：10ml
     
     

     
     
     
     
3. 文字自带小箭头，点击自动展开，兼容性好（Chrome/Firefox/Safari/Edge 均支持）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！