HTML 中 标签已废弃，且无法直接包裹 ；实现整行删除线需在每个 内部使用语义化标签 或 ，并配合 CSS 确保视觉与无障碍可访问性统一。

html 中 `` 标签已废弃，且无法直接包裹 ``；实现整行删除线需在每个 `` 内部使用语义化标签 `` 或 ``，并配合 css 确保视觉与无障碍可访问性统一。

在 HTML 中，试图用 （或现代替代标签 /）直接包裹 元素——例如 ...——是无效且不符合规范的。这是因为 、 和 均属于短语内容（Phrasing Content） 标签，根据 HTML 规范，它们只能包含文本、内联元素（如 、、），而不能包含块级或表格结构元素（如 、、

）。浏览器会自动“修复”此类错误结构，通常将 提升到 外部或忽略其包裹关系，导致样式失效或 DOM 解析异常。

✅ 正确做法：为每一单元格内的内容单独应用语义化删除标记。若该行代表已被删除的数据（如订单取消、记录作废），应优先使用 ；若仅为不再准确但非正式删除的内容（如价格更新前的旧标价），则使用 。二者均被屏幕阅读器识别为删除语义，支持无障碍访问（如 JAWS、NVDA 会朗读“deleted: …”）。

以下为修复后的完整示例代码（仅修改第 2 行）：

<table style="border: 1px solid black; width: 100%;">
  <thead>
    <tr>
      <th>Table 1 Head 1</th>
      <th>Table 1 Head 2</th>
      <th>Table 1 Head 3</th>
      <th>Table 1 Head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
      <td>Row 1 Column 4</td>
    </tr>
    <!-- ✅ 正确：为每个 <td> 内容包裹 <del> -->
    <tr>
      <td><del>Row 2 Column 1</del></td>
      <td><del>Row 2 Column 2</del></td>
      <td><del>Row 2 Column 3</del></td>
      <td><del>Row 2 Column 4</del></td>
    </tr>
    <tr>
      <td>Row 3 Column 1</td>
      <td>Row 3 Column 2</td>
      <td>Row 3 Column 3</td>
      <td>Row 3 Column 4</td>
    </tr>
  </tbody>
</table>

⚠️ 注意事项：

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

立即学习“前端免费学习笔记（深入）”；

• 勿滥用 style="text-decoration: line-through" 直接作用于 ：虽能显示横线，但缺乏语义，屏幕阅读器无法感知“删除”意图，违反 WCAG 1.3.1（信息与关系）原则；
• 避免 标签：它在 HTML5 中已被完全废弃（obsolete），MDN 明确建议改用 或 ；
• 增强可访问性：可为 添加 datetime 属性（如 ），提供删除时间线索；对视觉用户，可配合 CSS 微调样式（如下划线颜色、背景高亮）：

  del {
    text-decoration: line-through;
    text-decoration-color: #d32f2f;
    color: #666;
  }

• 响应式考虑：在窄屏下，确保 内容仍清晰可读（避免与背景色冲突或过度透明）。

总结：HTML 的语义化不是可选项，而是可访问性与长期维护的基础。整行删除必须落实到单元格级语义标签，而非依赖无效的结构包裹。坚持使用 （删除）或 （不准确/过时），辅以恰当 CSS，才能同时满足视觉表现、代码合规性与无障碍需求。