Hướng dẫn how to add emoji in html mdn - cách thêm biểu tượng cảm xúc vào html mdn

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

Biểu tượng cảm xúc là 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 chúng thì không.

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 các nhân vật và biểu tượng trên thế giới.

Thuộc tính Charset HTML

Để hiển thị chính xác một trang HTML, 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ẻ :

Nếu không được chỉ định, UTF-8 là ký tự mặc định được đặt trong HTML.

Các ký tự UTF-8

Nhiều ký tự UTF-8 không thể được gõ 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ụ

Tôi sẽ hiển thị A B C Tôi sẽ hiển thị A B C

I will display A B C

Hãy tự mình thử »

Ví dụ giải thích

Phần 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.

Để cho 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 nó với; (Semicolon).

Ký tự biểu tượng cảm xúc

Biểu tượng cảm xúc cũng là ký tự từ bảng chữ cái UTF-8:

• Là 128516
• Là 128525
• Là 128151

Thí dụ

Tôi sẽ hiển thị A B C Tôi sẽ hiển thị A B C

😀

Hãy tự mình thử »

Ví dụ giải thích

Thí dụ

Tôi sẽ hiển thị A B C Tôi sẽ hiển thị A B C

😀 😄 😍 💗

Hãy tự mình thử »

Hãy tự mình thử »

Ví dụ giải thích

Phần tử xác định bộ ký tự.

Rémy Beumier

Đăng vào ngày 7 tháng 2 năm 2020 • Cập nhật vào ngày 22 tháng 3 năm 2021

Emoji xuất hiện lần đầu tiên vào năm 1997 trên điện thoại di động Nhật Bản. Họ là hậu duệ của các biểu tượng cảm xúc; đó là những sự bắt chước cơ bản dựa trên văn bản của cảm xúc ;-)-vâng, đây là một ví dụ thực tế.

Emoji đã phát triển về mức độ phổ biến nhiều năm sau nhiều năm bằng cách được đưa vào ngày càng nhiều máy tính, thiết bị di động, ứng dụng, trò chơi, v.v ... Hiện nay chúng rất phổ biến đến nỗi chúng chiếm một phần của văn hóa phổ biến.

Chúng tôi đang sử dụng những người trợ giúp giao tiếp, đặc biệt là trong các thế hệ trẻ. Nhưng họ làm việc bằng cách nào? Để giữ ánh sáng, hãy nói rằng biểu tượng cảm xúc là các nhân vật; Rất giống như các chữ cái, dấu chấm câu hoặc biểu tượng.

👽 📞

Bạn có thể tìm thấy bộ phim này không?

Làm thế nào tôi tích hợp những biểu tượng cảm xúc vào bài viết của tôi? Làm thế nào tôi có thể làm điều đó ở bất cứ đâu trên web?

Chúng tôi sẽ thấy các kỹ thuật khác nhau có sẵn trong HTML, CSS và JavaScript. Họ dựa vào hai phương pháp; Sao chép lại và Codepoint. Trước tiên hãy tìm biểu tượng cảm xúc của bạn, sau đó làm theo các bước trong ngôn ngữ bạn muốn.
First find your Emoji, then follow the steps in the language you want.

HTML

Cách đơn giản nhất. Bạn có thể dán biểu tượng cảm xúc được chọn trước đó.

🔥

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy chọn khác của bạn là sử dụng CodePoint của Emoji và thay thế U+ bằng &#x.

&#x1F525

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy chọn khác của bạn là sử dụng CodePoint của Emoji và thay thế U+ bằng &#x.

CSS

/* You need an HTML element with the class 'element' */
.element::before {
  content: "🔥";
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy chọn khác của bạn là sử dụng CodePoint của Emoji và thay thế U+ bằng &#x.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "\01F525";
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy chọn khác của bạn là sử dụng CodePoint của Emoji và thay thế U+ bằng &#x.

CSS

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = "🔥";

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy chọn khác của bạn là sử dụng CodePoint của Emoji và thay thế U+ bằng &#x.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = String.fromCodePoint(0x1F525);

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy chọn khác của bạn là sử dụng CodePoint của Emoji và thay thế U+ bằng &#x.

CSS

Trong CSS, bạn cần sử dụng phần tử giả ____10 hoặc

&#x1F525

Theo cách tương tự, bạn có thể sử dụng CodePoint thay thế U+ bằng

&#x1F525

JavaScript

Trong JavaScript, bạn cần chỉ định

&#x1F525

Tương tự, bạn có thể sử dụng phương thức chuỗi

&#x1F525

&#x1F525

Làm thế nào để bạn mã hóa biểu tượng cảm xúc trong html?

Làm cách nào để thêm biểu tượng cảm xúc vào MDN CSS?

Làm cách nào để đặt biểu tượng cảm xúc vào mã của tôi?

Làm thế nào để bạn thêm biểu tượng cảm xúc vào tiêu đề HTML?