如何在 HTML 文件中新增表情符號?


表情符號是一些小的數字影像或圖示,通常用於訊息傳遞和其他地方來表達情感或想法。在本文中,我們將瞭解如何在 HTML 文件中新增表情符號。

方法

透過將瀏覽器中用於顯示網頁的字元集設定為 UTF-8,可以將表情符號新增到 HTML 文件中。我們可以在頭部區域使用 <meta> 標籤來指定此字元編碼資訊。在宣告字元集之後,可以使用 p 和 span 標籤將表情符號新增到 HTML 中。使用 <span> 標籤在同一行插入表情符號,而使用 <p> 標籤在新行中插入表情符號。

我們將看看在 HTML 文件中新增表情符號的兩種方法:

  • 使用十六進位制程式碼

  • 使用十進位制程式碼

方法 1:使用十六進位制程式碼

我們可以使用它們各自的十六進位制程式碼來指定表情符號。表情符號的十六進位制程式碼以 &#x 開頭,以“; “結尾,以告知瀏覽器需要顯示程式碼表示的字元。例如,✌ 的十六進位制程式碼是 ✌

示例

步驟 1 - 首先,我們將定義基本的 HTML 程式碼。

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
</body>
</html>

步驟 2 - 現在,我們將新增表情符號的十六進位制程式碼。

<div>
   <p>Devil Emoji: <span>😈</span></p>
   <p>Face having Tears of Joy Emoji: <span>😂</span></p>
   <p>Thumbs Up Emoji: <span>👍</span></p>
</div>

以下是完整程式碼:

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
   <div>
      <p>Devil Emoji: <span>😈</span></p>
      <p>Face having Tears of Joy Emoji: <span>😂</span></p>
      <p>Thumbs Up Emoji: <span>👍</span></p>
   </div>
</body>
</html>

方法 2:使用十進位制程式碼

我們還可以使用表情符號的十進位制程式碼表示形式。這些程式碼以 &# 開頭,以 ; 結尾,就像十六進位制程式碼一樣。例如,👀 的十進位制程式碼是 👀。

示例

步驟 1 - 首先,我們將定義基本的 HTML 程式碼。

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
</body>
</html>

步驟 2 - 現在,我們將新增表情符號的十進位制程式碼。

<div>
   <p>Devil Emoji: <span>😈</span></p>
   <p>Face having Tears of Joy Emoji: <span>😂</span></p>
   <p>Thumbs Up Emoji: <span>👍</span></p>
</div>

以下是完整程式碼:

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
   <div>
      <p>Devil Emoji: <span>😈</span></p>
      <p>Face having Tears of Joy Emoji: <span>😂</span></p>
      <p>Thumbs Up Emoji: <span>👍</span></p>
   </div>
</body>
</html>

結論

在本文中,我們瞭解瞭如何在 HTML 文件中新增表情符號。我們簡要了解了表情符號的兩種表示形式,即十六進位制程式碼和十進位制程式碼,我們還了解了如何利用這些表示形式在網頁中新增表情符號。

更新於:2023-03-30

3K+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告