应优先用CSS实现下划线、加粗、斜体等样式，避免语义错位；<u>仅用于拼写错误或专名号，<strong>表重要性并影响读屏与SEO，<b>仅视觉强调，<mark>须有明确上下文参考价值，<pre>需配合CSS处理换行与溢出。
别用 <u> 做下划线样式，也别靠 <b> 和 <i> 实现加粗/斜体视觉效果——语义错位 + 可访问性风险 + CSS 覆盖更麻烦。
为什么 <u> 在 HTML5 里不能随便用
浏览器默认把 <u> 渲染成下划线，但用户早已习惯「下划线 = 可点击链接」。用它标记普通文本（比如强调词、专名），屏幕阅读器不会特殊提示，键盘焦点也不会自动跳转，反而造成认知混淆。
HTML5 明确重定义了 <u> 的语义：仅用于拼写错误（<u class="spelling">recieve</u>）、中文专名号、或需要视觉区分但无链接含义的文本。真实项目中，95% 的「下划线需求」该用 CSS：text-decoration: underline + 自定义 text-underline-offset 控制位置。
- 误用示例：
<p>价格：<u>¥199</u> → ¥149</p>（用户会误点） - 正确替代：
<p>价格：<span class="price-old">¥199</span> → ¥149</p>，配合 CSS 设置.price-old { text-decoration: line-through; }
<strong> 和 <b> 的实际渲染差异在哪
多数浏览器默认都把两者渲染为加粗，但语义和辅助技术处理完全不同：<strong> 会被屏幕阅读器加重语气朗读，SEO 也会赋予更高权重；<b> 仅表示「引起注意」，不暗示重要性。
立即学习“前端免费学习笔记（深入）”；
典型误用场景是后台系统里的操作按钮文字或表头：<th><b>操作</b></th> —— 这里应该用 <th><strong>操作</strong></th>，因为它是功能关键字段，不是单纯视觉突出。
- 适合
<b>：商标名（<b>Lobster AI</b>）、产品型号（<b>Model X2</b>），纯标识用途 - 适合
<strong>：错误提示（<strong>密码长度不足 8 位</strong>）、权限警告（<strong>此操作不可撤销</strong>）
用 <mark> 替代高亮背景的三个前提
<mark> 不是「随便加黄色背景」的快捷键。它的语义是「在引用上下文中具有参考价值的片段」，比如搜索结果中的关键词、文档修订时的新增内容、或代码示例中的重点行。
直接写 <p>请关注<mark>这个参数</mark>的取值</p> 很容易被质疑：为什么是它？上下文在哪？如果只是想让某段话更醒目，<strong> 或 CSS background-color 更合适。
- 合理用法：
<blockquote><p>正如规范所述：<mark>"属性值必须为小写字母"</mark></p></blockquote> - 避免滥用：不要在整段说明文字里给 5 个词都套
<mark>，稀释语义 - 兼容性注意：IE9+ 支持，但默认样式（黄底黑字）可能与设计稿冲突，务必重置
mark { background-color: #ffeb3b; }
<pre> 保留格式的隐藏限制
<pre> 确实保留空格和换行，但它默认使用等宽字体、且 white-space 行为固定为 pre —— 这意味着它不会自动换行，长行会撑破容器，移动端尤其危险。
真正需要「保留格式 + 自动换行」时，应该用 CSS 控制：<div class="code-block">...</div> 配合 white-space: pre-wrap，再加 overflow-x: auto 处理超宽内容。
- 别这样：
<pre>for (let i = 0; i < 1000; i++) { console.log(i); }</pre>（超长单行溢出） - 推荐这样：
<div class="pre-like">for (let i = 0; i < 1000; i++) {<br> console.log(i);<br>}</div>+ CSSwhite-space: pre; font-family: monospace; - 注意：
<pre>里的<code>是嵌套合法的，但别嵌套<div>或<p>—— 它只接受 phrasing content
最常被忽略的是语义与样式的耦合点：比如用 <small> 标记版权信息是对的，但把它当成「缩小字体」工具去压按钮文字大小，就破坏了可访问性。每个标签的语义边界比视觉表现更硬。
