caption标签是table的唯一语义化标题，必须作为其第一个且仅有的子元素，位于开始标签后、其他子元素前，否则HTML无效并影响可访问性。
caption 标签在 HTML5 中用于为表格（table）提供**唯一的、语义化的标题**，它必须作为 table 元素的**第一个子元素**，且只能出现一次。
caption 的语义化位置要求
HTML5 明确规定：caption 必须直接位于 table 开始标签之后、任何其他子元素（如 thead、tbody、tr）之前。违反此结构会导致 HTML 无效，影响可访问性与语义解析。
- ✅ 正确位置：
<table> <caption>销售数据汇总</caption> <thead>...</thead>...</table> - ❌ 错误示例：
<table> <thead>...</thead> <caption>...</caption> </table>（位置错误，失去语义） - ❌ 错误示例：
<table> <caption>A</caption> <caption>B</caption> </table>（重复使用，仅允许一个）
caption 与视觉呈现的关系
默认情况下，浏览器将 caption 渲染在表格上方居中位置，但这只是默认样式。其语义作用远大于外观——屏幕阅读器会将其识别为表格的“主标题”，并优先朗读，帮助视障用户快速理解表格用途。
- CSS 可通过
caption-side属性控制显示位置（top/bottom），不影响语义有效性 - 不推荐用
<div> 或 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>模拟标题，那样无法被辅助技术正确关联到表格 - 即使隐藏了视觉样式（如
visibility: hidden），只要保留在合法位置，仍具语义价值 - ✅ 推荐：
<caption>2024年Q1华东地区产品销量（单位：台）</caption> - ❌ 不推荐：
<caption>销量表</caption>（过于笼统） - 可配合
aria-labelledby或aria-describedby增强复杂表格的说明，但不能替代caption
caption 的内容与可访问性建议
好的 caption 应简洁、具体、信息明确，避免模糊表述（如“表格1”），并尽量包含关键上下文（时间、范围、指标等）。
立即学习“前端免费学习笔记（深入）”；
caption 是表格语义结构的基石，位置固定、功能唯一、不可替代。写对位置，就完成了可访问性和语义化最关键的一步。
