标签必须作为的第一个子元素，用于语义化定义表格标题，不可置于内或表外，且仅能出现一次；错误嵌套会破坏可访问性与SEO。
字幕标签（<caption></caption>）里不能直接用 <i></i> 或字体图标类
因为 <caption></caption> 是表格的语义化标题容器，浏览器会强制其 display 为 table-caption，而多数富文本编辑器或 sanitizer（比如 TinyMCE、Quill、GrapesJS）默认会剥离 <i></i> 的 class 属性，或者干脆不渲染内联图标标签。你塞一个 <i class="fas fa-table"></i> 进去，大概率变成空白或被转义。
真正能稳定生效的方式只有两种：
- 把 SVG 写成 data URL 塞进
<img src="data:image/svg+xml,...>%20%E2%80%94%E2%80%94%20sanitizer%20%E5%87%A0%E4%B9%8E%E4%B8%8D%E6%8B%A6%EF%BC%8C%E4%BD%86%E6%97%A0%E6%B3%95%E7%94%A8%20CSS%20%E5%8A%A8%E6%80%81%E6%94%B9%20fill%20%E9%A2%9C%E8%89%B2 %0A - %E7%94%A8%20
::before%20%E4%BC%AA%E5%85%83%E7%B4%A0%E6%8C%82%E8%BD%BD%E5%9B%BE%E6%A0%87%EF%BC%88%E9%9C%80%E7%A1%AE%E4%BF%9D%20<caption>%20%E6%94%AF%E6%8C%81%E4%BC%AA%E5%85%83%E7%B4%A0%EF%BC%8C%E7%8E%B0%E4%BB%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E9%83%BD%E6%94%AF%E6%8C%81%EF%BC%8CIE%20%E4%B8%8D%E8%A1%8C%EF%BC%89 %0A
%E6%8E%A8%E8%8D%90%E5%90%8E%E8%80%85%EF%BC%9A%E5%9C%A8%20CSS%20%E4%B8%AD%E5%86%99%20caption::before%20%7B%20content:%20url(" data:image margin-right: alt="HTML字幕标签开头怎么加图标？富文本符号排版技巧" >，既保语义，又可控。
<h3>
<code><caption></caption> 的 ::marker 不起作用，别试
::marker 只对 <li>、<summary></summary> 等少数元素有效，<caption></caption> 不在其列。你写 caption::marker { content: "?"; } 完全没反应——这不是 bug，是规范限制。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误以为
list-style-type能控制 caption 符号（它只管列表项） - 在 caption 里套
<ul></ul>或<span></span>再加图标，结果破坏表格可访问性（AT 工具会跳过或误读） - 用
display: flex强行包裹 caption 内容，反而让 caption 失去原生居中逻辑，导致对齐偏移
富文本编辑器里插入带图标字幕，关键不是“加”，而是“绕过过滤”
像 TinyMCE、CKEditor、或低代码平台的富文本框，对 <caption></caption> 内容普遍保守：允许文字，但禁用 class、style、<svg></svg>、甚至 <img alt="HTML字幕标签开头怎么加图标？富文本符号排版技巧" > 的 data URL。这时候硬插会失败。
实操建议：
- 先确认编辑器是否允许
valid_children配置（TinyMCE）或allowedContent（CKEditor 4），把caption i[*]或caption img[src]加进去 - 如果不行，改用“占位符 + 后处理”：输入时写
[icon:table] 字幕文字，提交前用 JS 扫描并替换成真实 SVG 或 data URL 图片 - GrapsJS 用户注意：
avoidInlineStyle: false不够，还得设allowScripts: false（生产环境必须关）+ 自定义 component 渲染 caption
图标尺寸和垂直对齐比你想的更敏感
<caption></caption> 默认是 inline-level，但参与表格布局，vertical-align 和 line-height 的微小变化都会让它“飘”起来。常见现象：图标比文字高半像素、右侧文字换行错位、打印时图标截断。
稳妥做法：
- SVG 必须带
viewBox，去掉 width/height 属性，靠 CSS 控制尺寸：caption svg { height: 1em; vertical-align: -0.125em; } - 用
margin-inline-start替代margin-left，适配 RTL 文本场景 - 避免在 caption 上设 font-size，优先用 em/rem 单位缩放图标，否则会干扰表格整体字号继承链
最易被忽略的一点：caption 的 padding 和 border 不影响表格尺寸计算，但图标如果用了 background-image，它的定位基准是 caption 元素盒，不是表格边框——这点在响应式表格里会突然露馅。
