如何在 HTML 页面中正确显示原始代码？深入理解 HTML 转义字符（附在线转义工具推荐）

在日常前端开发、编写技术博客或构建在线教程平台的过程中，经常会遇到一个问题：如何在 HTML 页面中显示代码本身而不是被浏览器解析？

比如你想展示 <div>、<script>、  等标签或符号，但页面却直接把它当 HTML 执行了。这种时候，就需要用到 HTML 转义字符 或更合理的代码展示方式。

这篇文章将系统讲解：

• 什么是 HTML 转义字符
• HTML 转义的适用场景和不适用场景
• 如何更优雅地展示 HTML 原始代码
• 常用 HTML 实体符号对照表
• 实用的 HTML 转义在线工具推荐

什么是 HTML 转义字符（HTML Escape Character）

HTML 转义字符是一种在 HTML、XHTML 或 XML 中使用的字符表示方式，目的是在页面中显示原本具有特殊意义的字符，比如 <、>、& 等。

常见的转义形式包括：

1. 命名字符引用（Named Character Reference）

• < → <
• > → >
• & → &
• " → "
• ' → '

2. 数值字符引用（Numeric Character Reference）

• 十进制形式：< → <
• 十六进制形式：< → <（大小写均可）

与命名实体相比，数值字符引用在某些解析器和跨平台场景中更加稳妥。

哪些场景需要使用 HTML 转义字符？

HTML 转义字符在以下几种场景中非常实用：

• 在网页中展示 HTML/CSS/JavaScript 原始代码
• 在技术博客中避免标签被浏览器解析
• 在富文本或 Markdown 中安全地插入特殊字符
• 某些字符在 HTML 中不能直接使用时（如空格、引号、尖括号）

示例：

<p>&lt;div class="box"&gt;Hello World&lt;/div&gt;</p>

页面将展示为：

<div class="box">Hello World</div>

什么时候不建议使用 HTML 转义字符？

虽然转义字符在很多场景下非常有用，但在以下情况下，应避免滥用：

• 当页面使用 UTF-8 编码时，大多数字符可直接显示，无需转义；
• 在 <style> 标签或外部 CSS 文件中不能使用 HTML 实体；
• 在大型项目中手动转义字符，增加了维护难度；
• 使用命名实体时，如果解析器无法访问实体定义，将导致解析失败。

推荐做法：在需要使用实体的场合，优先选择数值字符引用，兼容性更好。

更优雅的 HTML 原始代码展示方法（推荐）

如果你不想手动一个字符一个字符地转义，可以采用以下几种方式来动态展示原始 HTML 代码，避免被解析：

方法一：使用 <script type="text/plain">

<pre id="code-block"></pre>

<script type="text/plain" id="raw-code">
  <div class="demo">
    <p>Hello HTML</p>
  </div>
</script>

<script>
  const code = document.getElementById("raw-code").textContent;
  document.getElementById("code-block").textContent = code;
</script>

适合展示 HTML、CSS、JS 等原始代码，格式清晰、无需手动转义。

方法二：使用 <template> 标签

<pre id="output"></pre>

<template id="html-code">
  <section>
    <h2>标题</h2>
    <p>内容段落</p>
  </section>
</template>

<script>
  const code = document.getElementById("html-code").innerHTML;
  document.getElementById("output").textContent = code.trim();
</script>

语义化更强，适用于结构化展示场景。

方法三：通过 fetch() 读取外部代码文件

适合展示大型项目中的片段：

fetch("demo-snippet.html")
  .then((res) => res.text())
  .then((code) => {
    document.getElementById("code-block").textContent = code;
  });

这种方式适合多人协作项目或自动化代码文档系统。

常用 HTML 实体符号对照表

提示：你可以使用任何 Unicode 字符的十进制或十六进制编码来转义它。

更多 HTML 转义字符请查看：常用 HTML 转义字符速查表

在线 HTML 转义工具（支持反转义）

为了避免手动转义的繁琐过程，这里推荐我个人开发的一个轻量级在线工具：

HTML-Escaper

地址：HTML-Escaper

功能特点：

• 支持 HTML 字符的一键转义和反转义
• 输入即转义，无需手动替换
• 支持复制、清空等便捷功能
• 免费、简洁易用

适合前端工程师、博客作者、技术文档写作者日常使用。

总结

通过理解 HTML 转义字符的作用和使用场景，并结合现代浏览器的功能，我们可以更高效、安全地在网页中展示 HTML 原始代码。如果你正在写博客、做教程或前端文档，这些方法都能大大提升你的效率和页面质量。

如果你有更多使用技巧，也欢迎留言交流。