应优先使用语义化标签：表强重要性（读屏加重），表强调，唯一可靠保留空白符，/准确表达增删语义，仅用于真实代码；废弃等非语义标签。
<strong></strong> 和 <em></em> 应该优先于 <b></b> 与 <i></i>；<pre class="brush:php;toolbar:false;"></pre> 是处理原始空格与换行的唯一可靠方式；<u></u>、<s></s>、<big></big> 等标签已被废弃或不推荐使用——这不是风格偏好，而是语义正确性与可访问性的硬性要求。
什么时候该用 <strong></strong> 而不是 <b></b>
两者都让文字加粗，但浏览器和屏幕阅读器对待它们完全不同。<strong></strong> 表示内容具有强重要性，会被读屏软件加重语气朗读；<b></b> 仅是视觉加粗，无语义。比如价格标签“¥99”需要强调，用 <strong>¥99</strong>；而品牌 logo 中的字母加粗（如 “GOOGLE” 全大写+加粗）属于纯样式，才考虑 <b></b> ——但更推荐用 CSS 的 font-weight 控制。
常见错误现象：
- 用
<b></b>标记警告信息（如“操作不可逆！”），导致读屏用户无法感知风险等级 - 在 SEO 关键词堆砌中滥用
<strong></strong>，被搜索引擎视为操纵信号
<pre class="brush:php;toolbar:false;"></pre> 是唯一能保留缩进和多空格的 HTML 标签
<pre class="brush:php;toolbar:false;"></pre> 不只是“预格式化”，它会原样输出所有空白符（包括 Tab、连续空格、换行），且默认使用等宽字体。这是展示代码、ASCII 图、对齐表格数据的底线方案。
使用场景：
- 嵌入 shell 命令输出：
<pre class="brush:php;toolbar:false;">$ ls -la<br>total 8<br>drwxr-xr-x 2 user user 4096 Jan 1 10:00 .</pre> - 显示数学公式排版（需配合
<code>提升语义）：<pre class="brush:php;toolbar:false;"><code>x² + y² = z²</code></pre>
注意：<pre class="brush:php;toolbar:false;"></pre> 内部的 HTML 标签不会被解析，如果需要高亮关键词，得用 JS 动态插入或服务端渲染后转义。
<ins></ins> 和 <del></del> 比 CSS 下划线/删除线更准确
很多开发者用 text-decoration: underline 或 line-through 模拟插入/删除效果，但这丢失了语义。而 <ins></ins> 表示“此处新增内容”，<del></del> 表示“此处已删除”，对版本对比、协作编辑、无障碍导航至关重要。
参数差异：
-
<ins datetime="2026-09-28T14:22"></ins>可记录修改时间，供审计或 diff 工具识别 -
<del cite="reason-for-deletion"></del>可附加删除理由（虽不渲染，但保留在 DOM 中） - CSS 仍可覆盖默认样式：
ins { background: #ffeb3b; text-decoration: none; }
<code> 必须用于真实代码片段，不能泛化为“等宽字体”
<code> 是语义标签，专指计算机源码、命令、文件名等。它不是“让文字变等宽”的万能开关。比如“输入 npm install 并回车”是对的；但把产品名称“iPhone 15”包进 <code> 就错——那该用 <var></var> 或直接 CSS。
容易踩的坑：
- 嵌套错误：在
<code>内再用<strong></strong>会破坏语义层级，应改用 CSS 类控制高亮 - 未转义特殊字符：直接写
<code>for (let i=0; i会导致被误解析为标签，必须写成 <code><10 - 忽略可访问性：屏幕阅读器对
<code>有特定播报逻辑（如逐字读出符号），长代码块需配合<pre class="brush:php;toolbar:false;"></pre>和aria-label
真正难的是在语义精确性和视觉自由度之间找平衡——比如一个带语法高亮的代码块，既要保留 <code> 的语义，又得避免内联样式污染结构，这时候就得靠现代 CSS 自定义属性或 Web Component 封装，而不是硬塞一堆 <span class="token keyword"></span>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
