仅用于拼写错误等语义场景，非下划线样式替代；标记上下文相关片段，非视觉高亮；是软换行提示，不强制换行；保留格式但限于等宽场景，需转义特殊字符。
别用 做下划线样式，它不是 CSS 替代品
<u></u> 在 HTML5 中语义已明确：仅用于标注拼写错误、专有名词或非标准文本，**不是**给普通文字加下划线的快捷方式。浏览器默认渲染虽带下划线，但会与 <a></a> 链接视觉混淆，读屏软件也会误读为可点击内容。
实际使用中容易踩的坑：
- 直接用
<u>重要通知</u>试图强调——这违反语义，应改用<strong></strong>或 CSStext-decoration: underline - 在中文文档里滥用
<u></u>标人名/地名——除非是教学场景中刻意标出“此处写法存疑”，否则应靠 class + CSS 控制外观 - 依赖
<u></u>实现链接样式——<a href="#"></a>才是正确载体，且需确保href有效或设为role="link"
<mark></mark> 不是高亮笔，是语义锚点
<mark></mark> 的核心作用是标记“在当前上下文中具有特殊相关性的片段”，比如搜索结果中的关键词、引用原文中的重点句、或对比文档里的变更部分。它不等于“我想让这段字显眼”。
常见误用场景：
- 全页多处用
<mark>价格：¥199</mark>做促销色块——这是样式需求，该用<span class="price-sale"></span> - 嵌套在
<h2></h2>里标标题重点词——<h2>新品发布：<mark>AI驱动</mark>体验</h2>合理；但<h2> <mark>AI驱动</mark>新品发布</h2>削弱了标题整体性 - 和
<strong></strong>混用表达同一层强调——二者语义不同：<strong></strong>表达作者强语气，<mark></mark>表达上下文强关联，不可互换
<wbr></wbr> 要用在真·断点上，不是防溢出万能药
<wbr></wbr> 是一个“建议浏览器在此处换行”的软提示，**不强制换行，也不添加空格或连字符**。它只在容器宽度不足、且当前单词天然难折行（如长域名、无连字符的驼峰命名）时才生效。
典型有效用例：
- 邮箱地址：
contact<wbr>@example<wbr>.com</wbr></wbr> - 技术名词：
Web<wbr>Assembly</wbr>、React<wbr>Router</wbr> - 超长数字串：
2026<wbr>0928<wbr>1854</wbr></wbr>
无效或危险用法：
- 在中文词间乱插：
这<wbr>是<wbr>一<wbr>个<wbr>错<wbr>误</wbr></wbr></wbr></wbr></wbr>——中文本就按字换行，<wbr></wbr>完全冗余 - 代替 CSS 的
word-break: break-all或overflow-wrap: break-word——后者才是处理长不可折字符串的正解 - 期望它像
那样显示连字符——<wbr></wbr>不渲染任何可见字符
<pre class="brush:php;toolbar:false;"></pre> 保留空格≠适合所有“格式化”场景
<pre class="brush:php;toolbar:false;"></pre> 确实保留换行、空格、缩进，但它会强制使用等宽字体，且默认无 margin/padding，直接用于代码块或诗歌之外的场合，往往导致排版突兀。
更稳妥的选择：
- 想保留缩进但用常规字体？用
<div> + <code>white-space: pre-line或pre-wrap - 展示代码？优先用
<pre class="brush:php;toolbar:false;"><code></code> 组合，并配 <code>tab-size</code> CSS 属性控制缩进宽度</pre> - 显示命令行输出？
<pre class="brush:php;toolbar:false;"></pre>合理，但注意<code>内部不能嵌套<pre class="brush:php;toolbar:false;"></pre>，否则结构非法 - 制表符
\t渲染不稳定？一律替换为空格——不同浏览器对\t的像素宽度解释差异大
最常被忽略的一点：<pre class="brush:php;toolbar:false;"></pre> 内容里的 、<code>& 等字符必须手动转义为 <、&，否则会被解析为标签——这点比普通段落严格得多。
