HTML 格式化工具
什麼是 HTML 格式化？
HTML 格式化會把壓縮、混亂或難以閱讀的標記整理成縮排一致、層級清楚、換行合理的程式碼。它能提升審查、除錯、教學、交接和維護效率，尤其適合查找未閉合標籤、錯誤巢狀、過長屬性列表或產生程式碼中不易發現的問題。正式環境有時需要相反操作：壓縮會移除多餘空格、註解和換行，減少傳輸體積。這個工具可以在可讀性和精簡輸出之間切換，但不會自動修復語意結構、無障礙問題、失效連結、不安全嵌入內容或框架模板錯誤，這些仍需要單獨驗證。
如何使用
如何使用
- 在左側輸入框貼上或輸入 HTML 程式碼
- 選擇縮排大小與換行長度
- 點選「格式化」美化程式碼，或點選「最小化」減小檔案大小
- 在右側查看格式化後的程式碼（附語法高亮）
- 點選「複製」複製到剪貼簿
選項說明
鍵盤快捷鍵
- Ctrl + Enter格式化
- Ctrl + Shift + C複製結果
格式化提示
- 格式化能凸顯錯誤的巢狀結構或可疑的內嵌腳本，但不會清理 HTML，也無法讓不安全的標記變得安全。
- 僅對實際派送的版本進行最小化。請保留可讀的原始標記以便審查、差異比對與無障礙檢查。
使用場景
技術原理
HTML 格式化器遵循 WHATWG HTML 標準的樹建構演算法。位元組先解碼（通常依 meta charset 或 BOM 判定為 UTF-8），詞法分析器依序處理資料、RCDATA、RAWTEXT、script-data 及 §13.2.5 中定義的多種屬性狀態，樹建構階段則使用插入模式狀態機（initial、before html、in head、in body、in table、in select 等）建立 DOM。解析器天生容錯：未關閉的 <p> 在遇到區塊元素時自動關閉，多餘的 </tr> 會被忽略，位置錯誤的 <table> 會被寄養父化。瀏覽器級解析器透過 new DOMParser().parseFromString(src, 'text/html') 暴露此功能；Node 端工具則使用 parse5（WHATWG 參考實作）、htmlparser2 或 cheerio。 重新排版遍歷產生的樹並依元素類別序列化。空元素——area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr——在 HTML5 中永遠不會收到結束標籤（XHTML 的自關閉 /> 被允許但非必要）。區塊容器（div、section、article、header、footer、nav、main、ul、ol、li、table）在深度×縮排空格處獨立成行；行內/短語內容（span、a、strong、em、code）保持行內，因為 CSS 的 white-space: normal 會將連續空白折疊為單一字元。兩種元素類型必須逐字保留：<pre> 和 <textarea> 帶有 white-space: pre 語義，且其前導換行會被解析器消耗；<script> 和 <style> 的內容為 RAWTEXT，因此重新縮排其內容會改變執行時行為——它們通常委派給 JS 或 CSS 子格式化器後再重新嵌入。 屬性序列化會正規化引號（單引號 vs 雙引號）並透過具名字元參照 &、<、>、" 和數字參照 ' 重新編碼內嵌分隔符號。屬性順序在 DOM 中無意義，因此格式化器通常套用穩定的順序（id、class，然後按字母排列）。超過設定的 printWidth 時啟動換行：屬性每個一行，結束的 > 要麼獨佔一行（prettier-plugin-html 的 bracketSameLine: false）要麼附著在最後一個屬性後。壓縮則反向操作——移除區塊標籤之間的空白、清除註解（保留 IE 條件式 <!--[if），並移除符合 [A-Za-z0-9._-]+ 的屬性值的引號。兩種操作對於輸入長度均為 O(n)。
- 解析器：瀏覽器端透過 DOMParser('text/html') 使用 WHATWG HTML 樹建構（§13），Node 端使用 parse5/htmlparser2/cheerio；插入模式狀態機處理缺失/錯位標籤及寄養父化。
- 空元素（無結束標籤）：area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr——依 HTML Living Standard 共 14 個元素。XHTML 自關閉 /> 被容許但多餘。
- 保留空白的元素：<pre> 和 <textarea> 帶有 CSS white-space: pre 並消耗一個前導換行；其內部位元組永不重新縮排，否則可見輸出會改變。
- RAWTEXT 上下文：<script> 和 <style> 的內容不是 HTML——委派給 JS/CSS 子格式化器（或逐字保留）。對正則表達式或字串字面值中的原始文字重新縮排會破壞執行時語義。
- 屬性正規化：選擇引號風格（單引號/雙引號），用五個具名參照（&、<、>、"、'）重新編碼內嵌分隔符號，套用穩定順序（id、class，然後按字母排列），因為 DOM 順序無意義。
- 超過 printWidth 時的換行（通常 80/100/120）：屬性每個一行，結束的 > 要麼獨佔一行要麼附著在最後一個屬性後，與 prettier-plugin-html 的 bracketSameLine 選項一致。
- 壓縮：折疊標籤之間的空白、清除註解（保留 <!--[if IE]> 條件式）、移除可選結束標籤（</li>、</p> 後跟同級元素時），並移除符合 [A-Za-z0-9._-]+ 的屬性引號；往返處理為 O(n)。
範例
壓縮的 HTML → 格式化（2 空格縮排）
輸入:
<div class="card"><h2>Title</h2><p>Body text</p></div>
Formatted:
<div class="card">
<h2>Title</h2>
<p>Body text</p>
</div>格式化 → 壓縮（正式部署）
Source (412 bytes):
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Minified (96 bytes, -77%):
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>過長屬性清單換行為多行
輸入:
<input type="email" id="user-email" name="email" placeholder="you@example.com" required autocomplete="email">
Formatted (wrap > 80 chars):
<input
type="email"
id="user-email"
name="email"
placeholder="you@example.com"
required
autocomplete="email"
>保留自閉合標籤與行內內容
輸入:
<p>Click <a href="/docs">here</a> for help.<br><img src="icon.png" alt=""></p>
Formatted (inline siblings stay on one line):
<p>
Click <a href="/docs">here</a> for help.
<br>
<img src="icon.png" alt="">
</p>常見問題
它會格式化什麼？
HTML 標籤本身：縮排、屬性排列、空行處理，以及（可選）依指定欄寬換行。它不會改變最終的渲染結果——頁面顯示出來會一模一樣，只是原始碼更易讀。
它會保留我的 <pre>、<textarea>、<script> 區塊嗎？
會。pre、textarea、code 與 script 區塊裡的空白具有意義（會出現在渲染結果中），格式化工具不會更動其內容；其他元素則會做空白標準化。
為什麼我的自閉合標籤被改寫了？
在 HTML5 中，<br/>、<img/>、<hr/> 等同於 <br>、<img>、<hr>（HTML5 不要求斜線）。格式化工具可能會選定其中一種風格保持一致。若要在 XHTML、JSX、Vue 模板中使用，請設定保留結尾斜線。
它會驗證 HTML 嗎？
不會。它只會格式化你貼進來的內容。要驗證請使用 W3C Validator 或瀏覽器的開發人員工具。常見問題如未閉合標籤或引號不匹配會原樣通過格式化。
HTML 會被上傳嗎？
不會。格式化在你的瀏覽器中進行，貼上的 HTML 不會經過網路。
可以壓縮 HTML 嗎？
若有壓縮模式可以。HTML 壓縮會移除標籤之間的空白、合併文字中連續的空格，並去掉可省略的關閉標籤。結果較難閱讀但體積較小，適合用於正式版本。
嵌入的 CSS 與 JS 怎麼處理？
如果頁面有支援，<style> 與 <script> 中的內容通常會由它們各自的格式化工具（CSS、JS）處理。否則會原樣保留以避免破壞語法。