Viki

Viki 写东西的地方

努力上进且优秀
github
email
x
steam
bilibili
douban

浅谈 HTML 中的字符实体(如 ` `,`<` 等)

在入門學習 HTMLCSS 編寫簡單網頁的時候,由於標籤內容中的多個空格會被自動合併為一個空格,我們可能會使用   來實現多個空格的效果。

除此之外,為了實現某些佈局而你對 CSS 的 marginpadding 等屬性又不熟悉的時候,也可能歪打正著了解到   這個東西。

確實,它可以解決多個空格被自動合併的問題,也可以用來調整頁面佈局,但最好還是使用 CSS 來處理佈局問題,別依賴於  

那麼問題來了,剛提到的   以及我們經常看到的 <> 等,到底是什麼?

字符實體引用(Named Character References)#

在 SGML、 HTML 與 XML 文件中,很多字符,都是屬於保留字符,例如 <>,對於標記語言來說是有特殊意義的。如果某些 Unicode 字符在文件的當前編碼方式(如 ISO-8859-1)中不能直接表示,或因為使用了 HTML 語法符號的子集導致解析成語法而無法顯示原來的字符時,可以通過字符值引用或者字符實體引用兩種轉義序列來表示這些不能直接編碼的字符。而我們上文提到的 &nbsp; 就屬於字符實體引用

HTML 標準中關於實體名稱的說明:Named character references,標準中還提供了一份穩定的 JSON 格式的數據,供開發者下載使用。

同一個符號,可以用字符實體字符值兩種方式引用,比如剛才的空格字符,就可以使用對應的字符值引用 &#32; 來表示。實體名稱的優勢在於便於記憶,但不能保證所有的瀏覽器都能順利識別它,而字符值則沒有這種擔憂,但它實在不方便記憶。

HTML 4 DTD 定義了 252 個命名實體。細心的你可能會發現,這裡的字符值,其實就是對應著符號的 ASCII 編碼,它可以用十進制,也可以用十六進制表示。

查看所有字符實體,也可前往 字符實體引用列表 - 維基百科

如何轉換#

如果你想知道一個符號的字符實體或字符值如何表示,你可以通過這個網站進行快速轉換,它支持設置轉換結果為字符實體和字符值。

在實際開發中該如何處理#

你可以使用社區的 html-entities npm 模組進行處理。

2023.8.29 更新:除了 html-entities 之外,你還可以使用 entitieshe 來處理。

下面是 ESM 的簡單使用示例:

import { encode, decodeEntity } from 'html-entities'

encode('< > " \' & © ∆')
// -> '&lt; &gt; &quot; &apos; &amp; © ∆'

encode('< ©', { mode: 'nonAsciiPrintable' })
// -> '&lt; &copy;'

encode('< ©', { mode: 'nonAsciiPrintable', level: 'xml' })
// -> '&lt; &#169;'

decodeEntity('&lt;')
// -> '<'

decodeEntity('&copy;', { level: 'html5' })
// -> '©'

decodeEntity('&copy;', { level: 'xml' })
// -> '&copy;'

希望本篇對你有所幫助或啟發。

參考#

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。