我以工具為生,這是我在閱讀任何人之前最常做的一件事'前端是透過格式化程式運行 HTML。伺服器模板在一行上吐出標記。捆綁器將其折疊。有人貼到 Slack 中的一個片段到達,其中三個級別的嵌套被壓平到尖括號牆上。我無法調試我無法閱讀的內容,因此第一步始終相同:將其貼入,點擊美化,然後讓結構暴露出來。這本指南是我希望我交給年輕時的自己的指南,他過去常常用手重新標記,但有一半時間都搞錯了。
TL;DR: HTML 格式化程式會重新縮排標記,以便您可以讀取其結構,並將其縮小,使其運輸得更小。在建置和調試時使用美化,進行小型化以進行生產。這 HTML 格式化程式 在 toolz。dev 上,它既可以在瀏覽器中執行,也可以保留腳本、樣式和逐字節預先內容,並且從不上傳任何內容。
什麼是 HTML 格式化程式?
HTML 格式化程式是一種工具,它將標記解析到其標籤樹中,並以一致的縮排將其列印回,每個嵌套深度一個層級。這就是美化方向。相反,縮小,剝離標籤之間微不足道的空白,以便文件盡可能小,而不會改變瀏覽器的渲染方式。大多數好的格式化程序(包括 toolz。dev 上的格式化程序)都從相同的輸入執行這兩種操作。
" 這個字;無關緊要&引用;正在該句子中做實際的工作。在 HTML 中,有些空白很重要,有些則不重要。換行符和關閉之間放置的兩個空格 </li> 還有下一個 <li> 不更改渲染頁面的任何內容,因此格式化程式可以自由新增、刪除或標準化它們。但a內的空間 <pre> 塊,或兩個內聯之間的單一空間 <a> 元素是使用者所看到的一部分。不理解這種差異的格式化程式會很樂意破壞您的佈局。這是有幫助的格式化程式和你學會不信任的格式化程式之間的界線。
如果你用過 更漂亮 在您的編輯器中,您已經知道這種感覺:您不再關心縮進,因為工具可以保證它。基於瀏覽器的格式化程式可以為您提供與您無法控制的一次性片段、生成的輸出和標記相同的保證,而無需設定項目。
為什麼 HTML 一開始就變得混亂?
它有助於知道混亂從何而來,因為它告訴你格式化程式必須生存什麼。
第一個來源是伺服器渲染。 PHP 範本、Rails 視圖或 Blade 檔案會發出 HTML,其中包含範本引擎想要產生的任何空格,並且在縮小中間件運行後,它通常是一行數千個字元長。當瀏覽器中出現問題時,您點擊並引用;查看來源,並引用;這就是你得到的。
第二個來源是複製和貼上。您從設計系統中獲取一個元件、CMS 中的片段或某人發送給您的電子郵件模板,並且它攜帶來源使用的任何間距:混合選項卡和空格、不一致的嵌套、尾隨空格。我一周的大部分時間都在 WordPress 和無頭 CMS 輸出中度過,而 CMS 生成的標記是最糟糕的,因為它是由每個格式不同的片段組裝而成的。
第三個來源是產生的標記。建置工具、所見即所得編輯器和匯出函數產生的 HTML 從來就不是人類可以讀取的。它是正確的,但不透明。格式化程式將其變回您可以審核的內容。
共同點是這些來源都不關心您是否可以讀取結果。這就是你的工作,格式化程式是最快的方法。
如何在線上格式化 HTML?
toolz。dev 上的工作流程大約需要十秒:
- 打開 HTML 格式化程式 並將標記貼到輸入面板中。無論它是縮小到一行、縮排不一致還是裸露片段都沒關係。
- 選擇 Beautify 來擴展它或 Minify 來壓縮它。
- 為了美化,請選擇縮排:2 個空格、4 個空格或選項卡。兩個空格是常見的 Web 預設值。
- 可選地勾選"刪除註解"從輸出中刪除 HTML 評論。
- 複製結果或下載
.html文件。
一切都運行客戶端。瀏覽器中的解析器是 JavaScript,因此標記永遠不會觸及伺服器。這比人們想像的更為重要,我會再討論這一點。
美化和縮小有什麼差別?
這些是共享解析器的相反操作,並且知道何時到達每個操作是大部分技能。
美化是為人類準備的。它添加了換行符和縮進,因此嵌套是可見的,這就是您在編輯、調試、差異兩個版本或查看拉取請求時想要的。當我尋找佈局錯誤時,我會先美化,以便可以看到哪個元素未關閉或嵌套太深。
縮小是針對機器的。它刪除了瀏覽器忽略的空格,因此檔案更小且傳輸速度更快。您縮小 HTML 的原因與縮小 CSS 或 JavaScript 的原因相同:線上位元組花費時間,而在大頁面上,空格會相加。如果您已經依賴了 HTML 縮小器 對於生產壓縮,格式化程式是您在出現故障時再次讀取輸出的工具。
以下是兩個方向如何比較實際不同的決策:
| 方面 | 美化 | 縮小 |
|---|---|---|
| 目標 | 可讀性 | 最小的文件 |
| 標籤之間的空白 | 新增並標準化 | 已刪除 |
| 輸出大小 | 更大 | 較小的 |
| 什麼時候使用 | 編輯、調試、審核 | 生產、轉讓 |
| 縮排 | 2 個空格、4 個空格或製表符 | 沒有 |
| 渲染結果 | 相同的 | 相同的 |
最後一行是重要的。這兩個操作都不會改變頁面的外觀。只有瀏覽器視為無關緊要的變更的空白。如果格式化程式曾經更改過渲染的輸出,則表示格式化程式中存在錯誤,而不是格式化的屬性。
格式化會破壞我的 JavaScript、CSS 或預先格式化的文字嗎?
這是區分玩具和工具的問題,也是我選擇使用哪種格式的原因。
某些元素包含空格和字元重要的內容,不得觸摸。這 WHATWG HTML 標準 分類 script 和 style 作為原始文字元素和 textarea 和 title 作為可逃避的原始文字元素。在它們內部,格式化程式必須將內容視為不透明。如果它嘗試在 a 中重新縮排 JavaScript script 標籤,它可以移動模板文字的內容,更改正規表示式,或在多行字串中移動一行,現在您的程式碼的行為有所不同。這不是格式更改,而是格式化程式引入的錯誤。
的 pre 元素是一個相關的案例。它的全部目的是保留空白,因此其文字內容完全按照書面形式顯示。內部重新縮排的格式化程式 <pre> 明顯改變頁面。
toolz。dev 格式化程式透過處理來處理所有這些 script, style, pre, textarea, 和 title 作為原始內容:它重新縮排周圍的 HTML,但逐字複製其內部文字。您的程式碼和預先格式化的文字逐字節顯示相同。當我在建立它時測試它時,接受欄很簡單:a <script> 包含 if(a<b){x=1} 必須不受影響地生存,事實確實如此。如果您正在使用包含內聯腳本或樣式的標記,則這是您信任任何格式化程式之前需要檢查的屬性。
格式化程式可以處理損壞或不完整的 HTML 嗎?
真正的 HTML 很少像 XML 那樣格式化良好,需要完美的格式化程式也是無用的。瀏覽器以寬容著稱: HTML 解析演算法 準確定義如何處理省略的結束標記和錯誤嵌套的元素,這就是頁面遺失的原因 </li> 仍然渲染良好。好的格式化程式借用相同的容差。
最常見的情況是可選的結束標籤。 HTML 可讓您省略諸如此類的元素的結束標記 li, p, td, tr, 和 option,因為規格上寫著「打開」 li 下次時隱式關閉 li 開始。所以 <ul><li>a<li>b</ul> 有效,並且 toolz。dev 格式化程式應用這些隱含閉規則來產生 <li>a</li> 和 <li>b</li> 在他們自己的行上,就像瀏覽器會建立樹一樣。 A <p> 當區塊元素在其內部開啟時,該元素會自動關閉,因為段落不能包含區塊內容。
第二種情況是真正損壞的標記:標籤打開但從未關閉,或者雜散關閉標籤沒有匹配的打開。格式化程式關閉文件末尾懸掛的任何內容並將其報告為警告,因此您知道輸入不完整而不是默默猜測。這些警告通常是找到您要修復的確切錯誤的最快方法。
將這種行為與嚴格的格式化程式進行比較,並與手工執行的行為進行比較:
| 方法 | 省略結束標籤 | 未關閉的標籤 | 速度 |
|---|---|---|---|
| 寬容格式化程式(toolz。dev) | 應用隱含閉規則 | 自動關閉並發出警告 | 瞬間 |
| 嚴格的 XML 樣式格式化程式 | 經常出錯 | 錯誤出 | 即時工作時 |
| 手動重新縮排 | 你自己追蹤它 | 容易錯過 | 緩慢且容易出錯 |
我曾經在底排,用手重新縮進,錯過了一個未關閉的 div 十分之三。寬容的工具獲勝是因為真正的標記很混亂,你希望混亂浮出水面,而不是被拒絕。
我什麼時候應該使用格式化程式而不是編輯器?
如果您擁有該文件並且它位於您的專案中,則您的編輯器加上 Prettier 或同等文件是格式化的正確主頁,因為它在保存時運行並在整個團隊中保持一致。我並不是建議你更換它。
基於瀏覽器的格式化程式在工作流程留下的空白中佔有一席之地。您貼上錯誤報告的片段並需要立即閱讀它。您所在的機器不是您的開發盒。您正在查看 CMS 輸出、電子郵件範本或生成的標記,這些標記從未存在於回購文件中。您想要縮小單一片段而不連接建置步驟。在所有這些情況下,開啟選項卡比配置項目更快,結果也相同。
還有隱私角度,這不是一件小事。因為 toolz。dev 解析器完全在您的瀏覽器中運行,標記包含內部 URL、未發布的副本、嵌入模板中的 API 回應或 customer'資料永遠不會離開您的裝置。許多線上格式化程式將您的輸入發佈到伺服器來完成工作。對於工作程式碼庫中的任何內容,這是您不需要進行的資料公開。我對此非常關心,它是網站上每個工具的設計規則,我在其中寫了更多相關內容 web 開發人員工具包 和指南 線上工具中的資料隱私.
實用的工作流程節省了我幾個小時
這是當佈局行為不端時我實際運行的循環。美化標記,使嵌套可見。掃描縮排以查找看起來錯誤的級別,因為雜散的額外縮排幾乎總是意味著永遠不會關閉的標籤。閱讀格式化警告,其中經常命名確切的未關閉元素。將其固定在來源中。如果片段注定要生產,則在返回途中將其縮小。整個週期是一分鐘,那一分鐘的大部分時間都是我閱讀,而不是與工具戰鬥。
同樣的循環適用於內容審核。當我檢查可訪問性或 SEO 標記時,我首先美化,以便一目了然地看到標題結構和地標元素,然後我將特定部分拉入其他工具:將區塊轉換為 Markdown 以用於文件記錄 html 降價 轉換器,或產生與的比較表 降價表. 格式化是使結構足夠清晰可辨的步驟。如果您想要這些工具適合更廣泛的例程,那麼 開發人員生產力工具 指南列出了它。
常見問題
如何在線上格式化 HTML?
將 HTML 貼到輸入面板中,選擇美化,選擇縮排寬度,然後按一下格式。該工具解析標籤樹並重新縮進它,然後允許您複製或下載結果。所有處理都發生在您的瀏覽器中,因此不會上傳任何內容。
美化和縮小 HTML 有什麼不同?
美化增加了換行符和縮進,因此嵌套易於閱讀,非常適合編輯和調試。縮小刪除標籤之間微不足道的空白以產生較小的檔案進行生產。兩者都保持相同的渲染結果;只有空白發生變化。
格式會改變我的頁面外觀嗎?
不。格式化程式僅更改標籤之間的空格,而不更改元素、屬性或文字。保留空格重要的內容,例如 pre、textarea 和內聯文本,因此頁面在格式化之前和之後呈現相同的內容。
格式化程式會重新格式化我的 JavaScript 和 CSS 嗎?
否。腳本和樣式標籤內的內容被視為原始文字並逐字複製。該工具會重新縮排周圍的 HTML,但永遠不會觸及程式碼本身,因此範本文字、正規表示式和 CSS 值逐字節保持相同。
它可以處理損壞或不完整的 HTML 嗎?
是的,在理性之內。解析器是寬容的:它應用瀏覽器對 li、p 和 td 等標籤使用的相同隱含關閉規則,並且它會自動關閉文件末尾未打開的標籤。當它這樣做時,它會顯示警告,以便您知道標記不完整。
格式化包含敏感資料的 HTML 是否安全?
是的。解析器在瀏覽器中完全使用 JavaScript 運作。沒有網路請求會攜帶您的標記,不會儲存任何內容,並且該工具在載入後會離線工作。持有內部連結、API 回應或未發布副本的 HTML 永遠不會離開您的電腦。
有哪些縮排選項可用?
美化輸出支援2個空格、4個空格或製表符。兩個空格是 Web 專案的常見預設空格,四個空格適合喜歡更寬縮排的團隊,選項卡讓每個開發人員在編輯器中設定自己的顯示寬度。
HTML 格式化程式與 HTML 小型化程式有何不同?
格式化程式在一個工具中具有兩個方向:美化以擴展讀取標記,並縮小以折疊它以進行傳輸。僅壓縮專用小型化程式。如果您主要需要生產壓縮,HTML 小型化程式將重點放在此;如果您在閱讀和運輸之間切換,格式化程式將涵蓋兩者。
使用免費格式化您的標記 HTML 格式化程式. 它完全在您的瀏覽器中運行,保持腳本和預格式化內容完整,並且從不上傳位元組。
