caption必须是table的第一个子元素，否则语义断裂：浏览器只认紧贴table开始标签后的caption，中间不能有空格、换行、注释或其它标签，否则document.queryselector('table').caption返回null、caption-side失效、屏幕阅读器跳过。
caption 必须是 table 的第一个子元素，否则语义就断了
浏览器解析 <caption></caption> 时，只认它是否紧贴在 <table> 开始标签之后——中间不能有空格、换行、注释，更不能插 <code><thead> 或其他标签。一旦位置错，<code>document.querySelector('table').caption 就返回 null，CSS 的 caption-side 失效，屏幕阅读器也跳过它。
常见错误写法：
<table> <!-- 注释 --><caption>标题</caption>...<li><code><table> <tbody><tr>...</tr></tbody> <caption>标题</caption> <li><code><table> <br><caption>标题</caption>（<code><br>会被当作文本节点，破坏结构）安全写法只有一种：
<table> <caption>标题</caption> <thead>...<h3>caption-side: bottom 在 Safari 和 Android WebView 中容易失效</h3> <p><code>caption-side: bottom看似简单，但实际兼容性很碎：- Chrome / Firefox：稳定支持
- Safari：15.4+ 才可靠；旧版直接忽略，标题仍显示在顶部
- Android WebView（尤其旧版 Chromium 内核）：可能错位、文字截断，或完全不响应
caption-side
如果必须用底部标题，建议加兜底样式：
display: table-caption强制重置渲染上下文，并配合text-align控制对齐。不要依赖left/right——caption-side只接受top和bottom。用 JavaScript 动态插入 caption 容易漏掉 DOM 绑定
直接改
innerHTML是最常见也最危险的做法：table.innerHTML = '<caption></caption>' + table.innerHTML会把原有子节点全部销毁重建，导致事件丢失、引用失效，且table.caption属性不会自动更新。正确方式只有两种：
- 用
insertAdjacentHTML('afterbegin', '<caption>标题</caption>') - 或手动创建并插入：
const cap = document.createElement('caption'); cap.textContent = '标题'; table.insertBefore(cap, table.firstChild);
插入后务必检查：
if (!table.caption || !(table.caption instanceof HTMLElement))—— 这步漏掉，后续脚本读取标题就会静默失败。caption 不是视觉装饰，它是表格的语义锚点
很多人以为在表格上方放个
<p></p>或<h3></h3>效果一样，其实完全不是一回事。只有<caption></caption>能被屏幕阅读器识别为“这个表格的标题”，搜索引擎也会把它作为表格主题的强信号。而普通标题只是独立文本块，和表格没有结构绑定。最容易被忽略的点是：哪怕你用 CSS 把
<h3></h3>挤到表格正上方、加粗居中、字号拉大，它依然不是表格的一部分——语义链断了，可访问性和 SEO 价值就归零了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
