HTML5 中用于概述文档的多级编号标题

Question

所以我正在用html5写一本手册，它需要编号。

• 标题需要编号，例如“第 4 节：一些内容”
• 一些小标题需要编号，例如“4.01：第一点 你需要了解一些事情”

为了比较困难，手册中会有表格和图片，所以它们也需要编号，例如

“图 4.03 一只猫。互联网上的大多数图片都是猫的。”

另外，手册中有很多流程列表。如果这些都在副标题下编号就好了，例如

4.05 一个简单的过程

4.05.01 从树上拔出一片叶子
4.05.02 吃吧
4.05.03 现在你是一只毛毛虫
4.05.04 变成美丽的蝴蝶

我一直在研究为标题、副标题、数字和列表编号的不同方法。我正在寻找答案，但不是很好的答案。

不完美的解决方案一：使用 CSS 计数器

这些不能复制到编辑程序（word 等） 它们显然也不适用于屏幕阅读器

不完美的解决方案 2：使用有序列表

这些不会“优雅地失败”afaik - 如果我所有的标题都是有序列表的“标题”类，它们看起来就像没有 CSS 的普通列表。

有人已经解决了这个问题吗？解决办法是什么？

对于任何能够提供自动更新我的图形交叉引用的智能方法的人，我们都非常荣幸！

Answer 1

使用文字。

<h3>4.01: the first point you need to know about some stuff</h3>

编号不仅仅是样式（您可能想引用这些数字，对吗？），所以 CSS 解决方案是不可能的。

使用ol 可以在某些情况下工作，但它有很多缺点：

• 您不想为整个文档使用ol，是吗？
• 用户代理根本不需要呈现任何数字。
• 许多用户代理不允许搜索或复制号码。
• 您无法获得您想要的确切编号方案（例如，嵌套的 ol 通常不会呈现像 . 这样的分隔符，而是从第一个值重新开始）。