HTML 标签速查表

实战片段

要点：① 交互元素不能嵌套，a 与 button 二选一（a 用于跳转、button 用于当前页动作），嵌套会让键盘与读屏行为都错乱；② 一个页面一个 h1、层级逐级递进不跳级，字号需求用 CSS 解决而非换标签，标题层级直接影响 SEO 与读屏导航；③ 真数据表要有 th 与 scope，用 table 做布局时加 role="presentation"（或 none），但优先用 Grid/Flexbox；④ 图片必须有 alt，装饰性图片用空 alt 而不是省略；⑤ 优先用 article/section/header/footer 等语义容器，div 套类名不提供任何语义价值。

<!-- ① 跳转用 a，动作用的 button —— 二选一，不要嵌套 -->
<a href="/orders/42">查看订单</a>
<button type="button" @click="submit">提交</button>
<!-- ❌ <a href="/x"><button>去</button></a> -->

<!-- ② 一个页面一个 h1，层级不跳级 -->
<h1>订单详情</h1>
  <h2>基本信息</h2>
  <h3>收货地址</h3>      <!-- ✅ h3 跟在 h2 后 -->
  <!-- <h4>...</h4> 直接跟在 h2 后是错的 -->
<!-- 字号需求用 CSS，不要靠换标签 -->
<style>
  h1 { font-size: 1.5rem; }
  .minor-heading { font-size: .875rem; font-weight: 600; }
</style>

<!-- ③ 真数据表：th + scope + caption -->
<table>
  <caption>近 7 日订单量</caption>
  <thead>
    <tr><th scope="col">日期</th><th scope="col">订单数</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">10-01</th><td>128</td></tr>
  </tbody>
</table>

<!-- ④ table 做布局时声明 presentation（现代浏览器用 none） -->
<table role="presentation">
  <tr><td>侧栏</td><td>主内容</td></tr>
</table>
<!-- ✅ 更推荐：Grid / Flexbox -->
<div class="layout"><aside>侧栏</aside><main>主内容</main></div>
<style>.layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }</style>

<!-- ⑤ 图片必须有 alt；装饰图用空 alt -->
<img src="chart.png" alt="近 7 日订单量折线图" width="640" height="320">
<img src="divider.svg" alt="" width="8" height="8">   <!-- 装饰性：空 alt -->

<!-- ⑥ 语义化容器优于 div 套类名 -->
<article>
  <header><h2>标题</h2><time datetime="2024-06-01">6 月 1 日</time></header>
  <section><h3>小节</h3><p>正文</p></section>
  <footer>…</footer>
</article>
<!-- <div class="card"><div class="hd">… —— 全无语义价值 -->