caption必须紧贴<table>开头作为首个子元素，中间不得有空格、换行或任何其他标签，否则语义断裂导致table.caption返回null、aria-labelledby失效、dompdf跳过渲染。
caption 必须紧贴 <table> 开头，放错位置就失效
浏览器和读屏软件只认 <caption> 是 <table> 的第一个子元素。哪怕中间夹一个空格、换行，或塞进 <thead> 里，语义就断了——视觉可能还显示，但 table.caption 属性返回 null，aria-labelledby 关联失败，dompdf 渲染时直接跳过。
- ✅ 正确：
<table><caption>标题</caption><thead>... - ❌ 错误：
<table><thead><caption>标题</caption></thead>（<caption>不是<thead>的合法子元素） - ❌ 更隐蔽的错误：
<table><div class="fake-caption">标题</div>（纯视觉模拟，无障碍为零）
caption-side 和 text-align 混用容易白忙活
caption 默认 display: table-caption，它不响应 text-align 或 margin。想左对齐？不能只写 text-align: left，必须先重置 display；想放底部？caption-side: bottom 在旧版 IE 和部分 dompdf 版本里压根不生效。
- 稳妥左对齐写法：
caption { display: block; text-align: left; margin-bottom: 0.5em; } - 底部标题兼容方案：放弃
caption-side: bottom，改用<tfoot><tr><th colspan="N">注释说明</th></tr></tfoot>（语义不同，但渲染稳定） - 慎用
caption-side: left/right：Safari 16.4+、Chrome 117+ 才稳定支持，Firefox 旧版直接忽略
一个 <table> 只能有一个 <caption>
HTML 规范明令禁止多个 <caption>。写两个，第二个会被浏览器丢弃或当普通文本解析——既不能被 table.caption 读到，也无法被屏幕阅读器识别为标题。
- 真需要“主标题 + 副标题”？拆成两行文本：
<caption>主标题<br><small>副标题</small></caption>（注意用<small>而非font标签） - 更推荐做法：主标题用
<caption>，补充说明用<details>或通过aria-describedby关联外部<div> - 别试图用 CSS 把两个
<caption>叠在一起——DOM 结构已非法，辅助技术不会买账
多语言 caption 必须显式声明 lang
表格主体是中文，但 <caption> 写的是英文摘要（如 Q3 Revenue Summary），不加 lang 属性，屏幕阅读器会按页面默认语言（比如中文）生硬朗读英文缩写和术语，造成理解障碍。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<caption lang="en">Q3 Revenue Summary</caption> - 避免混写：
<caption>2024年销售数据（Sales Data）</caption>→ 改用<span lang="en">Sales Data</span> -
lang值必须是 BCP 47 标准，如zh-Hans、en-US，不能写chinese或english
caption 不是排版装饰，它是表格可编程访问性的起点——JS 读不到、读屏器跳过、SEO 忽略，问题往往出在 DOM 位置或 lang 缺失这种细节上。
