caption 必须紧贴<table>标签后且无任何字符（包括换行、注释、零宽空格），否则DOM绑定断裂导致table.caption返回null、caption-side失效；必须作为<table>的首个子元素，不可置于<thead><tbody>等内部或之后。
caption 必须紧贴 <table> 开始标签后，不能有空格或换行
哪怕只多一个换行符、一个 HTML 注释、甚至一个 Unicode 零宽空格（如 U+200B），document.querySelector('table').caption 就会返回 null，caption-side 也完全失效。
这不是样式问题，是语义绑定断裂——浏览器和屏幕阅读器只认 DOM 中「<table> 后紧跟 <caption>」这个严格顺序。
- ✅ 正确：
<table><caption>销售汇总</caption><thead>... - ❌ 错误：
<table>\n<!-- 备注 -->\n<caption>销售汇总</caption>（换行 + 注释 → 绑定失败） - ❌ 更隐蔽错误：
<table><caption>销售汇总</caption><tbody>...但<caption>开头实际含不可见字符（需用编辑器显示空白符功能检查）
caption 不能放在 <thead>、<tbody> 或任何 <tr> 之后
一旦 <caption> 出现在 <thead> 里，或在第一个 <tr> 后面，它就脱离表格语义上下文。DOM 中它还是个元素，但不再是这张表的标题。
后果很直接：屏幕阅读器不读、PDF 渲染器（如 dompdf）跳过、JS 无法通过 table.caption 访问。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：
<table><caption>...</caption><thead><tr>...</tr></thead><tbody>...</tbody></table> - ❌ 错误示例：
<table><thead><caption>...</caption></thead></table>（<caption>不是<thead>的合法子元素） - ❌ 错误示例：
<table><tbody><tr><td>...</td></tr></tbody><caption>...</caption></table>（位置错，语义丢失）
caption-side: bottom 不生效？先查 DOM 结构，别急着调 CSS
写上 caption-side: bottom 却没反应，90% 是因为语义没建立起来。CSS 再正确，<caption> 不属于这张表，就根本没对象可作用。
尤其要注意 dompdf 2.x 版本对 bottom 渲染不稳定，标题可能下移数厘米；mPDF 8+ 更可靠，但仍建议导出后人工核对。
- 必须配合
text-align使用：caption { caption-side: bottom; text-align: right; }才能右对齐到底部；只设caption-side，文字仍默认居中 - 旧版 IE（≤IE7）完全不支持
caption-side，若需兼容，只能用已废弃的align="bottom"（仅作兜底） -
caption-side: left或right在 Safari/Firefox 支持差，WCAG 不推荐，别用
别用 <h2> 或 <p> 模拟标题
视觉上看着像标题，但 JS 无法通过 table.caption 访问，屏幕阅读器不会把它和表格关联，搜索引擎也收不到语义信号。
DOM 中没有 <caption> 元素，就等于这张表没有标题——无论你用多大的字号、多醒目的颜色，都只是“看起来像”，不是“就是”。
- ❌
<h2>销售数据</h2><table>...</table>→ 无语义绑定 - ❌
<div class="table-title">销售数据</div><table>...</table>→ 视觉模拟，语义为零 - ✅ 唯一合法方式：
<table><caption>2024年Q1华东地区产品销量(单位:台)</caption>...</table>
真实项目里最容易被忽略的，不是怎么写样式，而是编辑器自动插入的空白符、Git diff 带进来的不可见字符、或者团队协作时有人随手把 <caption> 拖进了 <thead> ——这些地方一错，所有可访问性和自动化处理就全断了。
