HTML 特殊字符（实体字符）详解学习博客

一、什么是 HTML 特殊字符？

在 HTML 中，有一些字符具有特殊含义，不能直接写在网页中。

例如：

• <表示标签开始

• >表示标签结束

• &表示实体字符开始

如果直接写：

<p> 3 < 5 </p>

浏览器可能会误认为< 5是一个 HTML 标签，从而导致显示错误。

所以 HTML 提供了一种特殊写法：

HTML 实体（HTML Entity）

也叫：

• HTML 特殊字符

• 字符实体

• 转义字符

格式：

&实体名称;

或者：

&#数字;

二、为什么需要特殊字符？

1. 防止 HTML 解析错误

例如：

错误写法：

<p> 10 < 20 </p>

浏览器可能认为：

<

是标签开始符。

正确：

<p> 10 &lt; 20 </p>

显示：

10 < 20

2. 显示 HTML 保留字符

例如想显示：

<div>

不能直接写：

<p> <div> </p>

浏览器会把它当成真正的标签。

应该：

<p> &lt;div&gt; </p>

显示：

<div>

三、常用 HTML 特殊字符

1. 空格 

HTML 默认会合并多个空格。

例如：

<p> Hello World </p>

浏览器显示：

Hello World

多个空格会被压缩成一个。

如果想保留空格：

<p> Hello&nbsp;&nbsp;&nbsp;&nbsp;World </p>

显示：

Hello World

2. 小于号<

符号：

<

实体：

<

示例：

<p> 3 &lt; 5 </p>

显示：

3 < 5

3. 大于号>

符号：

>

实体：

>

示例：

<p> 5 &gt; 3 </p>

显示：

5 > 3

4. 与号&

符号：

&

实体：

&

示例：

<p> C&amp;C++ </p>

显示：

C&C++

5. 双引号"

实体：

"

示例：

<p> &quot;HTML&quot; </p>

显示：

"HTML"

6. 单引号'

实体：

'

示例：

<p> &apos;hello&apos; </p>

显示：

'hello'

四、常用特殊符号大全

五、版权符号案例

很多网站底部：

© 2026 我的博客

HTML：

<footer> &copy; 2026 我的博客 </footer>

显示：

© 2026 我的博客

六、HTML 中的空格问题

例如：

<p> HTML CSS JavaScript </p>

浏览器：

HTML CSS JavaScript

因为 HTML 会自动合并空格。

如果需要多个：

<p> HTML&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;JavaScript </p>

显示：

HTML CSS JavaScript

七、实体数字写法

除了名字，还可以使用数字表示。

格式：

&#数字;

例如：

小于号

名称：

<

数字：

<

效果：

<

版权符号

名称：

©

数字：

©

效果：

©

八、HTML 特殊字符在代码展示中的应用

比如博客中展示代码：

想显示：

<div> hello </div>

不能直接写。

需要：

<p> &lt;div&gt; </p>

或者：

<pre> &lt;div&gt; hello &lt;/div&gt; </pre>

显示：

<div> hello </div>

九、特殊字符与安全问题

HTML 特殊字符不仅用于显示符号，还涉及网页安全。

例如：

用户输入：

<script> alert('攻击') </script>

如果网站没有处理：

浏览器可能执行 JavaScript。

所以很多网站会把：

<

转换：

<

把代码当普通文字显示。

这叫：

HTML 转义（HTML Escape）

十、实际开发中的使用场景

1. 网站版权信息

<p> &copy; 2026 MyBlog </p>

2. 展示代码

<pre> #include &lt;iostream&gt; int main() { return 0; } </pre>

3. 数学公式

<p> a &lt; b </p>

显示：

a < b

4. 商品价格

<p> &yen;99 </p>

显示：

¥99

十一、总结

HTML 特殊字符的核心作用：

记忆口诀：

< 用 &lt; > 用 &gt; & 用 &amp; 空格用 &nbsp; 版权用 &copy;