有序列表不支持标签，应使用等标题元素紧邻，或用包裹；禁用伪元素生成标题。
有序列表本身不支持 <caption></caption> 标签
HTML 的 <ol></ol> 元素没有原生的标题机制，<caption></caption> 只能用在 <table> 上。直接写 <code><caption>标题</caption> 在 <ol></ol> 里是无效的，浏览器会把它当作普通文本或忽略其语义。
用 <h3></h3> 或 <h4></h4> 紧邻 <ol></ol> 是最常用且语义正确的方式
这是可访问性好、SEO 友好、也符合 HTML5 结构规范的做法：
<h3>编程语言学习顺序</h3> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol>
- 屏幕阅读器能自然读出标题与列表的层级关系
- 不要用
<div> 包裹标题+列表再强行“模拟”标题——它没语义，也不利于无障碍 <li>如果需要视觉居中或缩进对齐，用 CSS 控制 <code><h3></h3>和<ol></ol>的margin，别靠空格或<br>
用 <figure></figure> + <figcaption></figcaption> 是少数合法“带标题的列表”方案
虽然不常见，但 HTML5 允许把 <ol></ol> 当作“图示内容”放入 <figure></figure>，再用 <figcaption></figcaption> 做标题：
<figure><figcaption>推荐的调试步骤</figcaption><ol>
<li>检查控制台报错</li>
<li>确认网络请求状态</li>
<li>复现并截取 DevTools 时间线</li>
</ol></figure>
-
<figcaption></figcaption>必须是<figure></figure>的第一个或最后一个子元素 - 语义上表示“这个列表本身是一个独立的、可引用的内容单元”，适合文档中作为示例、流程说明等场景
- 注意：部分旧版屏幕阅读器对
<figure></figure>内列表的标题关联支持较弱，关键内容别只依赖它
别用 CSS 伪元素（如 ::before）生成标题文字
看似能“加标题”，但实际会带来几个硬伤：
- 伪元素内容无法被复制、搜索、翻译或读屏软件识别
- 如果用户禁用 CSS，标题就彻底消失
- 违反“内容与表现分离”原则，后续维护成本高
- 例如：
ol::before { content: "步骤说明"; display: block; font-weight: bold; }—— 不推荐
标题是内容的一部分，不是装饰。该写就写，别藏在样式里。
