编辑“︁HTML字符实体”︁（章节）

= HTML字符实体 =

HTML字符实体（Character Entities）是HTML中用于表示特殊字符或保留字符的编码方式。当需要在网页中显示HTML保留字符（如<、>、&等）或无法直接输入的符号（如版权符号©、数学符号∑等）时，字符实体提供了一种标准化的解决方案。

== 为什么需要字符实体 ==

HTML文档使用某些字符作为标记符号，例如：
* <code><</code> 和 <code>></code> 用于标签
* <code>&</code> 用于实体引用
* <code>"</code> 用于属性值

如果直接在HTML中使用这些字符而不进行转义，浏览器会将其解释为代码而非文本内容。例如：

<syntaxhighlight lang="html">
<!-- 错误的写法 -->
<p>5 < 10</p>
</syntaxhighlight>

浏览器会认为<code>< 10</code>是一个未闭合的标签。正确的写法应使用字符实体：

<syntaxhighlight lang="html">
<!-- 正确的写法 -->
<p>5 &lt; 10</p>
</syntaxhighlight>

== 字符实体的类型 ==

HTML字符实体有三种表示形式：

=== 1. 命名实体（Named Entities） ===
使用易记的名称表示，格式为<code>&entity_name;</code>

{| class="wikitable"
|+ 常用命名实体
! 字符 !! 描述 !! 实体名称 !! 实体编号
|-
| < || 小于号 || <code>&amp;lt;</code> || <code>&amp;#60;</code>
|-
| > || 大于号 || <code>&amp;gt;</code> || <code>&amp;#62;</code>
|-
| & || 和号 || <code>&amp;amp;</code> || <code>&amp;#38;</code>
|-
| " || 双引号 || <code>&amp;quot;</code> || <code>&amp;#34;</code>
|-
| © || 版权符号 || <code>&amp;copy;</code> || <code>&amp;#169;</code>
|}

=== 2. 十进制编号实体 ===
格式为<code>&#entity_number;</code>，例如<code>&#169;</code>表示©

=== 3. 十六进制编号实体 ===
格式为<code>&#xentity_number;</code>，例如<code>&#xA9;</code>表示©

== 实际应用示例 ==

=== 示例1：显示HTML标签 ===
当需要在网页中展示HTML代码时：

<syntaxhighlight lang="html">
<p>HTML段落标签是：&lt;p&gt;这是一个段落&lt;/p&gt;</p>
</syntaxhighlight>

'''输出结果：'''
HTML段落标签是：<p>这是一个段落</p>

=== 示例2：数学公式 ===
使用字符实体显示数学符号：

<syntaxhighlight lang="html">
<p>数学公式：∑(x²) &le; 100 当 x ∈ {1,2,3}</p>
</syntaxhighlight>

'''输出结果：'''
数学公式：∑(x²) ≤ 100 当 x ∈ {1,2,3}

=== 示例3：特殊符号 ===
显示货币符号和箭头：

<syntaxhighlight lang="html">
<p>价格：&euro;99.99 &rarr; 特价：&dollar;79.99</p>
</syntaxhighlight>

'''输出结果：'''
价格：€99.99 → 特价：$79.99

== 高级用法 ==

=== 结合CSS样式 ===
字符实体可以与CSS结合实现特殊效果：

<syntaxhighlight lang="html">
<style>
  .arrow { color: red; font-size: 24px; }
</style>
<p>下一步 <span class="arrow">&rarr;</span> 确认订单</p>
</syntaxhighlight>

=== 在JavaScript中使用 ===
JavaScript字符串中也需要正确处理字符实体：

<syntaxhighlight lang="javascript">
document.getElementById("demo").innerHTML = "5 &lt; 10";  // 输出：5 < 10
</syntaxhighlight>

== 字符实体参考表 ==

以下是常用字符实体的分类参考：

<mermaid>
pie
    title 字符实体类型分布
    "标点符号" : 35
    "数学符号" : 25
    "箭头符号" : 15
    "货币符号" : 15
    "其他符号" : 10
</mermaid>

数学符号示例：
* <math>\sum_{i=1}^n x_i</math> → <code>&sum;<sub>i=1</sub><sup>n</sup> x<sub>i</sub></code>
* <math>\alpha \beta \gamma</math> → <code>&alpha; &beta; &gamma;</code>

== 注意事项 ==

1. '''实体名称区分大小写'''：<code>&lt;</code>有效，但<code>&LT;</code>无效
2. '''忘记分号'''是常见错误：<code>&amp</code>（错误） vs <code>&amp;</code>（正确）
3. 现代浏览器通常能容忍某些错误，但为了标准兼容性应始终使用正确的形式
4. 对于Unicode字符，可以直接使用字符本身（如©），但字符实体提供更好的兼容性

== 最佳实践 ==

* 优先使用命名实体（更易读）
* 在XML/XHTML中必须使用实体转义
* 在JavaScript和URL中也需要类似的转义规则
* 对于复杂数学公式，考虑使用MathML而非大量字符实体

通过掌握HTML字符实体，您可以确保网页内容在各种环境下都能正确显示，同时能够展示丰富的特殊符号和字符。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML基础]]