在 HTML 中使用表情符号

表情符号是来自 UTF-8 字符集的字符:😄 😍 💗

表情符号是类似于 😄 😍 💗 这样的符号。表情符号看起来像图像或图标,但不是,它们是来自 UTF-8 (Unicode) 字符集的字符。

UTF-8 几乎涵盖了世界上所有的字符和符号。

HTML 字符集属性

要正确显示 HTML 页面,Web 浏览器必须知道页面中使用的字符集。

这是在 <meta> 标签中指定的:

<meta charset="UTF-8" />

! HTML 中的默认字符集是 UTF-8 。

UTF-8 字符

许多 UTF-8 字符无法在键盘上输入,但它们始终可以使用数字序列(称为实体编号)显示:

  • A 是 65
  • B 是 66
  • C 是 67

实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 这里会显示 A B C -->
    <p>这里会显示 &#65; &#66; &#67;</p>
  </body>
</html>

示例说明

元素 <meta charset="UTF-8"> 定义了字符集。

字符 ABC 由数字 656667 显示。

为了让浏览器识别这些符号,您必须以 &# 开头并以分号 ; 结尾,实体编号包裹在其中。

表情符号

表情符号也是 UTF-8 字母表中的字符:

  • 😄 对应的编号是 128516
  • 😍 对应的编号是 128525
  • 💗 对应的编号是 128151

例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>第一个表情符号</h1>
    <p>&#128512;</p>
  </body>
</html>

由于表情符号是字符,它们可以像 HTML 中的任何其他字符一样被复制、显示和调整大小。

例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>大号的表情符号</h1>
    <p style="font-size:48px">&#128512; &#128516; &#128525; &#128151;</p>
  </body>
</html>

显示为: 😀 😄 😍 💗

UTF-8 中的一些表情符号

表情符号 字符实体编号
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;