编辑“︁HTML特殊字符”︁

{{DISPLAYTITLE:HTML特殊字符}}

'''HTML特殊字符'''（HTML Special Characters）是指在HTML文档中具有特殊含义或无法直接输入的字符。这些字符需要通过'''字符实体引用'''（Character Entity References）或'''数字字符引用'''（Numeric Character References）来表示，以确保它们在浏览器中正确显示。

== 概述 ==
在HTML中，某些字符（如 `<`, `>`, `&` 等）被保留用于标记语法。如果直接在文本中使用它们，浏览器会将其解释为HTML标签或实体的一部分，而非普通文本。此外，某些符号（如版权符号 `©` 或数学符号 `∑`）无法通过键盘直接输入，也需要使用特殊字符表示。

=== 为什么需要特殊字符 ===
* '''避免语法冲突'''：例如 `<` 和 `>` 用于标签，如果直接写入内容会被解析为标签。
* '''显示不可见字符'''：如空格 `&nbsp;` 或换行符 `&NewLine;`。
* '''输入特殊符号'''：如货币符号 `€` 或数学运算符 `≠`。

== 字符表示方法 ==
HTML特殊字符可以通过以下两种方式表示：

=== 1. 字符实体引用（Named Entity References） ===
格式：`&entity_name;`  
例如：
* `&lt;` 表示 `<`
* `&gt;` 表示 `>`
* `&amp;` 表示 `&`

=== 2. 数字字符引用（Numeric Character References） ===
格式：
* 十进制：`&#entity_number;`
* 十六进制：`&#xentity_number;`  
例如：
* `&#169;` 表示 `©`（版权符号）
* `&#x00A9;` 同样表示 `©`

== 常见特殊字符表 ==
以下是HTML中常用的特殊字符及其表示方式：

{| class="wikitable"
|+ 常见HTML特殊字符
! 字符 !! 描述 !! 实体引用 !! 数字引用（十进制） !! 数字引用（十六进制）
|-
| < || 小于号 || `&lt;` || `&#60;` || `&#x3C;`
|-
| > || 大于号 || `&gt;` || `&#62;` || `&#x3E;`
|-
| & || 和号 || `&amp;` || `&#38;` || `&#x26;`
|-
| " || 双引号 || `&quot;` || `&#34;` || `&#x22;`
|-
| ' || 单引号 || `&apos;` || `&#39;` || `&#x27;`
|-
|   || 非换行空格 || `&nbsp;` || `&#160;` || `&#xA0;`
|-
| © || 版权符号 || `&copy;` || `&#169;` || `&#xA9;`
|-
| € || 欧元符号 || `&euro;` || `&#8364;` || `&#x20AC;`
|}

== 代码示例 ==
以下示例展示如何在HTML中使用特殊字符：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>HTML特殊字符示例</title>
</head>
<body>
    <h1>特殊字符示例</h1>
    <p>小于号：&lt;</p>
    <p>版权符号：&copy; 2023</p>
    <p>数学公式：2 &ne; 3</p>
    <p>引号：&quot;Hello World!&quot;</p>
</body>
</html>
</syntaxhighlight>

=== 输出结果 ===
浏览器渲染后的效果：
<pre>
特殊字符示例
小于号：<
版权符号：© 2023
数学公式：2 ≠ 3
引号："Hello World!"
</pre>

== 实际应用场景 ==
=== 1. 数学公式 ===
在网页中显示数学符号时，特殊字符非常有用。例如：
<syntaxhighlight lang="html">
<p>平方根：&radic;2 ≈ 1.414</p>
<p>积分符号：&int; f(x)dx</p>
</syntaxhighlight>

=== 2. 版权声明 ===
在页脚添加版权信息：
<syntaxhighlight lang="html">
<footer>&copy; 2023 我的网站。保留所有权利。</footer>
</syntaxhighlight>

=== 3. 代码高亮 ===
在文档中显示HTML标签文本（而非解析为标签）：
<syntaxhighlight lang="html">
<p>使用 <code>&lt;div&gt;</code> 标签创建容器。</p>
</syntaxhighlight>

== 高级用法 ==
=== 自定义字符实体 ===
通过DTD或JavaScript可以定义自定义实体（但现代HTML5不推荐使用DTD）。例如：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>自定义实体示例</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const entityMap = {
                'mylogo': '🚀'
            };
            document.body.innerHTML = document.body.innerHTML.replace(
                /&(\w+);/g, 
                (match, entity) => entityMap[entity] || match
            );
        });
    </script>
</head>
<body>
    <p>自定义标志：&mylogo;</p>
</body>
</html>
</syntaxhighlight>

=== Unicode字符支持 ===
HTML5支持直接插入Unicode字符（需确保文档编码为UTF-8）：
<syntaxhighlight lang="html">
<p>直接使用Unicode：✓ ✔ ✕ ✖ ✗ ✘</p>
</syntaxhighlight>

== 注意事项 ==
* 始终以分号 `;` 结束实体引用，否则浏览器可能无法正确解析。
* 某些旧浏览器可能不支持部分实体（如 `&apos;`），建议使用数字引用 `&#39;`。
* 在属性值中，必须对引号进行转义（如 `&quot;`）。

== 总结 ==
HTML特殊字符是网页开发中不可或缺的工具，用于：
1. 避免语法冲突
2. 显示键盘无法直接输入的符号
3. 确保内容在不同环境下正确渲染

通过熟练掌握字符实体和数字引用，开发者可以更灵活地控制网页内容的显示效果。

<mermaid>
graph TD
    A[需要显示特殊字符] --> B{如何表示?}
    B -->|已知实体名称| C[使用字符实体引用 &name;]
    B -->|仅知道Unicode值| D[使用数字引用 &#xhex; 或 &#dec;]
    C --> E[浏览器渲染]
    D --> E
</mermaid>

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