HTML - 表情符号

表情符号可以在我们的网页中使用，以在纯文本中表达情感。表情符号广泛用于社交媒体、消息应用程序和网页，为文本增添一些幽默和情感。例如，😈、😁、😉。

什么是表情符号？

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

UTF-8 表情符号

表情符号	十六进制代码	十进制代码
😈	😈	😈
😂	😂	😂
👍	👍	👍
😁	😁	😁
😃	😃	😃
😇	😇	😇
😉	😉	😉
😍	😍	😍
😭	😭	😭
😘	😘	😘
😢	😢	😢
🙂	🙂	🙂
😪	😪	😪
😷	😷	😷

如何将表情符号添加到 HTML 文档？

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

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

<meta charset = "UTF-8">

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

使用十进制代码
使用十六进制代码

使用十进制代码添加表情符号

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

示例

在以下示例中，我们将使用其各自的十进制代码在网页上显示一些表情符号。

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

使用十六进制代码添加表情符号

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

示例

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

<!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 表情符号的缺点

在 HTML 文档中使用表情符号的缺点是，这些字符不能直接供我们使用。计算机键盘上没有可用的特定键。我们需要记住或查找其各自的代码。

打印页面