HTML原生u标签不支持波浪线，需用CSS text-decoration: wavy配合语义化标签（如ins/del或span+ARIA）实现；ins/del具原生波浪线语义与可访问性，但仅适用于真实增删场景；纯视觉波浪线须配文字提示、足够对比度及交互优化。
HTML 原生不支持 u 标签渲染波浪线，必须用 CSS 实现
HTML 的 <u> 标签默认只画普通下划线，且语义上已从“非标准文本”演变为“带下划线的文本”（HTML5），但完全不支持波浪线。想同时实现语义清晰、样式可控、可访问性友好的下划线/波浪线标记，得靠 CSS 的 text-decoration 系列属性配合语义化标签（如 <span> 或 <ins>）。
常见错误是直接写 <u>xxx</u> 试图加波浪线，结果无效；或者滥用 <span style="text-decoration: wavy">，丢失语义和屏幕阅读器识别能力。
-
text-decoration: underline是默认下划线，兼容性好，但无法控制颜色、粗细、位置 -
text-decoration: wavy必须搭配text-decoration-color和text-decoration-thickness才能可靠显示（Chrome 89+、Firefox 97+、Safari 17.4+ 支持） - 若需兼容旧浏览器（如 IE 或旧版 Safari），只能用
background-image模拟波浪线，但会破坏文本可选性和复制行为
ins 和 del 是唯一带原生波浪线语义的 HTML 元素
<ins> 表示插入内容，<del> 表示删除内容，多数浏览器默认用波浪线下划线（ins）和波浪线中划线（del）渲染，且自带 ARIA 语义（role="insertion" / role="deletion"），屏幕阅读器会读出“已插入”或“已删除”。
但注意：这不是装饰性样式，而是严格语义标记。如果只是强调某段文字（比如重点词、术语、待审核内容），硬套 <ins> 会误导辅助技术与搜索引擎。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：文档修订、协作编辑、版本对比等真实增删场景
- 不可用于替代
<em>或<mark>做强调或高亮 - 样式可覆盖：
ins { text-decoration: wavy green; }，但语义不变
用 span + CSS 实现可复用、可语义化的自定义修饰
最稳妥的做法是用 <span> 包裹文本，通过 class 控制样式，并用 aria-label 或 role 补充语义（如 role="note" 或 aria-label="重点术语"）。
<span class="underline" aria-label="技术术语">API</span> <span class="wavy" aria-label="待确认内容">预计交付时间</span>
CSS 示例（含降级）：
.underline {
text-decoration: underline;
text-decoration-color: #0066cc;
}
.wavy {
text-decoration: wavy underline;
text-decoration-color: #e74c3c;
text-decoration-thickness: 2px;
/* 降级：旧浏览器 fallback 为普通下划线 */
@supports not (text-decoration: wavy underline) {
text-decoration: underline;
text-decoration-color: #e74c3c;
}
}- 避免用
text-decoration-line: underline单独写，它不支持wavy值；必须写全text-decoration: wavy underline -
text-decoration-skip-ink: auto推荐开启，防止下划线穿过小写字母 g/j/y 的下伸部分 - 若需精确控制波浪线起始/结束位置，CSS 目前无原生方案，只能用 SVG 背景图——但会增加维护成本和加载开销
移动端与可访问性容易被忽略的关键点
在 iOS Safari 和部分安卓浏览器中，text-decoration: wavy 渲染可能偏细或不连贯；更严重的是，纯视觉修饰（如波浪线）对色觉障碍用户几乎不可见，且无法被键盘导航聚焦。
- 永远配对比色：波浪线颜色与文本色亮度差至少 3:1（WCAG AA）
- 不要仅靠波浪线传递关键信息——必须辅以文字提示（
aria-label）、图标或背景色 - 触摸设备上，波浪线区域不能过窄，否则影响点击热区；建议给
span加padding-bottom: 2px扩展交互范围 - 若文本需复制，避免用
background-image模拟波浪线，它会导致复制时丢失修饰效果
波浪线不是装饰开关，它是语义信号。用错地方，比不用更危险。
