HTML文本转义[编辑 | 编辑源代码]

HTML文本转义（HTML Entity Escaping）是一种在HTML文档中安全显示特殊字符的技术。由于某些字符在HTML中具有特殊含义（如<、>、&等），直接使用它们可能导致解析错误或安全问题。文本转义通过将这些字符替换为对应的HTML实体（HTML Entities），确保它们被正确渲染。

为什么需要文本转义[编辑 | 编辑源代码]

在HTML中，某些字符具有特殊功能：

< 和 > 用于标签界定。
& 用于实体引用。
" 和 ' 用于属性值界定。

如果直接将这些字符写入HTML，浏览器会将其解析为代码而非文本。例如：

<p>这是一个 <div> 示例</p>

输出会错误地尝试解析

为标签，而非显示文本。

常见的HTML实体[编辑 | 编辑源代码]

以下是常用字符及其转义形式：

基本HTML实体
字符	实体名称	实体编号
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
"	`"`	`"`
'	`'`	`'`

转义示例[编辑 | 编辑源代码]

基础示例[编辑 | 编辑源代码]

输入：

<p>5 &lt; 10 且 10 &gt; 5</p>

输出：

5 < 10 且 10 > 5

属性值中的转义[编辑 | 编辑源代码]

输入：

<img src="image.jpg" alt="&quot;重要&quot;图片">

输出：

<img src="image.jpg" alt=""重要"图片">

高级应用[编辑 | 编辑源代码]

JavaScript动态内容转义[编辑 | 编辑源代码]

当通过JavaScript插入内容时，需手动转义：

const text = "用户输入: <script>alert('xss')</script>";
document.getElementById("output").innerHTML = 
  text.replace(/[&<>"']/g, m => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&apos;'
  }[m]));

数学公式中的转义[编辑 | 编辑源代码]

对于包含数学符号的内容： 解析失败 (语法错误): {\displaystyle E = mc^2 \quad \text{需转义为} \quad E &equals; mc&sup2; }

实际案例[编辑 | 编辑源代码]

用户评论系统[编辑 | 编辑源代码]

未转义的用户输入：

用户评论: <script>恶意代码</script>

转义后安全显示：

用户评论: &lt;script&gt;恶意代码&lt;/script&gt;

数据库内容展示[编辑 | 编辑源代码]

从数据库读取包含HTML特殊字符的内容时：

echo htmlspecialchars($dbData, ENT_QUOTES, 'UTF-8');

转义规则总结[编辑 | 编辑源代码]

注意事项[编辑 | 编辑源代码]

1. 过度转义：避免对已转义内容重复转义（如&变为&amp;） 2. 上下文差异：在HTML属性、CDATA区块或JavaScript中的转义规则不同 3. 编码一致性：确保实体编号（如<）与文档编码（UTF-8）兼容

参见[编辑 | 编辑源代码]