标签不是下划线的语义化选择，因其在html5中专用于非标准文本（如拼写错误、专有名词），而非视觉强调；需用配合text-decoration: underline实现语义正确的下划线效果。
为什么 标签不是下划线的语义化选择
u 标签在 HTML5 中已被明确定义为「非标准文本」的语义容器，比如拼写错误、专有名词、翻译标注等，**不是**用来实现视觉强调的。浏览器默认渲染下划线，但这只是样式巧合，语义上完全错位。
常见错误现象：<u>重要通知</u> 会让屏幕阅读器读出 “underline start”，用户无法理解这是重点还是拼写异常；Lighthouse 也会报出「u 元素语义误用」警告。
真正该用 u 的场景包括：
-
<u class="spelling-error">recieve</u>（明确标出拼写错误） -
<u lang="la">et al.</u>（标注拉丁文缩写） - 需要机器可读但又不属正式术语的临时标注
想加下划线强调？直接用 span + CSS：text-decoration: underline，再配 text-underline-offset 控制距离（注意 Safari 15.4+ 才支持）。
什么时候必须用 而不是
del 表示「内容已被删除，但保留在文档中供参考」，带明确的时间上下文；s 表示「内容已弃用或不再准确」，不强调删除动作本身。
典型区别：
-
<del datetime="2026-08-15">¥299</del> ¥199—— 价格被编辑删除，时间可追溯，SEO 和读屏工具都识别为“已删除” -
<s>支持 IE8</s>—— 功能已废弃，但没说何时停用、是否彻底移除 - 订单取消记录、编辑修订历史、法律条款变更 → 必须用
del - 旧版 API 名称、过期促销文案、已下架商品名 → 可用
s，但需配合说明
混用会导致语义污染：比如用 s 标记表单校验失败的用户名，读屏会念“strikethrough”，用户不知道是格式错误还是已被禁用。
表格整行加删除线为什么不能套 或 包
HTML 规范禁止 del、s 等短语内容（Phrasing Content）标签直接包裹 tr 这类表格结构元素。写成 <del><tr>...</tr></del> 会被浏览器自动“修复”，通常把 del 提升到 tr 外或丢弃，DOM 结构错乱，CSS 也失效。
正确做法是为每个 td 内容单独包裹语义标签：
<tr>
<td><del>订单号-20260815</del></td>
<td><del>已取消</del></td>
<td><del>2026-08-15 10:22</del></td>
</tr>
若该行代表逻辑上已作废的数据（如数据库软删除），优先用 del；若仅是信息过时（如旧价对比），可用 s。别图省事写 JS 动态加 class —— 那样屏幕阅读器根本感知不到删除语义。
text-decoration: line-through 和 的关系不是“替代”，而是“分工”
text-decoration: line-through 是纯视觉控制，不带任何语义；del 是语义容器，浏览器默认渲染为删除线，但它的价值在 DOM 层和辅助技术中。
关键事实：
- 只加 CSS 删除线 → 读屏器不会提示“已删除”，搜索引擎不认为内容更新，WCAG 不认可为可访问删除标记
- 只用
del 不加 CSS → 浏览器默认灰黑色删除线，粗细/颜色/间距不可控，跨浏览器表现不一致
- 最佳实践：用
del 表达语义，再用 CSS 微调视觉：del { text-decoration-color: #e74c3c; text-decoration-thickness: 2px; }
-
text-decoration-skip-ink: none 可避免文字笔画被删除线“吃掉”，尤其对小字号或连笔字体很关键
容易被忽略的是：删除线效果一旦脱离语义层，就退化为装饰；而语义层一旦缺失，再精细的 CSS 也无法补救可访问性缺口。
HTML 规范禁止 del、s 等短语内容（Phrasing Content）标签直接包裹 tr 这类表格结构元素。写成 <del><tr>...</tr></del> 会被浏览器自动“修复”，通常把 del 提升到 tr 外或丢弃，DOM 结构错乱，CSS 也失效。
正确做法是为每个 td 内容单独包裹语义标签：
<tr> <td><del>订单号-20260815</del></td> <td><del>已取消</del></td> <td><del>2026-08-15 10:22</del></td> </tr>
若该行代表逻辑上已作废的数据（如数据库软删除），优先用 del；若仅是信息过时（如旧价对比），可用 s。别图省事写 JS 动态加 class —— 那样屏幕阅读器根本感知不到删除语义。
text-decoration: line-through 和 的关系不是“替代”，而是“分工”
text-decoration: line-through 是纯视觉控制，不带任何语义；del 是语义容器，浏览器默认渲染为删除线，但它的价值在 DOM 层和辅助技术中。
关键事实：
- 只加 CSS 删除线 → 读屏器不会提示“已删除”，搜索引擎不认为内容更新，WCAG 不认可为可访问删除标记
- 只用
del不加 CSS → 浏览器默认灰黑色删除线，粗细/颜色/间距不可控，跨浏览器表现不一致 - 最佳实践：用
del表达语义，再用 CSS 微调视觉：del { text-decoration-color: #e74c3c; text-decoration-thickness: 2px; } -
text-decoration-skip-ink: none可避免文字笔画被删除线“吃掉”，尤其对小字号或连笔字体很关键
容易被忽略的是：删除线效果一旦脱离语义层，就退化为装饰；而语义层一旦缺失，再精细的 CSS 也无法补救可访问性缺口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
