HTML特殊字符编码与转义完全指南：从实体名称到XSS防范实践

引言

在HTML开发中，我们经常会遇到需要显示诸如 <、>、& 等特殊字符的情况。如果直接在HTML代码中书写这些字符，浏览器会将它们解析为标签或实体，从而导致页面渲染错误或布局混乱。为了正确显示这些特殊字符，我们需要使用HTML实体编码。本文将详细介绍几种常见的实体编码方案，帮助你轻松应对HTML特殊字符的显示问题。

常见的HTML特殊字符

在HTML中，以下字符具有特殊含义，如果想要将它们作为普通文本显示，必须进行转义：

• < (小于号)：标签开始符

• > (大于号)：标签结束符

• & (和号)：实体开始符

• " (双引号)：属性引号

• &apos; (单引号)：属性引号

方案一：使用命名实体

命名实体是使用易于记忆的名称来表示特殊字符，格式为 &名称;。这是最常用且可读性最好的方案。例如，使用 &lt; 表示小于号，&gt; 表示大于号。

<p>显示小于号：&lt;</p>
<p>显示大于号：&gt;</p>
<p>显示和号：&amp;</p>

这种方案的优点是直观，开发者在阅读源码时能立刻明白代表什么字符。

方案二：使用十进制数字实体

每个字符在Unicode字符集中都有一个对应的十进制码点，格式为 &#码点;。这种方案适用于没有命名实体的特殊字符，比如版权符号、注册商标等。

<p>版权符号：&#169;</p>
<p>注册商标：&#174;</p>
<p>小于号也可以这样写：&#60;</p>

方案三：使用十六进制数字实体

与十进制类似，十六进制数字实体使用十六进制的码点值，格式为 &#x码点;。CSS中常用这种形式，HTML中同样适用，特别是在处理Emoji或生僻字时非常方便。

<p>人民币符号：&#xA5;</p>
<p>笑脸Emoji：&#x1F600;</p>

方案四：JavaScript动态转义处理

在实际开发中，如果用户输入的内容包含特殊字符，直接拼接到HTML中可能会导致XSS攻击或显示异常。推荐编写转义函数对内容进行处理后再插入DOM。

function escapeHtml(text) {
    return text.replace(/&/g, '&')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;')
               .replace(/'/g, '&#039;');
}

// 使用示例
let userInput = '<script>alert("XSS")</script>';
let safeText = escapeHtml(userInput);
document.getElementById('output').innerHTML = safeText;

实战场景：URL参数中的特殊字符

当我们在HTML中构建带有参数的URL时，如果参数值包含特殊字符，也需要进行转义，否则可能会截断URL或解析错误。假设我们要链接到第三方演示站点，且参数中包含小于号：

<a href="http://www.ipipp.com/demo?param=1&lt;2">点击访问</a>

在上述例子中，参数值为 1<2，如果不将 < 转义为 &lt;，浏览器可能会错误解析标签结构，导致链接失效或页面变形。

总结与最佳实践

1. 优先使用命名实体：对于 <、>、& 等常见字符，命名实体可读性更高，便于团队协作与代码维护。

2. 复杂字符使用数字实体：遇到没有命名的特殊符号（如各种emoji或生僻字），使用十进制或十六进制数字实体是最稳妥的选择。

3. 防范XSS攻击：永远不要直接将用户输入拼接到HTML中，务必在后端或前端进行转义处理。

4. CSS和JS中的处理：在CSS的 content 属性中使用十六进制形式（如 03c），在JS中尽量使用 textContent 代替 innerHTML，以避免浏览器解析特殊字符带来的风险。

HTML实体编码特殊字符转义命名实体XSS防范数字实体