Html 简明教程

HTML - Emojis

表情符号可以添加到网页中，用以在纯文本中表示情感。表情符号广泛用于社交媒体、消息应用程序和网页，向文本添加幽默和感觉。如 😈、😁、😉

What are Emojis?

Emojis 是表示情感、物体、动物、国旗、自然、食品和其他许多相关实体的小图形符号或图标。尽管表情符号看起来像图形符号，实际上它们是 UTF-8 字符集的字符。

UTF-8 Emojis

Emoji

Hexadecimal Code

Decimal Code

😈

😂

👍

😁

😃

😇

😉

😍

😭

😘

😢

🙂

😪

😷

How to add Emojis to HTML document?

要将表情符号添加到 HTML 文档中，我们的第一步应该是为网页定义字符编码。为此，我们使用 * <meta>* 代码的 * charset* 特性。注意， <meta> 代码在 * <head>* 代码中使用。charset 特性的最适当值是 UTF-8 ，因为它包含百万以上的字符，包括表情符号。

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

<meta charset = "UTF-8">

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

Using Decimal Code
Using Hexadecimal Code

Using Decimal Code to add Emojis

我们可以使用表情符号对应的十进制代码将它们添加到 HTML 文档。这些代码以 &# 为开头，以 ";" 为结尾，并且其间包含数字。

Example

在以下示例中，我们将使用相应的表情符号十进制代码在网页上显示几个表情符号。

<!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>

Using Hexadecimal Code to add Emojis

我们还可以使用表情符号对应的十六进制代码指定表情符号。表情符号的十六进制代码以 &#x 开始，以 ";" 结束，以通知浏览器需要显示代码表示的字符。

Example

以下示例说明了在显示表情符号中使用十六进制代码。

<!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>

Drawbacks of using HTML Emojis

在 HTML 文档中使用表情符号的缺点是，这些字符不能直接供我们使用。计算机键盘上没有专门的按键。我们需要记忆或查找它们各自的编码。