标签必须作为的第一个子元素，用于语义化定义表格标题，不可置于内或表外，且仅能出现一次；错误嵌套会破坏可访问性与SEO。

字幕标签（）里不能直接用 或字体图标类

因为 是表格的语义化标题容器，浏览器会强制其 display 为 table-caption，而多数富文本编辑器或 sanitizer（比如 TinyMCE、Quill、GrapesJS）默认会剥离 的 class 属性，或者干脆不渲染内联图标标签。你塞一个 进去，大概率变成空白或被转义。

真正能稳定生效的方式只有两种：

• 把 SVG 写成 data URL 塞进 ，既保语义，又可控。

  的 ::marker 不起作用，别试

  ::marker 只对

• 、
  等少数元素有效， 不在其列。你写 caption::marker { content: "?"; } 完全没反应——这不是 bug，是规范限制。

  容易踩的坑：

  • 误以为 list-style-type 能控制 caption 符号（它只管列表项）
  • 在 caption 里套
    或 再加图标，结果破坏表格可访问性（AT 工具会跳过或误读）
  • 用 display: flex 强行包裹 caption 内容，反而让 caption 失去原生居中逻辑，导致对齐偏移

  富文本编辑器里插入带图标字幕，关键不是“加”，而是“绕过过滤”

  像 TinyMCE、CKEditor、或低代码平台的富文本框，对 内容普遍保守：允许文字，但禁用 class、style、、甚至 的 data URL。这时候硬插会失败。

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  实操建议：

  • 先确认编辑器是否允许 valid_children 配置（TinyMCE）或 allowedContent（CKEditor 4），把 caption i[*] 或 caption img[src] 加进去
  • 如果不行，改用“占位符 + 后处理”：输入时写 [icon:table] 字幕文字，提交前用 JS 扫描并替换成真实 SVG 或 data URL 图片
  • GrapsJS 用户注意：avoidInlineStyle: false 不够，还得设 allowScripts: false（生产环境必须关）+ 自定义 component 渲染 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 元素盒，不是表格边框——这点在响应式表格里会突然露馅。

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