标签的真实作用是标记语义中性、暂无更精确元素描述的文本，如拼写错误、待审人名或中文专有词；其默认下划线仅为历史兼容残留，非设计本意，应配合class和css显式控制样式与语义。
标签在HTML5中不用于添加下划线样式，也不表示“非文本注解”——这是常见误解。它的真实作用是标记一段语义中性、尚未被更精确元素描述的文本，比如拼写错误、待校对的人名、或中文里需临时突出但又不属于 <dfn></dfn>、<code> 的专有词。浏览器默认加下划线，只是历史兼容残留，不是设计本意。
为什么不能用实现“非文本注解”的下划线
- 用户看到下划线第一反应是“这是链接”，尤其在移动端或深色背景下极易误点
- 屏幕阅读器通常忽略
<u></u>内容，或无法准确传达其意图（它不表达强调、引用、错误等可访问语义） - CSS 重置时若遗漏
u { text-decoration: none; }，下划线会意外出现，破坏设计一致性 - 把视觉效果写进 HTML 结构，违背语义化与表现分离原则
真正该用的场景和写法
只有当文本具有明确语义价值，且暂无更合适标签时，才考虑 <u></u>，并必须配合 class 和显式样式：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 拼写错误：
<u class="typo">recieve</u>，CSS 中定义.typo { text-decoration: wavy red underline; } - 待审核人名：
<u class="pending-name">张三丰</u>，配合.pending-name { text-decoration: dotted #666 underline; } - 中文专有词（如方言词、新造术语）：
<u class="term">摆烂</u>，再用 CSS 控制样式和可访问提示
更稳妥的替代方案
绝大多数“想加下划线”的需求，应直接使用 CSS：
- 单次使用：
<span style="text-decoration: underline; text-decoration-color: #007bff;">重点内容</span> - 复用场景：定义
.underline { text-decoration: underline; text-decoration-style: solid; } - 避免混淆：给真实链接取消默认下划线，改用
border-bottom或background-image实现统一风格
如何确保语义清晰又不误导用户
- 绝不依赖
<u></u>默认样式，所有使用都需显式声明 class 并重置/定制text-decoration - 在必要时补充
title或aria-label，例如<u class="typo" title="疑似拼写错误">recieve</u> - 若目标是强调、定义、代码片段等，优先选用
<em></em>、<dfn></dfn>、<code>等语义化更强的标签
不复杂但容易忽略：先判断这段文字“是什么”，再决定“怎么标”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
