caption必须是table的第一个子元素，否则语义断裂：浏览器只认紧贴table开始标签后的caption，中间不能有空格、换行、注释或其它标签，否则document.querySelector('table').caption返回null、caption-side失效、屏幕阅读器跳过。
caption 必须是 table 的第一个子元素，否则语义就断了
浏览器解析 <caption> 时，只认它是否紧贴在 <table> 开始标签之后——中间不能有空格、换行、注释，更不能插 <thead> 或其他标签。一旦位置错，document.querySelector('table').caption 就返回 null，CSS 的 caption-side 失效，屏幕阅读器也跳过它。
常见错误写法：
<table><!-- 注释 --><caption>标题</caption>...<table><tbody><tr>...</tr></tbody><caption>标题</caption>-
<table><br><caption>标题</caption>（<br>会被当作文本节点，破坏结构）
安全写法只有一种：<table><caption>标题</caption><thead>...
caption-side: bottom 在 Safari 和 Android WebView 中容易失效
caption-side: bottom 看似简单，但实际兼容性很碎：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Firefox：稳定支持
- Safari：15.4+ 才可靠；旧版直接忽略，标题仍显示在顶部
- Android WebView（尤其旧版 Chromium 内核）：可能错位、文字截断，或完全不响应
caption-side
如果必须用底部标题，建议加兜底样式：display: table-caption 强制重置渲染上下文，并配合 text-align 控制对齐。不要依赖 left/right ——caption-side 只接受 top 和 bottom。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
用 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> 或 <h3> 效果一样，其实完全不是一回事。只有 <caption> 能被屏幕阅读器识别为“这个表格的标题”，搜索引擎也会把它作为表格主题的强信号。而普通标题只是独立文本块，和表格没有结构绑定。
最容易被忽略的点是：哪怕你用 CSS 把 <h3> 挤到表格正上方、加粗居中、字号拉大，它依然不是表格的一部分——语义链断了，可访问性和 SEO 价值就归零了。
