HTML Character Entity(字符實體和符號) | HTML

HTML 字符實體在顯示特殊字元方面非常的方便,且可以避免引用大量圖片,提升網頁的效能。

我們範例寫出常用的字符實體和符號。學習如何使用字符實體讓你的網頁符號可以正確呈現。無論你是編碼新手還是希望提高前端技能,了解字符實體和符號避免讓你使用過多的圖片或是emoji,提高你網頁載入的速度。

See the Pen HTML Character Entity(字符實體和符號)-HTML by lenrich (@lenrich) on CodePen.

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符實體和符號</title>
  </head>
  <body>
    <!-- https://w3school.com.cn/html/html_entities.asp -->
    <!-- 連續空格(換行空格) -->
    <p>Hello, my name is &nbsp; &nbsp; &nbsp; &nbsp;Summer</p>
    <!-- 大於小於 -->
    <p>3&nbsp; >&nbsp; 2</p>
    <p>3 &gt; 2</p>
    <p>3 &#62; 2</p>
    <p>3 &lt; 2</p>
    <p>3 &#60; 2</p>
    <!-- 版權和註冊商標 -->
    <p>&copy;</p>
    <p>&reg;</p>
    <!-- 貨幣 -->
    <p>&cent;</p>
    <p>&pound;</p>
    <p>&yen;</p>
    <p>&euro;</p>
    <!-- 撲克牌 -->
    <p>&spades;</p>
    <p>&clubs;</p>
    <p>&hearts;</p>
    <p>&diams;</p>
    <!-- 原始碼 -->
    <code> &lt;?php echo 'Hello World' ?&gt; </code>
    <p>保存文件可以按住鍵盤中的<kbd>Ctrl+S</kbd></p>
  </body>
</html>