HTML 表情符号
上一节「符号」使用了诸如 © 和 € 这类命名实体来表示法律与货币标记。表情符号则不同：它们是 Unicode 字符——面孔、手势、物品、旗帜——由浏览器借助系统字体与表情调色板绘制。你通常会把它们当作文本粘贴进去；当粘贴不方便时，再退而使用数字字符引用。本节会帮你形成适用于学习型网站与产品界面文案的实用习惯。
HTML 文档中的表情符号是什么
表情符号仍然是文本。它不是你托管的 <img>，也不是 CSS 背景。当文档以 UTF-8 编码时，浏览器读取码点并绘制字形。这意味着表情符号会像拉丁字母一样随 HTML 源码一起传递，但其视觉设计来自操作系统与字体，而不仅仅来自你的样式表。
直接回答
可以——你能在 HTML 中使用表情符号。最简单的做法是把文件保存为 UTF-8，并把该字符粘贴进文本节点，例如段落或标题内部。也可以写数字字符引用，例如用 😀 表示一张笑脸。日常写作请优先选择 UTF-8 粘贴。当编辑器无法安全粘贴字形时，再把数字形式当作备用方案。务必把真正的含义写在文字里，因为屏幕阅读器、不同文化以及各平台的设计对表情符号的处理并不一致。
UTF-8 是基础
现代 HTML 工作流已经默认采用 UTF-8。你的编辑器应以 UTF-8 保存 .html 文件，文档也应声明 charset 为 UTF-8（你将在之后的课程中再次学习字符集）。如果文件以旧式编码保存，表情符号常常会变成乱码——看起来像损坏字符的乱序序列。当表情符号“莫名其妙坏掉”时，先检查编码，再考虑重写内容。
把表情符号当作普通文本粘贴
当 UTF-8 正确时，粘贴的工作方式与其他任何字符相同。源码中可以直接显示字形，这对阅读文件的人来说完全没问题。
以 UTF-8 文本粘贴的表情符号
html<p>Welcome! 👋 Let us learn HTML.</p>
<h2>Tips for beginners ✨</h2>阅读示例
👋与✨位于文本节点内部——不需要特殊的 HTML 标签- 文件必须保持为 UTF-8，否则这些字符在保存时可能损坏
- 周围的文字仍然承载信息；表情符号只是增添语气
- 标题可以包含表情符号，但一个点缀比一排图标更清晰
数字字符引用作为备用方案
数字字符引用用数字写出码点，例如 😀，或十六进制形式如 😀。当同事的编辑器弄乱粘贴的字形，或者你希望源码保持纯 ASCII、却仍在浏览器中显示表情符号时，它们很有用。本课程不要求你背诵庞大的 Unicode 表——学会模式，需要时再查编码即可。
数字字符引用
html<p>Grinning face: 😀</p>
<p>Star: ⭐ — Done: ✅</p>何时选择粘贴，何时选择数字形式
- 为了可读的源码与更快的编辑，优先在 UTF-8 下粘贴
- 当粘贴失败、流水线剥离非 ASCII 字符，或你需要 ASCII 安全的 diff 时，优先使用数字引用
- 不要在没有注释的情况下混入大量生僻数字编码——未来的你会记不住它们
- 像
©这样的命名实体适用于常见符号；大多数表情符号没有简短的日常 HTML 名称，因此粘贴或数字引用才是主流做法
平台外观与感受
同一个表情码点在一部手机上可能显得友好，在另一台笔记本电脑上却略有不同。厂商会随时间重绘表情符号。这是正常现象。请先用文字设计含义。把表情符号当作可选装饰，它可能像字体一样在不同平台上发生视觉变化。
无访问性与清晰度
屏幕阅读器可能会用冗长名称朗读表情符号、不一致地跳过它们，或打断句子节奏。来自其他文化的读者可能对同一手势有不同理解。关键说明——“提交表单”、“必填字段”、“错误”——即使去掉表情符号也必须可读。状态行可以为视力正常的用户加上对勾，但文字仍应说明发生了什么。
以文字为主的状态行
html<p>Status: Upload failed — please try again ❌</p>学习型页面的设计习惯
- 在友好欢迎语旁放一个表情符号，可以显得更亲切
- 把每个列表项都换成不同表情，通常只会增加嘈杂感
- 切勿把密码、错误码或唯一 ID 编码成表情序列
- 若页面还必须在纯文本环境中可用，仅靠文字也应足以讲清概念
表情符号不是布局系统
不要用长串表情符号充当间距、分隔线或伪导航图标。请用真正的 HTML 结构（nav、列表、标题）与 CSS 做布局。表情符号属于文案：在有助于语气时使用——而不是替代设计组件。
在编辑器中练习
- 确认文件以 UTF-8 保存。
- 添加一段简短欢迎段落：包含一个粘贴的表情符号，并用清晰文字表达含义。
- 再写第二段，仅用数字引用插入两个不同的表情符号。
- 写一行状态说明：即使去掉表情，句子仍然正确。
- 若条件允许，在两种浏览器或设备上打开页面，并注意视觉差异——这种变化是正常的。
常见错误
- 用旧式编码保存 HTML，导致表情变成乱码
- 仅靠表情符号表达警告、成功提示或导航标签
- 每个标题都堆满多个表情，直到浏览变得更难
- 把表情符号当成必须上传到服务器的托管图片
- 假定每种文化都与你以相同方式理解某个手势
小结
- 表情符号是 Unicode 文本字符，不是你托管的图片
- UTF-8 粘贴是日常做法；数字引用是可靠备用方案
- 外观可能因操作系统与字体而异
- 把含义写在真实文字里；为语气适量使用表情符号
- 表情乱码的常见原因是编码错误，而不是“损坏的 HTML 标签”
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部