HTML 中没有字幕标签， 仅合法用于拼写错误或中文专有名词，其他下划线需求须用 span 配合 text-decoration 四属性（underline、color、skip-ink、offset）控制，避免语义污染与兼容问题。
HTML 里没有“字幕标签”这个东西，<u></u> 不是字幕标签，也不是下划线装饰工具——它只在两种语义场景下合法：拼写错误、中文专有名词。其他所有加下划线的需求，都该用 span + text-decoration 控制。
为什么不能把 <u></u> 当作“字幕下划线标签”用
浏览器确实会渲染 <u></u> 的下划线，但这是历史遗留行为，不是设计意图。HTML5 明确定义它的语义是“非标准文本标注”，不是“我要加条线”。实际踩坑包括：
- 多数 CSS 重置库（如 Normalize.css、Tailwind base）默认清空
u { text-decoration: none }，你写的<u>标题</u>在项目里根本不出线 - 屏幕阅读器通常忽略
<u></u>的存在，或把它读成“拼错的词”，造成语义污染 - 协作时别人看到
<u></u>，第一反应是“这人是不是标错了拼音”，而不是“这是个带下划线的字幕” - SEO 工具可能对正文高频出现的
<u></u>发出警告，尤其当它包裹的是普通关键词时
text-decoration 必须配齐的四个关键属性
只写 text-decoration: underline 在中英文混排、思源黑体、14px 小字号等常见场景下，下划线大概率被字母 g/j/y 的下降部截断，或紧贴基线导致视觉粘连。真正可用的组合是：
-
text-decoration: underline—— 开关，必须显式声明 -
text-decoration-color: #007bff—— 不写就继承文字色，和链接撞色时完全分不清 -
text-decoration-skip-ink: auto—— 避开小写字母下降笔画，防止下划线被“吃掉” -
text-underline-offset: 2px—— 中文推荐 2–3px，英文可设为 1.5px；注意 Safari 15.4+ 和 Chrome 99+ 才稳定支持
示例：
span.subtitle {
text-decoration: underline;
text-decoration-color: #6b7280;
text-decoration-skip-ink: auto;
text-underline-offset: 2px;
}
需要波浪线、虚线或自定义粗细时怎么办
text-decoration-style: wavy 或 dashed 看似方便，但兼容性极差：wavy 在 Firefox 全系不支持，dotted 在旧版 Safari 渲染异常。更稳妥的做法是放弃 text-decoration，改用 background-image 模拟：
立即学习“前端免费学习笔记（深入）”；
- 用
radial-gradient组合生成可控波浪纹，兼容 IE11+ - 必须设
background-origin: content-box，否则波浪会从 padding 区域开始画 - 给元素加
padding-bottom: 4px留出波浪显示空间，不然会被文字裁掉 - 避免用
border-bottom：它会撑高行高、不随字体缩放、subpixel 下发虚
示例（深灰虚线下划线）：
a.subtitle {
text-decoration: none;
background-image: linear-gradient(to right, #6b7280, #6b7280);
background-size: 6px 1px;
background-repeat: repeat-x;
background-position: left bottom;
background-origin: content-box;
padding-bottom: 3px;
}
动态控制下划线（JS 切换/悬停）的正确写法
别在 JS 里拼字符串覆盖整个样式，比如 el.style.cssText = "text-decoration: underline" —— 这会干掉已有内联样式。应该只操作开关值：
- 统一用基础类（如
.has-underline）定义完整下划线行为 - JS 只控制
textDecoration属性的值：el.style.textDecoration = 'underline'或'none' - hover 场景直接用 CSS：
.subtitle:hover { text-decoration: underline; }，别用 JS 监听 - 若需根据状态切换颜色，改用 class 控制：
.subtitle.active { text-decoration-color: #ef4444; }
真正难的不是让线出现，而是判断这段文本是否真有“非链接但需下划线”的业务语义——一旦误判，后期修复可访问性和渲染一致性，成本远高于一开始多写两行 CSS。
