HTML 表情符号

什么是表情符号？

表情符号看起来像图像，但它们并不是。

表情符号是来自 UTF-8（Unicode）字符集的字母（字符）：

UTF-8 涵盖了世界上几乎所有的字符和符号。

表情符号	值	试一试
🗻	🗻	试一试
🗼	🗼	试一试
🗽	🗽	试一试
🗾	🗾	试一试
🗿	🗿	试一试
😀	😀	试一试
😁	😁	试一试
😂	😂	试一试
😃	😃	试一试
😄	😄	试一试
😅	😅	试一试

HTML 表情符号示例

笑脸表情

😀 😂 😊 😎 😜

手势符号

✌ ✊ ☝ ✋ 👌

人物

👮 🧕 👦 💏 🤴

办公用品

📈 💻 📌 📆 📒

地点

⛺ 🌋 🗽 🗿 🏢

交通工具

🚈 🚗 🚢 🚌 🚀

动物

🐴 🐕 🐘 🐻 🐞

食物

☕ 🌭 🍞 🍩 🍣

植物

🌴 🌳 🌼 🍁 🥑

水果

🍇 🍊 🍏 🥝 🥥

体育运动

⚽ 🏆 🤿 🏋 ⛳

地球与天空

🌐 🌍 🌖 🌟 🌞

天气

⛅ ☔ 🌈 🌂 ⛄

服饰

👚 👕 🎩 👜 👠

音频/视频

🎥 🎵 🎹 🔊 📺

庆祝活动

🎁 🎃 🎈 🎓 🎂

娱乐活动

🎨 🎪 🎭 🎡 🎢

符号

💡 💰 🔐 🔞 🔔

了解更多：

完整 HTML 表情符号参考

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>
<meta charset="UTF-8">
<body>
<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>
</body>
</html>

亲自试一试

示例解释

<meta charset="UTF-8"> 元素定义了字符集。
字符 A、B 和 C 通过数字 65、66 和 67 显示。
为了让浏览器理解您正在显示一个字符，实体编号必须以 &# 开头并以 ;（分号）结尾。

表情符号字符

表情符号也是 UTF-8 字母表中的字符：

😄 是 128516
😍 是 128525
💗 是 128151

实例

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>我的第一个表情符号</h1>

<p>&#128512;</p>

</body>
</html>

亲自试一试

由于表情符号是字符，它们可以像 HTML 中的任何其他字符一样被复制、显示和调整大小。

实例

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>调整大小的表情符号</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

亲自试一试