<u>是内联元素，<p>允许嵌套内联内容（如<strong>、<em>、<a>、<u>等），禁止嵌套块级元素（如<div>、<h2>、<p>），因此<p><u>文字</u></p>合法安全，浏览器正常解析；而<p><div>...</div></p>会被自动修正为<p></p><div>...</div><p></p>，破坏DOM结构。
直接写 <p><u>文字</u></p> 就行，这是合法且安全的嵌套方式
为什么 <u> 能放进 <p> 里
<u> 是内联元素，<p> 允许包含内联内容（文本、<strong>、<em>、<a>、<u> 等），但不能放块级元素（如 <div>、<h2>、另一个 <p>）
浏览器解析时不会报错，也不会自动拆段落 —— 这和 <p><p>xxx</p></p> 的行为完全不同
-
<p><u>重点内容</u>其余文字</p>✅ 正常渲染为一行带下划线的段落 -
<p><div>xxx</div></p>❌ 浏览器会“修复”成<p></p><div>xxx</div><p></p>，导致意外 DOM 结构
<u> 在现代 HTML 中是否推荐使用
<u> 自 HTML5 起已不再是“纯装饰性标签”，而是有语义含义：表示非文本性标注（如拼写错误、专有名词、翻译注释等），不是用来替代 CSS text-decoration: underline
立即学习“前端免费学习笔记（深入）”；
如果你只是想加下划线样式，更推荐用 <span> + CSS：
<p><span style="text-decoration: underline;">强调文字</span>正常文字</p>
这样语义更干净，也方便后续统一控制样式
- 用
<u>：适合标记“需要视觉区分但又不属于强调或链接”的内容（比如校对稿里的待审词） - 用
style="text-decoration: underline"或 class：适合纯表现需求，不影响语义 - 避免用
<u>包含链接（<a>），否则下划线会叠加，可读性差
容易被忽略的兼容性细节
<u> 在所有现代浏览器中都支持，但默认样式在不同系统略有差异：
- Chrome / Edge：单线、贴近文字基线
- Safari：稍细、略偏下
- 部分旧 Android WebView：可能渲染为虚线下划线
如果要求严格一致，必须显式重置：
u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
注意：text-decoration-thickness 和 text-underline-offset 在 IE 中不支持，如需兼容 IE，只能回退到 border-bottom 模拟
真正麻烦的从来不是怎么写，而是写完才发现 <p> 里塞了个 <div> 或漏写了 </u> —— 浏览器自动修复后，DOM 结构和你写的完全不是一回事
