caption是唯一合法且语义明确的表格标题方式，必须作为table的第一个子元素紧贴开头，否则屏幕阅读器无法识别。
summary 属性已彻底废弃，别再写；caption 是唯一合法、语义明确、屏幕阅读器必读的表格标题方式——但它必须紧贴 <table> 开头，放错位置就等于没写。
<h3>caption 必须是 table 的第一个子元素</h3>
<p>浏览器和读屏软件（NVDA、VoiceOver）只认 <code><caption></caption> 作为表格标题的语义锚点，且仅当它直接跟在 <table> 后面时才生效。任何嵌套或偏移都会导致语义丢失。
<ul><li>✅ 正确：<code><table>
<caption>2026年Q1前端班考核成绩</caption>
<thead>...</thead>
<li>❌ 错误：<code><table>
<thead><caption>...</caption></thead>（塞进 <code><thead> 内）
<li>❌ 错误：<code><caption>...</caption>
<table>...</table>（写在 <table> 外）
<li>❌ 错误：用 <code>display: none 或 visibility: hidden 隐藏 <caption></caption> —— 屏幕阅读器直接跳过
summary 属性在 HTML5 中完全无效
W3C 自 2014 年起将 summary 标记为 obsolete，现代浏览器（Chrome/Firefox/Edge）全部忽略它，DevTools 会报警告：The 'summary' attribute on the 'table' element is obsolete. 它既不渲染，也不被读出，纯属冗余代码。
- ? 绝对不要写：
<table summary="三列数据：姓名、邮箱、注册时间"> <li>✅ 替代方案：把关键结构信息融入 <code><caption></caption>文本，例如：<caption>用户注册信息（按注册时间倒序，含姓名、邮箱、状态）</caption> - ✅ 更进一步：用
<th scope="col"> 显式定义列含义，比 <code>summary更精准、可交互、可测试caption 内容要具体，不能靠 scope 或 headers 补救
<caption></caption>是屏幕阅读器进入表格时最先播报的内容，相当于“说明书封面”。它得让用户一听就懂这张表是干啥的，而不是靠后续遍历才能拼凑意图。- ❌ 模糊写法：
<caption>数据表</caption>、<caption>用户列表</caption> - ✅ 具体写法：
<caption>2026年6月上海地区订单明细（含商品名、数量、实付金额）</caption> - ⚠️ 注意：如果表格动态刷新（如搜索、分页），
<caption></caption>文本必须同步更新；否则读屏仍播报旧上下文 - ? 补充说明可用
aria-describedby指向一个<div>，但主 <code><caption></caption>必须自包含核心信息，不能依赖外部补充真正难的不是查文档写出
<caption></caption>，而是在每次敲下<table> 时，下意识确认它后面紧跟的是不是那个真正说清了“谁、什么、何时、何地”的标题——这个条件反射，比任何自动化检测都管用。</table>
- ❌ 模糊写法：
