ol标签是HTML有序列表唯一标准方式，必须用ol包裹li且不可省略闭合标签，type和start属性已过时，应改用CSS list-style-type或计数器实现灵活编号。
ol 标签是制作 HTML 有序列表的唯一标准方式，不用 JavaScript、不靠 CSS 模拟，浏览器原生支持，语义正确且可访问性好。
怎么写最基本的 ol 结构
必须用 ol 包裹 li，不能省略闭合标签，也不能把 div 或 p 直接塞进 ol 里 —— 这些不是合法子元素，浏览器会自动纠错，但 JS 选中或屏幕阅读器解析可能出错。
-
<ol><li>第一步</li><li>第二步</li></ol>是唯一合规写法 - 别写成
<ol><li>第一步<li>第二步</ol>（漏了第二个</li>），会导致编号重置为 1 - 别在
ol里直接放文本，比如<ol>第一步<li>第二步</li></ol>，首项会被当成纯文本，不参与编号
type 和 start 属性还在用？小心兼容性和语义退化
HTML 属性 type="A" 或 start="3" 虽然仍能工作，但已属过时方案：它们只支持有限几种编号格式（1、a、A、i、I），且无法控制字体、颜色、间距；更重要的是，当用 CSS 覆盖时，这些属性会被忽略，行为不可预测。
- 现代项目应统一用
list-style-type替代type，例如：ol { list-style-type: upper-alpha; } -
start在嵌套或动态插入场景下容易失效（比如 JS 插入新li后编号不续接），改用 CSS 计数器更可靠：ol { counter-reset: step; } li { counter-increment: step; } li::before { content: counter(step) ". "; } - 若需“第 1 步”“第 2 步”这类带前缀的编号，
type和start完全无能为力，只能靠::before+counter()
为什么 ol 里的项目符号突然没了？常见断点排查
最常被忽略的原因是父容器用了 display: flex 或 display: grid —— 这会让 list-style 失效，因为项目符号属于块级渲染上下文的一部分，而 flex/grid 容器会接管子项布局逻辑。
立即学习“前端免费学习笔记（深入）”；
- 检查是否对
ol或其父元素设置了display: flex；修复方式是给每个li单独加list-style: decimal;，或改用::before手动注入编号 - 检查是否写了
list-style: none却没意识到它会同时干掉符号和缩进；如需隐藏符号但保留缩进，应改用list-style-type: none+padding-left - 嵌套列表（如
ol > li > ol）出现缩进异常，大概率是外层ol的padding-left被继承或叠加，而非list-style本身的问题
真正难处理的不是怎么编号，而是当列表要响应式、要支持多语言序号（如中文“一、二、三”）、要和 JS 动态状态联动时，ol 的原生能力就到头了 —— 这时候必须切换到 CSS 计数器或框架级列表组件，而不是硬撑着改 type 属性。
