Sử dụng Biểu tượng cảm xúc trong HTML
Biểu tượng cảm xúc là các ký tự từ bộ ký tự UTF-8: 😄 😍 💗
Biểu tượng cảm xúc là gì?
Biểu tượng cảm xúc trông giống như hình ảnh hoặc biểu tượng, nhưng thực tế không phải vậy.
Chúng là các chữ cái (ký tự) từ bộ ký tự UTF-8 (Unicode).
UTF-8 bao gồm hầu hết tất cả các ký tự và biểu tượng trên thế giới.
Thuộc tính bộ ký tự HTML
Để hiển thị trang HTML một cách chính xác, trình duyệt web phải biết bộ ký tự được sử dụng trong trang.
Điều này được chỉ định trong <meta>thẻ:
<meta charset="UTF-8">
Nếu không được chỉ định, UTF-8 là bộ ký tự mặc định trong HTML.
Ký tự UTF-8
Nhiều ký tự UTF-8 không thể được nhập trên bàn phím, nhưng chúng luôn có thể được hiển thị bằng số (được gọi là số thực thể):
- A là 65
- B là 66
- C là 67
Thí dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
Giải thích ví dụ
Phần <meta charset="UTF-8">tử xác định bộ ký tự.
Các ký tự A, B và C, được hiển thị bởi các số 65, 66 và 67.
Để trình duyệt hiểu rằng bạn đang hiển thị một ký tự, bạn phải bắt đầu số thực thể bằng & # và kết thúc bằng; (dấu chấm phẩy).
Ký tự biểu tượng cảm xúc
Biểu tượng cảm xúc cũng là các ký tự từ bảng chữ cái UTF-8:
- 😄 là 128516
- 😍 là 128525
- 💗 là 128151
Thí dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Vì Biểu tượng cảm xúc là các ký tự, chúng có thể được sao chép, hiển thị và định kích thước giống như bất kỳ ký tự nào khác trong HTML.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Một số biểu tượng Emoji trong UTF-8
| Biểu tượng cảm xúc | Giá trị | Thử nó |
|---|---|---|
| 🗻 | & # 128507; | |
| 🗼 | & # 128508; | |
| 🗽 | & # 128509; | |
| 🗾 | & # 128510; | |
| 🗿 | & # 128511; | |
| 😀 | & # 128512; | |
| 😁 | & # 128513; | |
| 😂 | & # 128514; | |
| 😃 | & # 128515; | |
| 😄 | & # 128516; | |
| 😅 | & # 128517; |
Để có danh sách đầy đủ, vui lòng truy cập Tham chiếu biểu tượng cảm xúc HTML của chúng tôi .