网页源码技巧：Var与Samp标签使用解析

为什么 和 不能用来显示源代码

这两个标签不是渲染容器，也不自动转义字符： 表示“运行时可变的值”，比如函数参数 filename； 表示“程序实际输出的原始文本”，比如终端里打印的 File not found: config.json。如果你把未转义的 HTML 字符串塞进 ，浏览器会把它当真实标签解析——

就真成段落了，根本看不到尖括号。

常见错误现象：

• 写

  test

  ，页面只显示 test，且多出一个段落间距
• 用 包含 document.getElementById('x')，结果 JS 报错或被当作变量名执行

正确显示 HTML 源代码的三步操作

核心是：转义 → 包裹 → 可选美化。缺一不可。

实操建议：

• 手动转义必须替换四个字符：< → <，> → >，& → &，" → "（单引号一般不用转）
• 用 包裹转义后的内容，这是语义和样式双重正确的选择
• 配合

  </code> 保留换行与空格，比如：<code><pre><code>&lt;p&gt;...&lt;/p&gt;</code>

• 如需语法高亮，引入 highlight.js 并加 class="language-html"，但注意它仍依赖已转义的源码

和 的真实使用场景