1.Entities Symbols
ในกรณ๊ที่เราต้องการจะเครื่องหมายทางเบราว์เซอร์บางสัญลักษณ์ หรือเครื่องหมายไม่สามารถแสดงผลได้โดยตรง เนื่องจากบางเครื่องหมายอาจผสมผสานกับแท็กอื่นๆนั่นเอง ตัวอย่างเช่น < (น้อยกว่า) , > (มากกว่า) , € (สกุลเงินยูโร) เป็นต้น ดังนั้นจึงต้องมีการใช้ entities เพื่อสามารถแสดงสัญลักษณ์หรือเครื่องหมายต่างๆได้อย่างไม่เกิดข้อผิดพลาดใด
ตารางที่ 1 ตัวอย่าง Entities
ผลลัพธ์ | คำอธิบาย | ชื่อ Entity | หมายเลข Entity |
---|---|---|---|
เว้นวรรค | |   | |
< | น้อยกว่า | < | < |
> | มากกว่า | > | > |
& | และ | & | & |
“ | ฟันหนูคู่ | " | " |
← | ลูกศรไปทางซ้าย | ← | ← |
¢ | สกุลเงินเซ็น | ¢ | ¢ |
£ | สกุลเงินปอนด์ | £ | £ |
€ | สกุลเงินยูโร | € | € |
© | ลิขสิทธิ์ | © | © |
ตัวอย่างที่ 1 การใช้งานเครื่องหมาย จากตารางที่ 1
<html> <body> <ul> <li> < เครื่องหมายมากกว่า</li> <li> £ เครื่องหมายสกุลเงินปอด์</li> <li> © เครื่องหมายลิขสิทธิ์</li>
<li> ← ลูกศรไปทางซ้าย</li> </ul> </body> </html>
ไฟล์ที่ 1 test_entitie.html
2.Emojis
Emojis หรือ อีโมจิ มีลักษณะคล้ายรูปภาพ และไอค่อนแต่ไม่ใช่ เนื่องจากอิโมจิมากจากชุดอักขระของ UTF-8
- UTF-8 สามารถเข้าถึงอักขระและสัญลักษณ์ต่างๆบนโลกได้เกือบทั้งหมด
เพื่อให้แน่ใจว่าจะสามารถใช้อีโมจิและสัญลักษณ์ต่างๆได้อย่างแน่นอน ควรที่จะประกาศแท็ก <meta> เพื่อกำหนดชุดอักขระเป็น UTF-8 ดังต่อไปนี้
<meta charset="UTF-8">
ตัวอย่างที่ 2 ใช้อีโมจิเพื่อแสดงดวงจันทร์ (ข้างขึ้น-ข้างแรม)
<html> <style> body { font-size: 50px; } div{ padding: 20px; text-align:center; background-color: red; background-image: linear-gradient(to bottom right, rgb(255, 255, 255), rgb(70, 146, 227)); text-shadow:0px 0px 10px orange; } </style> <body> <div> 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 </div> </body> </html>
ไฟล์ที่ 2 อีโมจิดวงจันทร์
ผลลัพธ์ของไฟล์ที่ 2
อีโมจิเพิ่มเติม Emojis