标签不该用于加下划线,因其仅限语义化场景(如拼写错误、专有名词),且存在可访问性、样式控制与协作误导问题;应统一用text-decoration等css属性实现可控、语义清晰的下划线效果。

别用 <u></u> 标签加下划线——它不是“格式化标签”的合理选择,现代项目里基本该禁用。
为什么 <u></u> 标签不该用来加下划线
HTML5 明确限制了 <u></u> 的使用场景:它只适用于语义化标注,比如拼写错误(需配合 spellcheck="false")、专有名词、或非拉丁文字中的特定用法。浏览器默认渲染的下划线只是视觉副作用,不是设计目的。
- 屏幕阅读器可能读作 “underline”,造成语义干扰
- 不同浏览器对
<u></u>下划线离基线的距离不一致(Chrome 和 Safari 差 1–2px) - 无法控制颜色、线型、偏移量,也不能和链接样式区分
- 若你只是想让“重点词”带下划线,
<u></u>会误导协作同事和未来维护者
text-decoration 是唯一靠谱的下划线入口
所有现代浏览器都支持 text-decoration: underline,且它是可组合、可继承、可响应式控制的 CSS 属性。关键不是“能不能用”,而是怎么用得干净、可控、不翻车。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 优先用类名控制,比如
.highlight-underline,避免内联样式污染结构 - 单独设置
text-decoration-line: underline,比直接写text-decoration: underline更安全——后者会重置color和style - 遇到字母 g/y/j/p 等降部字形穿线?加
text-underline-offset: 3px(Safari 15.4+、Chrome 95+、Firefox 89+ 支持;旧版用border-bottom替代) - 要跳过文字笔画(避免下划线切穿“e”或“o”),启用
text-decoration-skip-ink: auto(已全平台支持)
链接下划线和普通下划线必须区分开
用户靠下划线识别可点击内容。如果你给普通文本也加蓝色实线下划线,就等于主动放弃可用性。
- 普通文本下划线建议用灰色(如
#666)或与文字同色,线型改用dotted或wavy - 真实链接应先清除默认样式:
a { text-decoration: none; },再统一用border-bottom实现,比如border-bottom: 1px solid #007bff - 加了
border-bottom后别忘了补cursor: pointer和合适的color,否则用户点不下去也不知道能点 - hover 时换线型(如
text-decoration-style: wavy)比换颜色更易感知,且不破坏色彩对比度
真正难的不是“怎么加”,而是“加在哪、加多长、加多深、加给谁看”。下划线是视觉线索,不是装饰;一旦它开始和链接、拼写错误、专有名词混用,你就得花三倍时间调试可访问性和语义一致性。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










