ol标签是制作教程步骤最直接、语义最准确的方式，天然支持顺序编号，对屏幕阅读器和seo友好；应避免div+手动数字或css计数器，确保li显式闭合且ol内仅含li子元素，编号样式优先用css控制。
ol 标签是制作教程步骤最直接、语义最准确的方式，它天然支持顺序编号，且对屏幕阅读器和 SEO 友好。别用 div + 手动数字或 CSS 计数器硬凑——既增加维护成本，又破坏可访问性。
用 ol 写基础步骤，别漏 li 闭合
浏览器虽会容错，但未显式闭合 li 在嵌套或 JS 操作时极易出问题：比如 document.querySelectorAll('li') 返回数量异常，或 CSS 选择器失效。
- 每个步骤必须包裹在
li中，且建议显式写 -
ol内部只允许直接子元素为li（或script/template），不能塞div或p作为直接子级 - 若步骤内需换行或加粗说明，可在
li内部自由使用p、strong、code等标签
start 和 type 属性的适用边界
这两个属性够用，但有明确限制：仅支持有限值，且现代项目中 CSS 替代更可控。
-
start="3"可让列表从 3 开始编号，适合接续上一节；但不支持负数或小数 -
type="A"（大写字母）、type="i"（小写罗马数字）等仅在部分旧规范中定义，Chrome/Firefox 支持尚可，Safari 对type="I"渲染可能不一致 - 如需“Step 1”“Step 2”样式，别依赖
type，改用 CSS 的counter-reset+::before
用 CSS 控制编号样式比 HTML 属性更可靠
HTML 的 type 和 start 是“快糙猛”方案，而 CSS 提供可预测、可复用、可动画的控制能力。
- 用
list-style-type: lower-alpha替代type="a"，兼容性更好，且能与counter-increment组合实现多级嵌套编号 - 若要隐藏默认编号并自定义前缀（如 “▶ Step 1”），先设
list-style: none，再用li::before { content: "▶ Step " counter(step); counter-increment: step; } - 注意
list-style-position: inside会让文字首行缩进对齐编号末尾，易造成排版错乱，教程类内容建议保持默认outside
真正容易被忽略的是语义一致性：一个教程页面里混用 ol、ul 和手动编号段落，会让辅助技术无法识别步骤逻辑。哪怕只是三步操作，也值得用一次正确的 ol。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
