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