标签是语义化容器，必须严格用li包裹内容，否则浏览器会自动补全或忽略结构，导致编号错乱、可访问性失效、css控制失准；w3c规定ol的合法子元素仅li、script等，不可直接放文本或p/div；嵌套时子ol须为父li的直接子内容，start和reversed影响原生计数逻辑，不可依赖css修复结构错误。

标签不是“加编号的段落工具”，它是语义化容器，必须严格包裹
1. ，否则浏览器会自动补全或忽略结构，导致编号错乱、可访问性失效、CSS 无法精准控制。

   为什么

   里直接写文本不生效

   常见错误是这样写：

   <ol>
   第一步骤
   第二步骤
   </ol>

   这会导致浏览器把纯文本塞进隐式生成的

2. （行为不可靠），或干脆丢弃文本。W3C 明确规定：ol 的合法子元素只有 li、脚注类元素（如 script）和空白字符——不能直接放文本、p、div 等。
   • 所有内容必须包裹在 li 内，哪怕只有一行字
   • 嵌套子列表时，ol 必须放在某个 li 的内部，而不是平级跟在后面
   • 用 p 替代 li 是最典型的语义污染，会导致屏幕阅读器跳过编号、样式缩进丢失

   如何正确嵌套多级编号（比如 3.1、3.2）

   嵌套的关键是：子 ol 必须作为父 li 的**直接子内容**，不能脱离层级关系。例如第三条规则下有四条子规则，就该这样写：

   

   html-to-pptx-converter

   使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

   下载

   <ol start="34">
   <li>Only live players playing in a set may be inside the boundaries of their half.</li>
     <li>If any part of a live player touches a boundary line they are rendered out.</li>
     <li>If any part of a live player touches a surface, object, or person outside of the boundary line on their team’s half of the court they are rendered out.
       <ol type="a">
   <li>That player may pass any balls they are carrying to any live player on their team.</li>
         <li>That player may not intentionally touch any other balls.</li>
         <li>That player may not intentionally obstruct any live players or ball retrievers.</li>
         <li>That player may not intentionally obstruct any live balls thrown by the opposing team.</li>
       </ol>
   </li>
     <li>Dead players must line up in the marked player return area in the order that they have been rendered out.</li>
   </ol>

   • start="34" 控制外层编号起始值，后续自动递增（34→35→36→37）
   • 子 ol 放在第三个 li 的闭合标签前，保证 DOM 层级正确
   • type="a" 仅作用于该子 ol，不影响外层；若需大写 A 或罗马数字，改用 A / i / I
   • 不要用 CSS 的 counter-reset 去“修复”结构错误——先修 HTML，再调样式

   start 和 reversed 属性的实际影响

   start 和 reversed 是原生属性，它们改变的是浏览器默认计数逻辑，不依赖 CSS。但要注意：

   • start="5" 让第一个 li 显示为 5，第二个为 6……即使中间删掉一个 li，后续编号仍按顺序递增
   • reversed 是布尔属性，写上即生效（<ol reversed></ol>），编号从大到小，但最后一个 li 总是显示为 1
   • 两者可共存：<ol start="10" reversed></ol> → 编号为 10、9、8、7…
   • 若同时用 CSS list-style-type: lower-roman，start 仍按阿拉伯数字理解（start="4" → iv），别指望它自动映射成罗马序数

   容易被忽略的兼容性与可访问性细节

   视觉上编号“看起来对”不等于语义正确。以下三点常被跳过：

   • 屏幕阅读器会播报“列表，4 项”，然后逐条读出“第 1 项”“第 2 项”……如果用了 p 而非 li，它只会读成普通段落，完全丢失顺序信息
   • 某些老版本 Safari 对 type="i"（小写罗马）支持不稳定，建议优先用 CSS list-style-type: lower-roman 统一控制
   • li 内部可以放任意流内容（div、p、img），但若里面再嵌 ol 或 ul，必须确保父 li 没有被 CSS 设置 display: inline —— 否则子列表可能塌陷或错位

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