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 文件中使用表情符號的缺點是，這些字元不能直接供我們使用。計算機鍵盤上沒有可用的特定鍵。我們需要記住或查詢其各自的程式碼。

列印頁面