必须先转义HTML字符再用包裹才能正确显示源代码；和仅表语义，不自动转义，误用会导致解析错误或无障碍问题。
直接显示 HTML 源代码本身不能靠 <var></var> 或 <samp></samp> 实现；它们不负责“展示源码”，而是标注语义角色。真要让网页用户看到一段 HTML 文本（比如 <p>Hello</p>）原样呈现，必须先做转义，再用 <code> 包裹。
为什么 <var></var> 和 <samp></samp> 不能用来显示源代码
这两个标签不是渲染容器，也不自动转义字符：<var></var> 表示“运行时可变的值”，比如函数参数 filename；<samp></samp> 表示“程序实际输出的原始文本”，比如终端里打印的 File not found: config.json。如果你把未转义的 HTML 字符串塞进 <samp></samp>，浏览器会把它当真实标签解析——<p></p> 就真成段落了，根本看不到尖括号。
常见错误现象：
- 写
<samp><p>test</p></samp>，页面只显示 test，且多出一个段落间距 - 用
<var></var>包含document.getElementById('x')，结果 JS 报错或被当作变量名执行
正确显示 HTML 源代码的三步操作
核心是：转义 → 包裹 → 可选美化。缺一不可。
实操建议：
- 手动转义必须替换四个字符：
→ <code><，>→>，&→&，"→"（单引号一般不用转） - 用
<code>包裹转义后的内容，这是语义和样式双重正确的选择 - 配合
<pre class="brush:php;toolbar:false;"></code> 保留换行与空格，比如：<code><pre class="brush:php;toolbar:false;"><code><p>...</p></code></pre> - 如需语法高亮，引入 highlight.js 并加
class="html"，但注意它仍依赖已转义的源码
<var></var> 和 <samp></samp> 的真实使用场景
它们的价值在语义精准，而非视觉效果。滥用反而干扰屏幕阅读器和搜索引擎理解。
典型用法：
-
<var></var>只用于上下文明确的变量实例，例如：The value of <var>count</var> is incremented by 1. -
<samp></samp>仅限用户代理（浏览器/终端）实际输出的原始字符串，例如：Error: <samp>TypeError: Cannot read property 'name' of undefined</samp> - 绝不能用
<samp></samp>包 API JSON 响应体、日志行或带解释的文字（如 “服务器返回 200 OK” 中的 200 OK 是状态描述，不是原始输出） - 三者常嵌套：
<code>console.log(<var>message</var>); // output: <samp>Hello</samp>
容易被忽略的细节
很多人以为加了 <code> 就安全了，其实没转义照样崩。另外，<samp></samp> 在部分旧版 IE 中默认无等宽字体，需 CSS 显式设 font-family: monospace；而 <var></var> 默认斜体，若项目禁用斜体，得额外重置 font-style: normal。语义标签不是装饰品，用错比不用更糟。
