Sử dụng biểu tượng cảm xúc trong HTML

Emoji (Emoji) là các ký tự từ bộ mã character UTF-8:  

Điều gì là Emoji?

Emoji (Emoji) giống như hình ảnh hoặc biểu tượng, nhưng chúng không phải là.

Họ là các ký tự (ký tự) từ bộ mã字符 UTF-8 (Unicode).

Lưu ý:UTF-8 gần như bao gồm tất cả các ký tự và ký hiệu trên thế giới.

Thuộc tính charset của HTML

Để hiển thị đúng trang HTML, trình duyệt web phải biết bộ mã字符 được sử dụng trong trang.

Đây là trong <meta> Định nghĩa trong thẻ:

<meta charset="UTF-8">

Lưu ý:Nếu không quy định, UTF-8 là bộ mã字符 mặc định trong HTML.

Ký tự UTF-8

Nhiều ký tự UTF-8 không thể gõ trên bàn phím, nhưng luôn có thể sử dụng số để hiển thị chúng (được gọi là mã số thực thể):

  • A là 65
  • B là 66
  • C là 67

Mô hình

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Tôi sẽ hiển thị A B C</p>
<p>Tôi sẽ hiển thị A B C</p>
</body>
</html>

Thử ngay

Ví dụ minh họa

<meta charset="UTF-8"> Element định nghĩa bộ ký tự.

Ký tự A, B, C được hiển thị bằng số 65, 66 và 67.

Để trình duyệt hiểu rằng bạn đang hiển thị ký tự, bạn phải bắt đầu bằng dấu &# và kết thúc bằng dấu ; (dấu chấm phẩy).

Ký tự Emoji

Biểu tượng cảm xúc cũng là ký tự từ alphabet UTF-8:

  • 😅 là 128516
  • 😍 là 128525
  • 💗 là 128151

Mô hình

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emoji đầu tiên của tôi</h1>
<p>😀</p>
</body>
</html>

Thử ngay

Do biểu tượng cảm xúc là ký tự, vì vậy bạn có thể sao chép, hiển thị và điều chỉnh kích thước chúng như bất kỳ ký tự nào khác trong HTML.

Mô hình

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emoji được phóng to</h1>
<p style="font-size:48px">
😀 😆 😅 😃
</p>
</body>
</html>

Thử ngay

Một số Emoji trong UTF-8

Emoji Giá trị
😮 😭
😫 😪
😩 😨
😧 😦
😟 😞
😢 😡
😠 😀
😁 😂
😄 😃
😅 😆
🔆 😍

Để xem danh sách đầy đủ, vui lòng truy cập Hướng dẫn tham khảo Emoji HTML của chúng tôi.