笙亿网络策划

HTML 怎么使用 Emojis？

约 6 分钟读完 6 阅
文章导读
Previous Quiz Next 表情符号（Emojis）可以在网页中包含，用于用纯文本表示情感。表情符号广泛用于社交媒体、消息应用和网页，为文本增添一些幽默和情感。例如，😈、😁、😉。
📋 目录
  1. 壹 什么是表情符号？
  2. 贰 UTF-8 表情符号
  3. 叁 如何在 HTML 文档中添加表情符号？
  4. 肆 使用 Decimal Code 添加表情符号
  5. 伍 使用十六进制代码添加 Emojis
  6. 陆 使用 HTML Emojis 的缺点
A A

HTML - 表情符号

Previous
Quiz
Next

表情符号（Emojis）可以在网页中包含，用于用纯文本表示情感。表情符号广泛用于社交媒体、消息应用和网页，为文本增添一些幽默和情感。例如，😈、😁、😉。

什么是表情符号？

Emojis 是小型图形符号或图标，代表情感、物体、动物、国旗、自然、食物等诸多相关实体。虽然表情符号看起来像是图形符号，但它们实际上是 UTF-8 字符集中的字符。

UTF-8 表情符号

Emoji Hexadecimal Code Decimal Code
😈 😈 😈
😂 😂 😂
👍 👍 👍
😁 😁 😁
😃 😃 😃
😇 😇 😇
😉 😉 😉
😍 😍 😍
😭 😭 😭
😘 😘 😘
😢 😢 😢
🙂 🙂 🙂
😪 😪 😪
😷 😷 😷

如何在 HTML 文档中添加表情符号？

要在 HTML 文档中添加表情符号，第一步应该是为网页定义字符编码。为此，我们使用 <meta> 标签的 charset 属性。请注意，<meta> 标签使用在 <head> 标签内。UTF-8 是 charset 属性的最合适值，因为它涵盖了超过一百万个字符，包括表情符号。

字符编码由以下 <meta> 标签指定：

<meta charset = "UTF-8">

有两种方法可以将表情符号添加到 HTML 文档中：

  • 使用 Decimal Code
  • 使用 Hexadecimal Code

使用 Decimal Code 添加表情符号

我们可以使用对应的 decimal code 将表情符号添加到 HTML 文档中。这些代码以 &# 开头，以 ;" 结尾，中间包含数字。

示例

在以下示例中，我们将使用各自的 decimal code 在网页上显示几个表情符号。

<!DOCTYPE html>
<html>
<head>
   <title>Emojis in HTML</title>
   <meta charset="UTF-8">
</head>
<body>
   <h2>
      Adding emojis in HTML document using 
      decimal code
   </h2>

   <div>
      <p>
         Devil Emoji: 
         <span>&#128520;</span>
      </p>
      <p>
         Face having Tears of Joy Emoji: 
         <span>&#128514;</span>
      </p>
      <p>
         Thumbs Up Emoji: 
         <span>&#128077;</span>
      </p>
   </div>

</body>
</html>

使用十六进制代码添加 Emojis

我们也可以使用各自的十六进制代码来指定 emojis。emojis 的十六进制代码以 &#x 开头，并以 ;" 结尾，以告知浏览器需要显示代码所代表的字符。

示例

以下示例说明了在显示 emojis 时使用十六进制代码。

<!DOCTYPE html>
<html>
<head>
   <title>Emojis in HTML</title>
   <meta charset="UTF-8">
</head>
<body>
   <h2>
      Adding emojis in HTML document 
      using Hexadecimal code
   </h2>
   <div>
      <p>
         Devil Emoji: 
         <span>&#X1F608;</span>
      </p>
      <p>
         Face having Tears of Joy Emoji: 
         <span>&#x1F602;</span>
      </p>
      <p>
         Thumbs Up Emoji: 
         <span>&#x1F44D;</span>
      </p>
   </div>
</body>
</html>

使用 HTML Emojis 的缺点

在 HTML 文档中使用 emojis 的缺点是，这些字符并非直接可用。计算机键盘上没有特定的键。我们需要记住或查找它们各自的代码。