ol标签是语义化有序列表，必须用li作为直接子元素；错误使用会导致屏幕阅读器失效、编号错乱；应避免CSS重置list-style、flex布局干扰，优先用CSS counter定制编号，嵌套需合法且条件分支须拆分。
ol 标签不是“加数字的视觉技巧”，而是告诉浏览器和辅助技术：“这些步骤必须按顺序执行”。用错地方，屏幕阅读器读不出第几步，JS 动态增删项时编号还会错乱。
为什么ol里直接写文字会不显示编号
最常见原因是 CSS 覆盖了默认行为。比如重置样式表里写了 ol { list-style: none; }，或者父容器用了 display: flex 导致 ol 失去块级上下文。
- 检查开发者工具中
ol元素的list-style-type计算值是否为decimal - 若用了
flex或grid布局，需给li显式设display: list-item，否则编号不渲染 - 别只清
list-style就完事——padding-left还在，缩进可能错位；要同步设padding-left: 0或margin-inline-start: 0
start 和 type 属性还能不能用
能用，但不推荐。HTML5 规范已将它们标记为“过时（obsolete）”，语义弱、动态场景下不可靠：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
start="5"在 JS 插入新li后不会自动重排编号；而用 CSScounter-reset+counter-increment更可控 -
type="A"支持的值有限（仅1/a/A/i/I），且无法实现 “1.1”“第1步” 等复杂格式 - 真正需要定制时，应优先用 CSS
list-style-type: upper-alpha或伪元素生成内容，保留原生ol结构
嵌套步骤怎么写才不破坏语义
子步骤不是“缩进一下就行”，而是要明确表达“该步骤内部存在次级顺序”。错误做法是把分支逻辑硬塞进同一 ol，比如“点击提交 → 若成功执行 A，否则执行 B”。
立即学习“前端免费学习笔记（深入）”；
- 合法嵌套：外层
ol包含一个li，其内部再套一个ol（如“3. 编译代码”下嵌“① 安装依赖 ② 运行构建”） - 条件分支必须拆开：主流程用一个
ol，不同路径各自用独立ol或details包裹，并用文字注明触发条件 -
ol的直接子元素只能是li；写成<ol><p>第一步</p></ol>是结构错误，校验工具报错，部分辅助技术可能跳过
最容易被忽略的是：一旦用 div + 手动编号替代 ol，后续所有可访问性补救、动态编号维护、SEO 语义识别，成本都会指数级上升。它不是一个“看起来像步骤”的问题，而是 DOM 层面的契约失效。
