HTML 編碼器

為什麼需要 HTML 編碼 (Encode)？

瀏覽器在讀取網頁時，是依靠特殊的符號來辨識結構的。例如 < 代表標籤開始，> 代表標籤結束，& 代表命令開始。

如果您想在網頁文章中顯示「<h1>標題</h1>」這段文字，瀏覽器會誤以為這真的是一個標題標籤，於是將其「執行」並放大顯示，而不是顯示出這段程式碼。這款 HTML 編碼器 能將這些敏感符號轉換為瀏覽器看不懂、但能正確顯示的「替代文字」(Entities)，確保您的內容原原本本地呈現。

核心原理：幫符號戴上「面具」

HTML 編碼的原理很簡單，就是將瀏覽器的「預留字元 (Reserved Characters)」替換成安全的「實體名稱 (Named Entities)」或「編號」。

最必須編碼的 5 大天王

您不需要編碼所有文字，通常只需要處理以下這 5 個會破壞版面的符號：

1. & (And 符號) ⮕ 轉為 &

2. < (小於) ⮕ 轉為 < (Less Than)

3. > (大於) ⮕ 轉為 > (Greater Than)

4. " (雙引號) ⮕ 轉為 "

5. ' (單引號) ⮕ 轉為 '

常見的應用場景

1. 防範 XSS 攻擊 (Cross-Site Scripting)

這是工程師最重要的應用。如果駭客在留言板輸入 <script>alert('Hacked')</script>，而網站沒有進行編碼就直接顯示，所有瀏覽該頁面的使用者都會中毒。

• 編碼後： < 變成了 <。

• 結果： 瀏覽器將其視為純文字顯示，不會執行其中的惡意程式碼。

2. 撰寫程式教學文章

技術部落客在分享 HTML 或 XML 程式碼時，必須先經過編碼。

• 原始碼： <div class="box">

• 編碼後： <div class="box">

• 顯示效果： 讀者會看到 <div class="box">，而不會看到一個真的被執行出來的方塊。

3. XML 檔案傳輸

XML 格式對符號非常敏感。如果在 XML 的數據欄位中直接包含 & 或 <，會導致整個 XML 解析失敗 (Parser Error)。傳輸前必須先進行 Escape 處理。

常見問題 (People Also Ask)

Q1：HTML Encode 和 Encryption (加密) 一樣嗎？

完全不一樣。

• Encode (編碼)： 是為了「格式相容性」。它是公開的規則，任何人都能還原 (Decode)。

• Encrypt (加密)： 是為了「保密」。沒有金鑰無法得知原始內容。

• 請不要使用 HTML Encode 來保護密碼。

Q2：為什麼有時候看到 < 有時候是 <？

這兩種都通用。

• < (具名實體)： 使用英文縮寫 (Less Than)，好記好讀，但少數舊瀏覽器支援度較差。

• < (十進位編號)： 直接使用 ASCII 碼編號，相容性最高，但人類難以閱讀。

• 現代瀏覽器對兩者都能完美支援。

Q3：空白鍵需要編碼嗎？

視情況而定。

• 在 HTML 中，連續的空白鍵會被視為一個空格。

• 如果您想保留「多個連續空格」，需要將其編碼為   (Non-Breaking Space)。

Q4：URL Encode 跟這個通用嗎？

不通用。

• HTML Encode： 處理網頁內容 (Body)，將 < 轉為 <。

• URL Encode： 處理網址列 (Address Bar)，將空格轉為 %20。

• 用錯工具會導致連結失效或網頁顯示亂碼。