การใช้ Emojis ใน HTML
อิโมจิคืออักขระจากชุดอักขระ UTF-8: 😄 😍 💗
อีโมจิคืออะไร?
อิโมจิดูเหมือนรูปภาพหรือไอคอน แต่ไม่ใช่
คือตัวอักษร (อักขระ) จากชุดอักขระ UTF-8 (Unicode)
UTF-8 ครอบคลุมอักขระและสัญลักษณ์เกือบทั้งหมดในโลก
แอตทริบิวต์ชุดอักขระ HTML
หากต้องการแสดงหน้า HTML อย่างถูกต้อง เว็บเบราว์เซอร์ต้องทราบชุดอักขระที่ใช้ในหน้า
สิ่งนี้ระบุไว้ใน<meta>แท็ก:
<meta charset="UTF-8">
หากไม่ได้ระบุไว้ UTF-8 จะเป็นชุดอักขระเริ่มต้นใน HTML
อักขระ UTF-8
ไม่สามารถพิมพ์อักขระ UTF-8 จำนวนมากบนแป้นพิมพ์ได้ แต่สามารถแสดงโดยใช้ตัวเลขได้เสมอ (เรียกว่าหมายเลขเอนทิตี):
- A คือ 65
- B คือ 66
- C คือ 67
ตัวอย่าง
<!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>
ตัวอย่างที่อธิบาย
องค์ประกอบ<meta charset="UTF-8">กำหนดชุดอักขระ
อักขระ A, B และ C จะแสดงด้วยตัวเลข 65, 66 และ 67
เพื่อให้เบราว์เซอร์เข้าใจว่าคุณกำลังแสดงอักขระ คุณต้องเริ่มหมายเลขเอนทิตีด้วย และลงท้ายด้วย ; (อัฒภาค).
ตัวละครอีโมจิ
อิโมจิยังเป็นอักขระจากตัวอักษร UTF-8 ด้วย:
- 😄 คือ 128516
- 😍 คือ 128525
- 💗 คือ 128151
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
เนื่องจากอิโมจิเป็นอักขระ จึงสามารถคัดลอก แสดง และปรับขนาดได้เหมือนกับอักขระอื่นๆ ใน HTML
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
สัญลักษณ์อีโมจิบางตัวใน UTF-8
| อิโมจิ | ค่า | ลองมัน |
|---|---|---|
| 🗻 | | |
| 🗼 | | |
| 🗽 | | |
| 🗾 | | |
| 🗿 | | |
| 😀 | | |
| 😁 | | |
| 😂 | | |
| 😃 | | |
| 😄 | | |
| 😅 | |
สำหรับรายการทั้งหมด โปรดไปที่HTML Emoji Referenceของเรา