caption必须紧贴开始标签后且为首个子元素，否则语义断裂导致screen reader不读、table.caption返回null、pdf渲染跳过；仅允许一个，不可置于内或之后。
caption 标签不是“加个标题”的可选装饰，而是表格语义结构的强制组成部分——位置错、数量多、样式乱，都会让屏幕阅读器读不到、table.caption 返回 null、PDF 渲染工具（如 dompdf）直接跳过。
caption 必须紧贴 <table> 开始标签后，且只能有一个
<p>浏览器和辅助技术靠 DOM 顺序识别标题归属。一旦 <code>caption 出现在 <thead>、<code><tbody> 或任意 <code><tr> 之后，它就不再被视作该表格的标题。
<ul><li>✅ 正确写法：<code><table>
<caption>销售汇总</caption>
<thead>...
<li>❌ 错误写法：<code><table>
<thead><caption>销售汇总</caption></thead>（<code>caption 不是 thead 的合法子元素）
<div class="title">销售汇总</div> + CSS 定位到表格上方（视觉像，语义为零）table.caption JavaScript 属性只返回第一个且位置合法的 caption 节点；DOM 中有两个或位置非法，这个属性就是 null
caption-side 控制标题位置，但 bottom/left/right 兼容性有限
caption 默认在表格上方居中，用 caption-side 可切换方位，但并非所有值都稳：
-
top和bottom：所有主流浏览器支持，但部分旧版 Safari 对bottom渲染偏移异常 -
left和right：Chrome 117+、Safari 16.4+ 起稳定，Firefox 旧版本不支持 - 稳妥写法（兼容性优先）：
table caption { caption-side: top; text-align: left; } - 若必须底部显示，优先考虑用
<tfoot><tr><th colspan="N">数据截至2024年9月</th></tr></tfoot>模拟摘要行（语义不同但 dompdf 兼容性更好）
重置 caption 样式时，禁用 display: block 和 position: absolute
caption 的默认 display 是 table-caption，这是内建的表格布局上下文。强行覆盖会切断它与表格的语义绑定：
- 设
display: block→ 屏幕阅读器可能跳过，table.caption失效 - 设
position: absolute→ 标题脱离表格流，打印或 PDF 渲染时易错位 - 避免
display: none或visibility: hidden—— 这等于删除语义 - 安全强化方式：
font-weight: bold、background-color: #f5f5f5、padding: 8px等不影响布局的样式
多语言标题必须显式声明 lang 属性
当表格内容是中文，而 caption 是英文（如 "Q3 Financial Summary"），不加 lang 会导致语音合成器按页面默认语言发音，语义混淆。
- 正确写法：
<caption lang="en">Q3 Financial Summary</caption> -
lang值必须是有效 BCP 47 标签（如zh-Hans、en-US），不能写chinese或english - 整表多语言混排时，避免把不同
lang的文本塞进同一个caption；应拆分为独立表格，或用<span lang="xx"></span>包裹局部文本
最容易被忽略的是：嵌套表格时，每个 <table> 都需要自己独立的 <code>caption，哪怕只是 <caption>装饰用</caption> 并配合 role="presentation" 显式声明其非语义性——否则内层表格对读屏软件来说就是「无名实体」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
