如何使用HTML有序列表组织章节内容-html教程-PHP中文网

ol标签是组织章节内容最语义正确、可访问性最强的方式，因其明确传达逻辑顺序与层级关系；手动编号丢失结构信息，导致屏幕阅读器无法识别章节、搜索引擎难以提取层级、维护易出错；嵌套ol必须严格置于li内，css计数器比type属性更灵活可靠，且需避免破坏可访问性的错误用法。

如何使用html有序列表组织章节内容

ol 标签是组织章节内容最语义正确、可访问性最强的方式——它明确告诉浏览器、搜索引擎和屏幕阅读器：“这些条目有逻辑顺序，不可随意调换”。

为什么不能用 `p` + 手动编号写章节？

手动写“1. 引言”“2. 基础概念”看似简单，但会丢失结构信息：
– 屏幕阅读器无法识别这是“第几章”，只能逐字读出“一点空格引言”；
– 搜索引擎难以提取章节层级，影响文档片段（snippet）生成；
– 后续想加个“1.1 子节”或自动重排序号时，必须全手动改，极易出错。

`ol` 的嵌套必须用 `li` 包裹子 `ol`

章节常含多级结构（如“第二章 → 2.1 → 2.1.1”），ol 允许嵌套，但规则严格：
– 子 ol 必须直接放在某个 li 内部，不能悬空或放在 div 里；
– 每层 ol 都应保持语义连贯（比如不跳过“2.1”直接写“2.2”）；
– 浏览器默认编号会自动递进，无需设置 start 属性。

示例：

<ol>
<li>引言</li>
  <li>基础概念
    <ol>
<li>术语定义</li>
      <li>适用范围</li>
    </ol>
</li>
  <li>实践方法
    <ol>
<li>准备阶段</li>
      <li>执行步骤</li>
      <li>验证方式</li>
    </ol>
</li>
</ol>

CSS 控制编号格式比 `type` 属性更可靠

ol 的 type 属性（如 type="A"）已被现代开发视为过时做法，原因：
– 它只支持有限几种标记（1、A、a、I、i），无法实现“2.1”“§3.2.1”等复杂章节编号；
– 在不同浏览器中行为不一致，尤其嵌套时；
– 与 CSS counter-reset/counter-increment 相比，缺乏灵活性和可维护性。

html-to-pptx-converter

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

下载

推荐用 CSS 实现章节编号：

ol { counter-reset: section; }
li { counter-increment: section; }
li::before { content: counters(section, ".") ". "; }

这样能自然生成 “1.” “1.1.” “1.1.1.” 等格式，且可单独控制字体、间距、缩进。

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

即使结构正确，仍可能破坏辅助技术体验：
– 不要给 li 加 role="heading" 或 aria-level：章节标题语义应由真实 heading 元素（h2、h3）承担，ol 只管顺序；
– 若章节标题需链接跳转，把 a 放在 li 内，而非包裹整个 li；
– 避免在 ol 外再套一层 div 并设 tabindex：这会干扰列表的焦点流和阅读顺序。