HTML字符实体完全指南：从入门到精通

最新推荐文章于 2025-12-09 18:00:00 发布

原创最新推荐文章于 2025-12-09 18:00:00 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

网页开发专栏收录该内容

3 篇文章

订阅专栏

你是否曾经遇到过这样的问题：想在网页中显示 <div> 这样的 HTML 标签，却发现浏览器把它解析成了实际的标签？或者想要输入版权符号 ©，却不知道如何在代码中表示？今天，我们就来聊聊 HTML 字符实体这个看似简单却非常实用的知识点。

什么是 HTML 字符实体？

HTML 字符实体（Character Entity）是一种特殊的编码方式，用于在 HTML 文档中表示那些不能直接输入或会被浏览器误解的字符。

基本结构

字符实体由三部分组成：& + 实体名称/编号 + ;

两种写法：

实体名称：< （更易读，推荐使用）
实体编号：< （兼容性更好）

例如，要显示小于号 <，可以写成 < 或 <。

为什么需要字符实体？

避免与 HTML 标签冲突：显示 HTML 代码时必须使用
输入键盘上没有的字符：如版权符号、数学符号、希腊字母
精确控制空白和格式：HTML 会忽略多个连续空格
确保跨浏览器兼容性：保证特殊字符正确显示

常用字符实体速查表

1. HTML 保留字符（必须掌握）

字符	实体名称	实体编号
`<`	`<`	`<`
`>`	`>`	`>`
`&`	`&`	`&`
`"`	`"`	`"`
`'`	`'`	`'`

2. 空格和格式字符

字符	实体名称	实体编号	说明
	` `	` `	不换行空格
	`&ensp;`	` `	半角空格
	`&emsp;`	` `	全角空格
	` `	` `	窄空格
`‑`	`&dash;`	`‑`	不间断连字符

3. 常用标点符号

字符	实体名称	实体编号
`©`	`©`	`©`
`®`	`®`	`®`
`™`	`™`	`™`
`€`	`€`	`€`
`£`	`£`	`£`
`¥`	`¥`	`¥`
`°`	`°`	`°`
`…`	`…`	`…`

4. 数学符号

字符	实体名称	实体编号
`×`	`×`	`×`
`÷`	`÷`	`÷`
`±`	`±`	`±`
`√`	`√`	`√`
`∞`	`∞`	`∞`
`∑`	`∑`	`∑`
`∫`	`∫`	`∫`
`≠`	`≠`	`≠`
`≤`	`≤`	`≤`
`≥`	`≥`	`≥`

5. 箭头符号

字符	实体名称	实体编号
`←`	`←`	`←`
`→`	`→`	`→`
`↑`	`↑`	`↑`
`↓`	`↓`	`↓`

6. 希腊字母（常用）

字符	实体名称	实体编号
`α`	`α`	`α`
`β`	`β`	`β`
`π`	`π`	`π`
`Δ`	`Δ`	`Δ`
`Σ`	`Σ`	`Σ`
`ω`	`ω`	`ω`

实际应用示例

<!-- 显示 HTML 代码 -->
<p>这是一个&lt;div&gt;标签</p>

<!-- 版权和商标 -->
<footer>&copy; 2024 我的公司 &reg; 保留所有权利</footer>

<!-- 数学公式 -->
<p>公式：a &times; b &ne; c，x &ge; 0 且 x &le; 100</p>
<p>积分：&int; f(x)dx，圆周率：&pi; &asymp; 3.14</p>

<!-- 空格控制 -->
<p>温度：25&thinsp;&deg;C</p>
<p>第一段&emsp;第二段</p>

<!-- 导航 -->
<nav>
  <a href="prev.html">&larr; 上一页</a>
  <a href="next.html">下一页 &rarr;</a>
</nav>

最佳实践

何时使用？

必须使用：

显示 HTML 标签代码（<, >, &）
在 HTML 属性值中使用引号
需要精确控制空格和格式

建议使用：

版权、商标等法律符号
数学和科学符号
确保跨浏览器兼容性

可以不使用：

现代网页使用 UTF-8 编码时，很多 Unicode 字符可以直接输入

常见错误

<!-- 错误：忘记分号 -->
&ltdiv&gt

<!-- 错误：大小写错误 -->
&lt;DIV&gt;

<!-- 错误：嵌套时需要转义 & -->
&amp;lt;div&amp;gt;

<!-- 不推荐：用多个 &nbsp; 缩进 -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;缩进内容</p>

<!-- 推荐：使用 CSS -->
<p style="text-indent: 2em;">缩进内容</p>

现代替代方案

UTF-8 直接输入：

<meta charset="UTF-8" />
<p>© 2024 我的公司</p>
<p>温度：25°C</p>

CSS content 属性：

.icon::before {
  content: "\00A9";
}

JavaScript：

const copyright = "\u00A9";

快速记忆

最常用 5 个：< > & "  
数学常用：× ÷ ± ∞

掌握这些字符实体，能让你的网页内容更加专业和规范。记住：工具不在多，在于精。先把最常用的几个熟练掌握，再根据项目需要逐步扩展。

相关资源：MDN Web 文档 - HTML 字符实体