html中给文字加下划线应使用css的text-decoration: underline,避免使用标签;推荐通过css类统一管理,兼顾语义、可访问性与兼容性。

HTML 中给文字加下划线用 text-decoration
直接在元素的 style 里写 text-decoration: underline 就行,这是最常用、最可控的方式。
常见错误是误用 <u></u> 标签——它语义上表示“非文本内容的下划线”(比如拼写错误提示),现代 HTML5 已不鼓励用于纯样式目的;浏览器虽仍支持,但可访问性工具可能忽略或误读。
- 推荐写法:
<span style="text-decoration: underline">这段有下划线</span> - 如果要取消默认下划线(比如去掉链接的下划线):
text-decoration: none - 注意:
text-decoration默认会穿过字母下降部分(如 g、y),若想避开,得配合text-underline-offset(较新属性,Chrome 87+ / Firefox 84+ 支持)
用 CSS 类统一管理比内联更稳妥
项目里反复加下划线时,硬写 style 容易漏改、难维护。抽成类名更可靠。
比如定义一个 .highlight-underline:
立即学习“前端免费学习笔记(深入)”;
部分功能简介:商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品,下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩,恢复,备份数据库功能上传文件管理商品类别管理商品添加/修改/
`.highlight-underline {
text-decoration: underline;
text-decoration-color: #0066cc;
text-decoration-thickness: 2px;
}`
然后复用:<strong class="highlight-underline">重点词</strong>
-
text-decoration-color控制颜色,默认继承文字色,但常需单独设(尤其深色背景上) -
text-decoration-thickness可设像素值或auto,避免粗字体下划线过细看不清 - 旧版 IE 不支持后两个属性,只认
text-decoration: underline,如有兼容要求得降级处理
遇到 text-decoration 不生效?先查这三处
下划线“消失”通常不是语法错,而是被其他规则覆盖或继承干扰。
- 父元素用了
text-decoration: none(比如全局重置了a标签),子元素不会自动继承下划线,但会继承“无下划线” - 当前元素设置了
display: inline-block或float,某些老浏览器会丢弃装饰线 - 用了
transform: scale()或font-size: 0等极端样式,可能让下划线渲染错位或不可见
别用 <u></u> 标签做样式,除非真需要语义
<u></u> 在 HTML5 中语义明确:表示旁注、拼写检查标记、专有名词等非强调用途。用它加样式等于滥用语义。
实际效果也受限:无法单独调颜色、粗细、偏移,且部分屏幕阅读器会跳过或误报为“拼写错误”。
- 正确语义用法:
<u lang="zh">张三</u>(标注人名) - 纯视觉需求,一律走
text-decoration+ CSS 类 - 如果必须用标签快速原型,至少加
role="presentation"告诉辅助技术“这只是样式”









