5. HTML 转义字符:在网页中正确显示特殊符号
在 HTML 开发中,我们经常会遇到需要显示特殊字符的情况,比如 <、>、空格或版权符号等。直接输入这些字符可能会导致 HTML 解析错误或显示异常。接下来通过学习 HTML 转义字符(也称为实体字符),将会掌握了如何在网页中正确显示这些特殊符号的方法。
一、为什么需要转义字符?
HTML 解析器将 <
和 >
视为标签的开始和结束标记。如果直接在内容中使用这些符号,可能会导致:
1. 标签解析错误: 浏览器可能将内容误认为 HTML 标签
2. XSS 安全隐患: 未转义的用户输入可能被恶意利用
3.显示异常: 某些符号可能无法正常显示
因此,HTML 提供了转义字符机制,通过特定的编码来表示这些特殊符号。
二、常见转义字符分类
1. 基础符号转义
转义字符 | 含义 | 显示效果 | 实际字符 |
---|---|---|---|
< | less than | < | < |
> | greater than | > | > |
& | ampersand | & | & |
" | double quote | " | " |
' | single quote | ’ | ’ |
示例代码:
<p>比较符号:3 < 5 和 5 > 3</p>
<p>链接中的参数:<a href="page.html?name=John&age=30">用户信息</a></p>
2. 空格处理
- 普通空格: 浏览器会忽略连续的多个空格,只显示一个
- 不换行空格:
(non-breaking space)- 强制保留空格,不换行
- 常用于需要精确控制空格数量的场景
- 长空格:
 
(en space) 和 
(em space)- 分别相当于半个和全角字符宽度
示例代码:
<p>普通空格:这是 多个空格</p>
<p>不换行空格:这是 四个空格</p>
<p>长空格:这是 两个字符宽度 四个字符宽度</p>