是 HTML 中唯一合法的表格字幕标签，必须作为 的第一个子元素，语义上描述整个表格内容，浏览器默认将其居中显示在表格上方。
字幕用 <caption></caption> 必须放在 <table> 内部最开头
<p>HTML 中唯一合法的“字幕”标签是 <code><caption></caption>，但它不是通用文字定位工具，只专属于表格，且必须作为 <table> 的第一个子元素。浏览器会自动把它渲染在表格上方居中位置——这就是所谓“置顶显示”的来源。
<p>常见错误是把它丢在 <code><table> 外面，或放在 <code><thead> 里，结果完全不生效，甚至被解析为普通文本。
<ul><li>
<code><caption></caption> 只能直接嵌套在 <table> 下，不能套在 <code><div> 或其他容器里
<li>它默认垂直居中对齐表格，水平居中；若需左对齐，加 CSS：<code>caption { text-align: left; }
想让任意文字“看起来像字幕置顶”？用 CSS 定位更可靠
如果目标只是视觉上把一段文字固定在某个容器顶部（比如视频上方、卡片标题区），<caption></caption> 不适用，该用 CSS。
典型做法是给容器设 position: relative，文字用 position: absolute; top: 0; 拉上去。注意：绝对定位会让文字脱离文档流，可能覆盖下面内容，需手动调 z-index 或留出上边距。
立即学习“前端免费学习笔记（深入）”；
- 避免用
float或margin-top: -XXpx模拟，容易破坏布局流 - 响应式场景下，优先考虑
flexbox（如display: flex; flex-direction: column;+order）或grid，比绝对定位更健壮 - 若需“粘性置顶”（滚动时始终在视口顶部），用
position: sticky; top: 0;，但需父容器有明确高度或滚动上下文
<caption></caption> 不支持 colspan/rowspan，对齐和跨列要靠 CSS
<caption></caption> 本身没有原生属性控制跨列，也不能写 colspan。它天然横跨整个表格宽度。但如果你发现它没占满、错位或换行异常，大概率是表格单元格内容撑开了列宽，或者用了 table-layout: fixed 却没设 <col> 宽度。
- 强制等宽列：用
<colgroup><col></colgroup>配合width属性 - 文字过长导致
<caption></caption>折行？加 CSS：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - IE8 及更早版本不支持
caption-side: bottom（默认只支持 top），如需底部字幕，得用<tfoot> + 样式模拟 <h3>别把 <code><title></title>、<h1></h1>或<header></header>当字幕用有人搜“HTML 字幕”却误用
<title></title>（只显示在浏览器标签页）、<h1></h1>（是页面主标题，无表格语义）、或<header></header>（是区块容器，不自带置顶行为）。这些标签不会因为名字带“标”就自动置顶显示。尤其注意：视频
<track></track>标签才是真正的“字幕轨道”，用于<video></video>元素，和<caption></caption>完全无关——它不渲染为页面文字，而是由浏览器控制台叠加在视频画面上。真正需要表格字幕时，老老实实放
<table> 里面；其他所有“顶部文字”需求，本质是布局问题，交给 CSS 解决。最容易被忽略的是语义与样式的边界：用对标签是为了可访问性和维护性，不是为了“看起来像”。</table>
