在 HTML 中使用表情符號

表情符號（Emoji）是來自 UTF-8 字符集的字符：😄 😍 💗

什么是 Emoji？

表情符號（Emoji）類似圖像或圖標，但它們并不是。

它們是來自 UTF-8 (Unicode) 字符集的字母（字符）。

提示：UTF-8 幾乎涵蓋世界上所有字符和符號。

HTML charset 屬性

為了正確顯示 HTML 頁面，Web 瀏覽器必須知道頁面中使用的字符集。

這是在 <meta> 標簽中規定的：

<meta charset="UTF-8">

提示：如果未規定，UTF-8 則是 HTML 中的默認字符集。

UTF-8 字符

很多 UTF-8 字符無法在鍵盤上鍵入，但始終可以使用數字（被稱為實體編號）來顯示它們：

  • A 是 65
  • B 是 66
  • C 是 67

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>我將顯示 A B C</p>
<p>我將顯示 &#65; &#66; &#67;</p>
</body>
</html>

親自試一試

例子解釋

<meta charset="UTF-8"> 元素定義字符集。

字符 A、B、C 由數字 65、66 以及 67 來顯示。

為了讓瀏覽器了解您正在顯示字符，您必須以 &# 開頭并以 ;（分號）結束實體編號。

Emoji 字符

表情符號也是來自 UTF-8 字母的字符：

  • 😄 是 128516
  • 😍 是 128525
  • 💗 是 128151

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>我的第一個 Emoji</h1>
<p>&#128512;</p>
</body>
</html>

親自試一試

由于表情符號是字符，因此可以像 HTML 中的其他任何字符一樣復制、顯示和調整它們的大小。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>放大的表情符號</h1>
<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>
</body>
</html>

親自試一試

UTF-8 中的一些 Emoji 符號

Emoji 值
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;

如需完整列表，請訪問我們的 HTML Emoji 參考手冊。