HTML Entities, Symbols and Emojis

1.Entities Symbols

ในกรณ๊ที่เราต้องการจะเครื่องหมายทางเบราว์เซอร์บางสัญลักษณ์ หรือเครื่องหมายไม่สามารถแสดงผลได้โดยตรง เนื่องจากบางเครื่องหมายอาจผสมผสานกับแท็กอื่นๆนั่นเอง ตัวอย่างเช่น < (น้อยกว่า) ,  > (มากกว่า) , € (สกุลเงินยูโร) เป็นต้น ดังนั้นจึงต้องมีการใช้ entities เพื่อสามารถแสดงสัญลักษณ์หรือเครื่องหมายต่างๆได้อย่างไม่เกิดข้อผิดพลาดใด

ตารางที่ 1 ตัวอย่าง Entities 

ผลลัพธ์ คำอธิบาย ชื่อ Entity  หมายเลข Entity 
  เว้นวรรค &nbsp; &#160;
< น้อยกว่า &lt; &#60;
> มากกว่า &gt; &#62;
& และ &amp; &#38;
“  ฟันหนูคู่ &quot; &#34;
← ลูกศรไปทางซ้าย &larr; &#8592;
¢ สกุลเงินเซ็น &cent; &#162;
£ สกุลเงินปอนด์ &pound; &#163;
€ สกุลเงินยูโร &euro; &#8364;
© ลิขสิทธิ์ &copy; &#169;

ตัวอย่างที่ 1 การใช้งานเครื่องหมาย จากตารางที่ 1

<html>
 <body>
  <ul>
    <li> &lt; เครื่องหมายมากกว่า</li>
    <li> &pound; เครื่องหมายสกุลเงินปอด์</li>
    <li> &#169; เครื่องหมายลิขสิทธิ์</li>
    <li> &#8592; ลูกศรไปทางซ้าย</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>
    &#127761;
    &#127762;
    &#127763;
    &#127764;
    &#127765;
    &#127766;
    &#127767;
    &#127768;
  </div>
</body>
</html>

ไฟล์ที่ 2 อีโมจิดวงจันทร์

ผลลัพธ์ของไฟล์ที่ 2

🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘

อีโมจิเพิ่มเติม Emojis

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors:

Send