Html 简明教程

HTML - Emojis

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

Emojis are allowed to include in our webpages to represent emotions in plain text. Emojis are widely used in social media, messaging apps, and web pages to add some humour and feelings to the text. For example, 😈, 😁, 😉

What are Emojis?

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

Emojis are small graphical symbols or icons that represent emotions, objects, animals, flags, nature, food items and many more related entities. Although emojis looks like graphical symbols, they are actually characters of the UTF-8 character set.

UTF-8 Emojis

Emoji

Hexadecimal Code

Decimal Code

😈

😂

👍

😁

😃

😇

😉

😍

😭

😘

😢

🙂

😪

😷

How to add Emojis to HTML document?

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

To add emojis into an HTML document, our first step should be defining the character encoding for the web page. For this purpose, we use the charset attribute of <meta> tag. Note that <meta> tag is used within the <head> tag. The most appropriate value for the charset attribute is UTF-8 as it covers over a million characters including the emojis.

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

The character encoding is specified by the following <meta> tag:

<meta charset = "UTF-8">

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

There are two ways of adding emojis to the HTML document:

Using Decimal Code
Using Hexadecimal Code

Using Decimal Code to add Emojis

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

We can add emojis into the HTML document using their corresponding decimal codes. These codes start with &#, ends with ";" and in-between they contain numerics.

Example

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

In the following example, we are going to display a few emojis on the web page using their respective decimal codes.

<!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 开始，以 ";" 结束，以通知浏览器需要显示代码表示的字符。

We can also specify emojis using their respective hexadecimal codes. The hexadecimal codes for emojis start with &#x and end with ";" to inform the browser the character represented by the code needs to be displayed.

Example

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

The following example illustrates the use of hexadecimal codes in displaying 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>

Drawbacks of using HTML Emojis

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

The drawback of using emojis in HTML documents is that these characters are not directly available for our use. There are no specific keys available on the computer keyboards. We are required to memorize or look up their respective codes.