隨手扎

你可能不知道HTML Code Number

我們都知道的 < 和 >

如果需要在HTML裡面讓瀏覽器顯示<和>，可不能直接寫。你應該要這樣寫：

<p>
    example: &lt;input/&gt;
</p>

來呈現內容

example: <input/>

其中lt表示: LESS-THAN ；而gt表示：GREATER-THAN。這是他們的符號名稱，同時還有號碼名稱。 可以使用10進制或16進制來表示這兩個符號，因此還可以寫成：

<p>
    example: &#60;input/&#62;
</p>
<p>
    example: &#x3c;input/&#x3e;
</p>

關於HTML編碼這件事情

與其他程式語言的原始碼儲存方式一樣，HTML文件是以純文字方式存在的。 這也就存在一個問題：如果不告訴電腦該用什麼編碼方式解讀它，就可能解讀成亂碼。

比如以下HTML內容使用Big5儲存：

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8"/>
    <title>你好，世界</title>
  </head>
  <body>
    <h1>你好，世界</h1>
    <p>怎麼跟得上臺灣</p>
  </body>
</html>

你可能得到這樣的結果：

�A�n�A�@��

����o�W�O�W

你可能需要透過修復文字編碼來顯式正確的內容。

現在瀏覽器也太聰明了吧！

現在瀏覽器也太聰明了吧！
不給<meta charset="big5"/>、也不給使用語言<html lang="zh">。
既然還可以判斷的出來！

沒辦法我只好欺騙它了…
加上<meta charset="UTF-8"/>吧！

不過並不是所有HTML顯示軟體都具備這樣的能力，所以爲了保險起見，除了設置正確的charset，使用ASCII表達ASCII外的顯式字元會更爲安全。

ASCII有一個特殊神聖的地位在

關於HTML Code Number

如上所示，要在HTMl裏面顯式一些特殊符號，可以使用

  1. &<HTML name>;
  2. &#<decimal code>;
  3. &#x<hexadecimal code>;

這三種方式。

雖然並不是所有都有可以使用的HTML name。但一些常見的還是有的：

SymbolHTML NumberHTML NameCommon Name
"&#34;&quot;double quotes
<&#60;&lt;less than sign
>&#62;&gt;greater than sign
©&#169;&copy;copyright sign
®&#174;&reg;registered trade mark sign

現在爲了避免被錯誤的解讀可以改成：

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8"/>
    <title>&#x4F60;&#x597D;&#xFF0C;&#x4E16;&#x754C;</title>
  </head>
  <body>
    <h1>&#x4F60;&#x597D;&#xFF0C;&#x4E16;&#x754C;&#x600E;&#x9EBC;&#x8DDF;&#x7684;&#x4E0A;&#x81FA;&#x7063;</h1>
  </body>
</html>

我想不管你給的編碼是不是正確的，現在都不怎麼影響顯式內容啦~

顯式emoji

除此之外還可以來顯式emoji。

<h1>
    給我一個大大的&#x1F44D;
</h1>
<h2>
    小小兵最愛&#x1F34C;
</h2>

給我一個大大的👍

image alt

參考資料

本系列文參加 iT邦幫忙 的 2022鐵人賽
參賽主題： 這些那些你可能不知道我不知道的Web技術細節

comments powered by Disqus