text-decoration: underline是最直接的下划线实现方式；标签语义上专指非标准文本（如拼写错误、专有名词），非视觉装饰用途，现代开发中纯下划线需求应优先使用CSS而非。

用 text-decoration: underline 是最直接的方式

HTML 本身没有专用的“下划线标签”， 虽然存在，但语义上表示**非标准文本**（如拼写错误、专有名词注音等），不是为强调或链接样式设计的。现代开发中，纯视觉下划线一律走 CSS。

实操建议：

• text-decoration: underline 支持所有块级/行内元素，写在 style 属性里或 CSS 规则中都行
• 避免对 标签额外加这个——浏览器默认已有下划线，重复设置可能干扰可访问性
• 若需控制下划线颜色或位置（比如只在文字下方、不穿过字母 g/j/y），得配合 text-decoration-color 和 text-decoration-line 使用

标签什么时候能用？

HTML5 明确定义了 的语义：标注**未被正确拼写的文本**或**需要特殊注释的字词**（例如中文拼音标注、人名异体写法）。它不是装饰性标签。

常见误用场景：

• 给导航菜单项加 做视觉强调 → 应该用 font-weight 或 border-bottom
• 替代 或 表示强调 → 语义错位，影响屏幕阅读器理解
• 在表单提示中用 标出必填字段 → 更合适的是 aria-required + 视觉样式

替代方案：用 border-bottom 比 text-decoration 更可控

当你要下划线离文字更近、粗细固定、不随字体大小缩放，或者要避开 descender（g/p/q/y 等字母的下伸部分）时，border-bottom 是更稳妥的选择。

示例对比：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

<p style="text-decoration: underline">text-decoration</p>
<p style="border-bottom: 1px solid #000">border-bottom</p>

关键差异：

• text-decoration 的位置和粗细由字体度量决定，不同字体表现不一致
• border-bottom 的位置、颜色、宽度完全可控，且不会穿透 descender 区域
• 但 border-bottom 会撑高行高（除非设 line-height 或用 box-sizing: border-box）

注意可访问性与语义混淆风险

下划线在网页中长期被用户识别为“可点击链接”的视觉线索。给非链接文本加下划线，容易引发误操作或认知负担。

真正需要做的判断是：

• 这个文本是否真的代表一个跳转目标？→ 用
• 是否只是强调语气？→ 用 或 + 配套 CSS
• 是否属于拼写校验/语言学标注？→ 才考虑 ，并补充 class 或 title 说明用途

多数所谓“加下划线”的需求，本质是设计表达问题，不是技术实现问题——先确认语义，再选手段。

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