HTML ol列表如何编写规范代码-html教程-PHP中文网

ol标签必须用li作为直接子元素，禁止div或p等非li元素；start仅设首项起始值，value会重置后续自动编号；应优先用CSS计数器替代type属性；需避免破坏无障碍可访问性。

html ol列表如何编写规范代码

ol 标签必须用 `li` 直接子元素

HTML 规范要求 ol 的直接子节点只能是 li，不能是 div、p 或文本节点。浏览器虽会容错渲染，但会导致语义错误、无障碍访问失败，且某些屏幕阅读器会跳过或误读列表。

常见错误写法：

<ol>
<p>第一项</p>
  <div>第二项</div>
</ol>

这种结构实际被解析为 ol → 空列表 + 两个孤立块级元素，序号不会绑定到内容上。

正确写法：每个条目必须包裹在 li 内，哪怕内容只有一行文本或一个内联元素

若需在 li 中嵌套段落或容器，完全合法：

<ol>
<li><p>这是带段落的条目</p></li>
  <li><div class="step">步骤说明</div></li>
</ol>

禁止把 li 拆开（如用 display: contents 移除其盒模型）再塞内容——视觉可能正常，但 DOM 层级已破坏列表语义

`start` 和 `value` 属性的实际行为差异

很多人以为 start 是“起始编号”，value 是“当前项编号”，但它们影响的是计数器状态，不是纯显示值。关键区别在于：只有 value 会重置后续 li 的自动编号逻辑。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

示例：

<ol start="3">
<li>A</li>  <!-- 显示 3. A -->
  <li>B</li>  <!-- 显示 4. B -->
</ol><ol>
<li value="5">C</li>  <!-- 显示 5. C -->
  <li>D</li>         <!-- 显示 6. D，不是 2. D！-->
</ol>

start="n" 只设置第一个 li 的初始计数值，不影响后续显式 value
value="n" 不仅设置当前项编号，还会让下一个无 value 的 li 从 n+1 开始计数
混用时以最近的 value 为准；start 仅在首个 li 无 value 时生效
不推荐依赖 value 调整顺序——它容易引发维护混乱，应优先用 CSS counter-reset/counter-increment 控制复杂编号逻辑

用 CSS 替代 `type` 属性实现兼容性更强的编号样式

type 属性（如 type="a"、type="I"）在部分旧版 Safari 和所有 IE 中支持不一致，且无法控制字母大小写、括号格式或添加前缀（如 “Step 1.”）。现代方案应放弃 type，改用 CSS 计数器。

基础替换写法：

ol.step-list {
  counter-reset: step;
}
ol.step-list li {
  list-style: none;
}
ol.step-list li::before {
  counter-increment: step;
  content: "Step " counter(step) ". ";
  font-weight: bold;
}

list-style: none 必须加在 li 上，否则原生序号和伪元素会叠加显示
counter-reset 要设在 ol 上，不能设在 body 或父容器——否则多个 ol 会共用同一个计数器
若需大写字母（A, B, C），用 counter(step, upper-alpha)；小写用 lower-alpha；罗马数字用 upper-roman
避免在 content 中硬编码中文数字（如“一”“二”），CSS 计数器不支持中文序列，需 JS 或服务端生成

无障碍与 SEO 需要关注的隐藏细节

单纯写对标签结构还不够。ol 的语义价值体现在它能被辅助技术识别为“有序集合”，但前提是不能被 CSS 或 JS 破坏可访问树（accessibility tree）。

禁用 aria-hidden="true" 在 ol 或 li 上——这会让整个列表对屏幕阅读器不可见
不要用 display: none 隐藏某个 li 后再用 JS 动态显示；应改用 visibility: hidden 或 opacity: 0 + pointer-events: none，否则编号顺序会被读屏软件跳过
若列表项内容动态加载（如分页展开），必须触发 aria-live 区域更新，否则新增 li 不会被朗读
搜索引擎仍会解析 ol 的层级关系，但不会因此提升排名；真正影响 SEO 的是内容是否自然、是否被正确索引——所以别为了“有 ol 标签”而强行套用，该用 ul 或段落就用段落