HTML 美化的運作原理
美化器逐個標籤讀取標記，追蹤每個元素的巢狀深度，然後以一致的縮排重新輸出。它不會改變頁面的任何渲染效果——只改變原始碼的版面方式。
- 解析標籤. 函式庫將輸入掃描為一串 token：開始標籤、結束標籤、文字內容、注釋，以及 script 和 style 區塊的內容。帶引號的屬性值以及 pre 和 textarea 元素的主體被視為單一單元，因此其內部的空白保持不變。
- 追蹤巢狀. 在走訪 token 串流時，美化器維護一個即時縮排層級。每遇到非自閉合的開始標籤，層級加深一層；每遇到對應的結束標籤，層級退回。這個深度決定了輸出中每行前方的縮排單位數量。
- 套用選項. 縮排選擇（2 個空格、4 個空格或 Tab）確定一個縮排層級的寬度。換行列數值在屬性或文字超過指定列數後將長行折斷。空行上限將連續多行空行折疊至您設定的數量。
- 重新輸出標記. 最後，格式化器依照計算好的縮排和換行規則列印標籤。如果啟用了內嵌格式化，每個 style 區塊的內容將通過 CSS 格式化器處理，每個 script 區塊的內容將通過 JS 格式化器處理，使內嵌程式碼與周圍的標記對齊。
為什麼要美化 HTML
- 閱讀壓縮頁面. 正式 HTML 去除了換行以節省位元組。美化可以還原結構，讓你找到需要的部分、發現遺漏的結束標籤，並理解文件的真實巢狀方式。
- 整理不一致的模板. 經多人編輯的標記往往出現混合縮排和標籤位置混亂。一次美化能將整個檔案統一為單一版面，使下一次提交只顯示你真正做的修改，而不是滿屏的空白重排。
- 不拖慢頁面載入. 大多數線上格式化工具在你開啟頁面時就載入整個函式庫。本工具只在你點擊「美化」或開啟即時模式時才延遲載入 js-beautify，因此開啟頁面只消耗幾千位元組而非幾百千位元組，頁面保持快速回應。
- 程式碼不離開你的瀏覽器. 整個過程完全在你的裝置上執行。你的標記從不上傳到伺服器——當頁面屬於客戶、包含內部 URL 或受保密協議約束時，這一點格外重要。
常見應用場景
凡是需要閱讀並非為了可讀性而撰寫的標記時，美化 HTML 就派上用場。
- 檢查線上頁面：從「檢視原始碼」貼上壓縮原始碼，找出本地無法重現的版面 bug 背後的標記。
- 清理 CMS 輸出：將頁面建構器匯出到一行的模板重新格式化，再提交回版本庫。
- 無障礙與 SEO 稽核：展開文件以核查標題順序、地標結構和 alt 屬性是否符合真實 DOM。
一個實際操作範例
取一個壓縮片段：<div><p>hi</p><span>x</span></div>。將縮排設為 2 個空格，貼到上方並點擊美化。你將得到一個可讀的區塊：<div> 獨占一行，<p>hi</p> 和 <span>x</span> 各自縮排一層，匹配的 </div> 對齊在下方。將縮排切換為 Tab，每個層級從兩個空格變為 Tab 字元。加入一個 <style>a{color:red}</style> 區塊，開啟「同時格式化內嵌 CSS 和 JS」，規則將展開到各自縮排的行，而非壓在一行。
FAQ
這在我的瀏覽器中執行嗎？
是的。js-beautify 函式庫在你第一次點擊「美化」或啟用即時模式時延遲載入，然後快取。你的標記不會離開頁面——沒有伺服器往返，也沒有上傳。
美化會改變頁面的渲染效果嗎？
不會。美化器只添加和移除標籤之間的空白和換行。瀏覽器在建構頁面時會忽略這些空白，因此渲染結果完全相同。唯一需要注意的是 pre、textarea 或內嵌元素內部的空白敏感內容，格式化器會刻意保持不變。
內嵌 CSS 和 JS 開關有什麼作用？
關閉時，style 和 script 區塊的內容與你貼上時完全一致。開啟後，每個 style 區塊內的 CSS 通過 CSS 格式化器處理，每個 script 區塊內的 JavaScript 通過 JS 格式化器處理，使內嵌程式碼的縮排與周圍標記對齊。
「換行列數」有什麼作用？
它設置超過多少列後，具有多個屬性的標籤或長文字會被折斷到多行。設為 0 則無論多長都保持單行。設為 80 或 120，格式化器會將超過該列數的內容換行，讓寬元素在窄編輯器中保持可讀。
瀏覽器端 HTML 美化讓你無需建置步驟或上傳就能獲得可讀的標記。貼上壓縮或雜亂的頁面，選擇縮排和換行列數，決定是否重新格式化內嵌 CSS 和 JS，然後複製或下載結果。程式碼不離開你的裝置，無需帳號，函式庫只在你需要時才載入——開啟本頁面只花費幾千位元組，而不是幾兆位元組。