标签不是加下划线的视觉工具，而是语义化标记拼写错误、专有名词等未被更精确元素覆盖的文本，必须配合css显式定义样式且禁用默认下划线。

u 标签不是加下划线的快捷方式，它只在语义上成立时才该出现——比如你真正在标一段拼写错误、一个首次出现的专有名词，或一段需要脱离上下文单独识别的技术标识符。

什么时候必须用 u 而不是 span 或 mark

只有当你要标记的内容既不符合 strong（强调）、em（语气）、ins（插入）、del（删除）、dfn（定义）、cite（引用）等任何已有语义，又确实需要在 DOM 层面被单独识别时，u 才是合理选择。

常见误用场景包括：

• 想突出重点 → 应该用 mark（带语义的高亮）或 strong
• 想给变量名加下划线 → 优先用 var 或 code，再加 CSS
• 校对稿中标记错字但没加 class → 浏览器默认下划线会和链接混淆，且屏幕阅读器不播报

为什么不能直接写 <u>text</u>

浏览器虽仍渲染下划线，但这只是兼容性残留，HTML5 规范已剥离其样式含义。直接使用等于把表现逻辑塞进结构层。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

更实际的问题是：

• 移动端无 hover 状态下，u 文本和链接外观几乎一致，用户点击率上升
• 部分屏幕阅读器跳过 u 内容，或读作“下划线文本”，而非内容本身
• 默认下划线位置紧贴基线，可读性差；必须用 text-underline-offset 调整

正确写法示例：

<u class="typo">recieve</u>

配合 CSS：

.typo { text-decoration: wavy red underline; text-underline-offset: 3px; }

替代方案怎么选才不踩坑

多数“想加下划线”的需求，根本不需要 u：

• 纯样式需求 → 直接给 span 加 class，例如 <span class="underline">关键结论</span>
• 术语首次出现 → 用 dfn，它自带语义，且可被 CSS 修饰
• 中文人名/地名需标注 → 可用 u lang="zh" + class，但必须明确用途（如古籍整理、方言标注）
• 代码片段中某个非标准标识符 → 先确认是否真不属于 code、var、kbd 范畴

真正难的不是怎么让文字带下划线，而是判断它是否值得被单独语义化——u 的存在，本质是在提醒你：别急着加样式，先想清楚这段文字“是什么”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！