5. HTML 转义字符：在网页中正确显示特殊符号

在 HTML 开发中，我们经常会遇到需要显示特殊字符的情况，比如 <、>、空格或版权符号等。直接输入这些字符可能会导致 HTML 解析错误或显示异常。接下来通过学习 HTML 转义字符（也称为实体字符），将会掌握了如何在网页中正确显示这些特殊符号的方法。

一、为什么需要转义字符？

HTML 解析器将 < 和 > 视为标签的开始和结束标记。如果直接在内容中使用这些符号，可能会导致：

1. 标签解析错误： 浏览器可能将内容误认为 HTML 标签
2. XSS 安全隐患： 未转义的用户输入可能被恶意利用
3.显示异常： 某些符号可能无法正常显示

因此，HTML 提供了转义字符机制，通过特定的编码来表示这些特殊符号。

二、常见转义字符分类

1. 基础符号转义

转义字符	含义	显示效果	实际字符
&lt;	less than	<	<
&gt;	greater than	>	>
&amp;	ampersand	&	&
&quot;	double quote	"	"
&apos;	single quote	’	’

示例代码：

<p>比较符号：3 &lt; 5 和 5 &gt; 3</p>
<p>链接中的参数：<a href="page.html?name=John&age=30">用户信息</a></p>

2. 空格处理

• 普通空格： 浏览器会忽略连续的多个空格，只显示一个
• 不换行空格：   (non-breaking space)
  • 强制保留空格，不换行
  • 常用于需要精确控制空格数量的场景
• 长空格：   (en space) 和   (em space)
  • 分别相当于半个和全角字符宽度

示例代码：

<p>普通空格：这是    多个空格</p>
<p>不换行空格：这是&nbsp;&nbsp;&nbsp;&nbsp;四个空格</p>
<p>长空格：这是&ensp;两个字符宽度&emsp;四个字符宽度</p>