HTML5中标签用于语义化标注专有名词，需配合title和class提供解释与样式控制，禁用默认下划线并用CSS定制视觉效果，兼顾可访问性与跨浏览器兼容性。
标签在HTML5中确实可用于标注专有名词，但它的作用不是“加装饰性下划线”，而是传达语义：告诉浏览器和辅助技术“这段文本在风格或功能上与周围不同”。比如中文人名、地名、术语、外来语等，属于“非标准拼写或需特别提示的内容”。
直接用实现视觉下划线是误用，且样式不可控、可访问性差。真正合规的做法是：保留的语义用途，再用CSS单独定制其外观。
用正确标注专有名词
专有名词需配合明确语义说明，不能只靠视觉。推荐写法：
<p>他来自<u title="中国江苏省南京市" class="proper-noun">南京</u>，曾就读于<u title="美国加利福尼亚州斯坦福大学" class="proper-noun">斯坦福大学</u>。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
-
title属性提供简明解释，供鼠标悬停或屏幕阅读器朗读 -
class="proper-noun"用于挂载样式和增强语义（如后续加ARIA属性）
⚠️ 注意：不要写 <u>张三</u> 这类无上下文的裸用——既没说明是什么类型专有名词，也没提供可访问支持。
自定义的下划线样式（语义+视觉兼顾）
既然默认下划线只是兼容性残留，现代项目必须重置并重写：
u.proper-noun {
text-decoration: underline;
text-decoration-color: #2563eb; /* 蓝色下划线，区别于链接 */
text-decoration-thickness: 1.8px; /* 线粗，更清晰 */
text-underline-offset: 4px; /* 抬高距离，避开“g”“y”等降部 */
text-decoration-skip-ink: auto; /* 自动跳过文字笔画，防穿字 */
}✅ 这样既保留了<u></u>的语义定位，又实现了专业级视觉控制。
兼容旧版浏览器的降级方案
Safari 15.3 及更早版本不支持 text-underline-offset 和 text-decoration-skip-ink。若需支持，可用 border-bottom 替代，但要注意：
u.proper-noun {
text-decoration: none; /* 先清掉默认下划线 */
border-bottom: 1.8px solid #2563eb;
padding-bottom: 2px; /* 模拟 offset，避免贴底 */
display: inline-block; /* 防止 border-bottom 影响行高 */
line-height: 1.3; /* 手动微调，保持段落整齐 */
}⚠️ border-bottom 不会跨行连续，长专有名词换行时下划线会中断；如需完美跨行，仍应优先依赖现代 text-decoration 方案，并接受 Safari 旧版略低的显示精度。
补充建议：增强可访问性
-
在全局CSS中禁用
<u></u>的默认样式，避免意外干扰：u { text-decoration: none; } -
对专有名词类，可加 ARIA 标识（非必需，但更严谨）：
<u title="江苏省省会城市" class="proper-noun" aria-label="地名：南京">南京</u>
避免在
<a></a>内嵌套<u></u>，防止下划线叠加、语义混乱。
不复杂但容易忽略：语义先行，样式后置；<u></u>不是快捷键，而是注解工具。
