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

0
11

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 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 thẻ <meta>:

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

Ví dụ:

<p>Tôi sẽ hiển thị A B C</p> 
<p>Tôi sẽ hiển thị A B C</p> 

Kết quả:


Giải thích ví dụ

Phần tử <meta charset="UTF-8"> 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

Ví dụ:

<h1>Biểu tượng cảm xúc đầu tiên của tôi</h1>

<p>😀</p>

Kết quả:

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.

Ví dụ:

<h1>Biểu tượng cảm xúc có kích thước</h1>

<p style="font-size:48px">
😀 😄 😍 💗
</p>

Kết quả:

Một số biểu tượng Emoji trong UTF-8

Biểu tượng cảm xúcGiá trị
🗻# 128507;
🗼# 128508;
🗽# 128509;
🗾# 128510;
🗿# 128511;
😀# 128512;
😁# 128513;
😂# 128514;
😃# 128515;
😄# 128516;
😅# 128517;

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây