caption必须紧贴table标签开头，中间不能有任何字符（包括换行符、注释、零宽空格），否则浏览器无法识别为表格标题，导致table.caption返回null且caption-side失效。

caption必须紧贴

开头，中间不能有任何字符

哪怕只多一个换行符、HTML注释或零宽空格（U+200B），table.caption就会返回null，caption-side也完全失效。这不是样式问题，而是语义绑定断裂——浏览器只认「<table><caption>」这个严格紧邻关系。<ul><li>✅ 正确：<code><table> <caption>销售汇总</caption> <thead><li>❌ 错误：<code><table>\n<!-- 备注 -->\n<caption>销售汇总</caption>（换行+注释）<li>❌ 更隐蔽错误：编辑器未开启“显示空白符”，<code><caption></caption>开头实际含不可见字符

caption-side: bottom在dompdf和旧IE中容易失效

写caption { caption-side: bottom; }却没反应？90%不是CSS写错了，而是caption根本没被识别为表格标题。DOM结构不合法时，CSS再正确也无对象可作用。

• dompdf 2.x 对bottom渲染常有偏移，mPDF 8+ 更稳定，但导出后仍需人工核对
• IE ≤7 完全不支持caption-side，若需兼容，只能用已废弃的align="bottom"兜底
• 稳妥做法：默认用caption-side: top，底部需求优先考虑用<tfoot><tr><th scope="row">数据来源：公司报表</th></tr></tfoot>模拟（语义不同但兼容性更好）

多语言caption必须显式声明lang属性

表格主体是中文，caption写英文“Q3 Financial Summary”却不加lang，屏幕阅读器会用中文音调生硬朗读英文词——这不是口音问题，是WCAG 2.1明确要求的语义缺失。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• ✅ 正确：<caption lang="en">Q3 Financial Summary</caption>
• ❌ 错误：<caption>Q3 Financial Summary</caption>（依赖页面默认lang，不可靠）
• lang值必须是BCP 47标准格式，如zh-Hans、en-US，不能写chinese或english
• 整表多语言混排时，避免把不同语言文本塞进同一个caption；应拆表或用<span lang="xx"></span>细粒度控制

别给caption设display: block或position: absolute

caption是表格专有内建元素，它的布局上下文由表格渲染引擎管理。强行脱离会导致居中逻辑错乱、辅助技术丢失绑定关系，甚至让table.caption返回null。

• ❌ 危险操作：caption { display: block; width: 100%; } 或 position: absolute;
• ✅ 安全调整：caption { text-align: left; padding: 0.5em 0; font-weight: bold; }
• 所有样式应围绕文本内容本身，而非重定义其容器行为
• 想左对齐？必须同时设caption-side: top + text-align: left；只设text-align在部分旧版Safari中可能失效

最常被忽略的不是怎么美化，而是caption的存在本身决定了表格能否被程序化访问——JavaScript靠table.caption读取，屏幕阅读器靠它播报，PDF渲染器靠它定位。位置一错，整个链路就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！