HTML5 中 <u> 标签语义已变为“非文本标注”，不再推荐用于纯视觉下划线；应优先使用 CSS（如 border-bottom）实现，兼顾可访问性、SEO 与跨端兼容性。
HTML 里 <u> 标签还能用吗？
能用，但不推荐直接用 <u>——它在 HTML5 中语义已变，不再是“下划线”而是“非文本标注”，比如拼写错误、专有名词、中文专名号等。浏览器默认仍渲染为下划线，但语义错位会导致可访问性（如屏幕阅读器）和 SEO 风险。
常见错误现象：<u>用户名</u> 看似正常，实际被读屏软件识别为“拼写可疑内容”；Chrome 120+ 已开始对无语义 <u> 发出控制台警告。
- 只在需要表达「文字本身有特殊标注含义」时才用
<u>（例如：<u lang="zh">鲁迅</u> 表示人名专称） - 纯视觉下划线需求，一律改用 CSS
- 若必须兼容极老系统（IE8 及以下），
<u>是唯一选择，但这类场景现在几乎不存在
CSS 实现下划线的三种可靠方式
最常用的是 text-decoration: underline，但它有坑：默认会穿过字母 descender（如 g、y、p 的下延部分），影响可读性；且无法单独控制颜色、粗细、间距。
-
text-decoration: underline：适合快速原型或内联简单标注，注意加text-underline-offset避免压字（如text-underline-offset: 3px） -
border-bottom：更可控，支持颜色、粗细、圆角，但需注意行高（line-height过小会导致贴底难看） -
background-image: linear-gradient()：精准控制位置/长度/虚线，适合设计驱动项目，但代码稍长
示例（推荐 border-bottom 方案）：
<p class="link">点击这里</p>
<style>
.link {
border-bottom: 1px solid #007bff;
display: inline-block; /* 防止撑满父容器 */
}
</style>
React/Vue 里动态加下划线要注意什么？
框架中容易忽略样式继承和作用域隔离问题。比如 Vue 单文件组件用 <style scoped>，border-bottom 可能被覆盖；React 使用 CSS-in-JS 时，伪类 ::after 定位容易失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 避免在
scoped样式里直接写text-decoration，优先用 class 控制，防止深度选择器失效 - 需要 hover 下划线变化时，别只写
a:hover { text-decoration: none }—— 这会清掉所有修饰，应明确重置border-bottom或background-image - 服务端渲染（SSR）项目中，CSS 未加载完成前，
<u>会先显示原生下划线，造成闪烁，统一用 CSS 更稳
移动端下划线的特殊表现
iOS Safari 对 text-underline-offset 支持滞后（iOS 15.4 才完全支持），Android Chrome 则基本没问题。另外，iOS 默认会给 <a> 加阴影下划线，和自定义下划线叠加后显得过重。
- 用
text-decoration-skip-ink: auto（默认值）可跳过 descender，但 iOS 旧版不支持，需配合text-underline-offset降级处理 - 真机调试必测：长按链接触发复制菜单时，下划线是否遮挡文字（尤其小字号 + 粗边框）
- 微信内置浏览器（X5 内核）对
background-image下划线渲染有偏移，建议 fallback 到border-bottom
事情说清了就结束。真正麻烦的不是怎么加那根线，而是加在哪、为什么加、以及加完之后别人怎么看它——尤其是看不见的人。
