编辑“︁HTML文本转义”︁

= HTML文本转义 =

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

== 为什么需要文本转义 ==
在HTML中，某些字符具有特殊功能：
* <code><</code> 和 <code>></code> 用于标签界定。
* <code>&</code> 用于实体引用。
* <code>"</code> 和 <code>'</code> 用于属性值界定。

如果直接将这些字符写入HTML，浏览器会将其解析为代码而非文本。例如：
<syntaxhighlight lang="html">
<p>这是一个 <div> 示例</p>
</syntaxhighlight>
输出会错误地尝试解析<code><div></code>为标签，而非显示文本。

== 常见的HTML实体 ==
以下是常用字符及其转义形式：

{| class="wikitable"
|+ 基本HTML实体
! 字符 !! 实体名称 !! 实体编号
|-
| < || <code>&lt;</code> || <code>&#60;</code>
|-
| > || <code>&gt;</code> || <code>&#62;</code>
|-
| & || <code>&amp;</code> || <code>&#38;</code>
|-
| " || <code>&quot;</code> || <code>&#34;</code>
|-
| ' || <code>&apos;</code> || <code>&#39;</code>
|}

== 转义示例 ==
=== 基础示例 ===
输入：
<syntaxhighlight lang="html">
<p>5 &lt; 10 且 10 &gt; 5</p>
</syntaxhighlight>
输出：
<pre>
5 < 10 且 10 > 5
</pre>

=== 属性值中的转义 ===
输入：
<syntaxhighlight lang="html">
<img src="image.jpg" alt="&quot;重要&quot;图片">
</syntaxhighlight>
输出：
<pre>
<img src="image.jpg" alt=""重要"图片">
</pre>

== 高级应用 ==
=== JavaScript动态内容转义 ===
当通过JavaScript插入内容时，需手动转义：
<syntaxhighlight lang="javascript">
const text = "用户输入: <script>alert('xss')</script>";
document.getElementById("output").innerHTML = 
  text.replace(/[&<>"']/g, m => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&apos;'
  }[m]));
</syntaxhighlight>

=== 数学公式中的转义 ===
对于包含数学符号的内容：
<math>
E = mc^2 \quad \text{需转义为} \quad E &amp;equals; mc&amp;sup2;
</math>

== 实际案例 ==
=== 用户评论系统 ===
未转义的用户输入：
<syntaxhighlight lang="html">
用户评论: <script>恶意代码</script>
</syntaxhighlight>
转义后安全显示：
<syntaxhighlight lang="html">
用户评论: &lt;script&gt;恶意代码&lt;/script&gt;
</syntaxhighlight>

=== 数据库内容展示 ===
从数据库读取包含HTML特殊字符的内容时：
<syntaxhighlight lang="php">
echo htmlspecialchars($dbData, ENT_QUOTES, 'UTF-8');
</syntaxhighlight>

== 转义规则总结 ==
<mermaid>
flowchart TD
    A[原始文本] --> B{包含特殊字符?}
    B -->|是| C[替换为对应实体]
    B -->|否| D[直接输出]
    C --> E[安全渲染]
    D --> E
</mermaid>

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

== 参见 ==
* [[字符编码]]
* [[XSS防护]]
* [[DOM操作安全]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]