HTML 符号（实体）完全教程：从基础到实战
13
0
0
HTML 符号（又称 HTML 实体）是网页开发中插入特殊字符的核心方法，能解决保留字符冲突、特殊符号输入、跨环境兼容等问题，是前端入门必备技能。
一、什么是 HTML 符号？
HTML 符号（HTML Entities）是一串标准化的字符组合，用于在网页中安全显示特殊字符。它以 & 开头，以 ; 结尾，中间是实体名称或数字编码，本质是特殊字符的“转义表示”。
比如直接输入 < 会被浏览器解析为 HTML 标签开头，而使用符号 < 或 <，就能正常显示 < 本身。
二、为什么必须用 HTML 符号？
- 显示 HTML 保留字符：
<、>、&等字符有语法含义，直接输入会导致解析错误，需通过符号转义。 - 输入键盘无对应按键的字符：版权符 ©、欧元符 €、温度符 ℃ 等，无法直接通过普通键盘输入。
- 避免乱码问题：在旧系统或特殊编码环境中，符号能确保字符跨浏览器、跨设备一致显示。
- 精细控制排版：通过非换行空格等符号，可实现多空格保留、禁止特定位置换行等排版需求。
三、HTML 符号的两种核心格式
HTML 符号主要分为命名实体和数字实体，后者又包含十进制和十六进制两种形式，各有适用场景。
3.1 命名实体（推荐日常使用）
- 语法：
&实体名称;（如©代表版权符） - 优点：名称直观、易于记忆和阅读，现代浏览器支持良好。
- 缺点：并非所有字符都有对应名称，部分旧浏览器可能不兼容新实体名称。
3.2 数字实体（追求兼容性时使用）
- 十进制语法：
&#十进制编码;（如©代表版权符） - 十六进制语法：
&#x十六进制编码;（如©代表版权符） - 优点：通用性极强，可表示所有 Unicode 字符，兼容所有浏览器。
- 缺点：编码无直观含义，需查询记忆。
四、常用 HTML 符号分类汇总
以下是开发中高频使用的符号，按场景分类整理，方便直接复制使用：
4.1 基础保留字符（必记）
| 显示效果 | 命名实体 | 十进制实体 | 说明 |
|---|---|---|---|
| < | < | < | 小于号 |
| > | > | > | 大于号 |
| & | & | & | 和号 |
| " | " | " | 双引号 |
| ' | ' | ' | 单引号 |
4.2 常用功能符号
- 非换行空格：
（ ）- 强制保留空格，避免换行 - 半个空格：
 - 占半个字符宽度 - 全角空格：
 - 占一个字符宽度
4.3 版权与商标符号
- 版权符 ©：
©（©） - 注册符 ®：
®（®） - 商标符 ™：
™（™）
4.4 货币与单位符号
- 人民币 ¥：
¥（¥） - 美元 $：
$（$） - 欧元 €：
€（€） - 英镑 £：
£（£） - 摄氏度 ℃：
℃ - 华氏度 ℉：
℉ - 度数 °：
°（°）
五、使用注意事项与最佳实践
- 优先选择命名实体：日常开发中，优先使用易读的命名实体，仅在无命名实体时使用数字实体。
- 特殊场景必须转义：在 HTML 标签属性值、JavaScript 字符串中使用
<、&等字符时，必须转义，否则可能导致代码报错。 - 空格控制首选 CSS：虽然
能保留空格，但大量使用会影响代码可读性，复杂排版建议用white-space等 CSS 属性。 - 查询工具推荐：遇到冷门符号时，可通过 HTML 符号查询网站获取对应实体编码。
六、实战示例：HTML 符号的实际应用
<!-- 1. 显示包含保留字符的文本 -->
<p>HTML 标签的语法是 <标签名>，例如 <div></p>
<!-- 2. 添加版权信息 -->
<footer>© 2025 我的网站 - 保留所有权利（等价于 © 2025 我的网站）</footer>
<!-- 3. 控制文本排版（避免“示例”和“文本”换行） -->
<p>示例 文本：这里的空格不会被合并，且两个词不会换行</p>
<!-- 4. 显示特殊货币符号 -->
<p>商品价格：€99 或 ₹599（欧元/印度卢比）</p>运行结果：
- HTML 标签的语法是 <标签名>，例如
发表评论
评论列表