Cum indentez un cod HTML dezordonat?

Lipiți codul HTML cu opțiunea Beautify selectată, apoi setați Indent la 2 spații, 4 spații sau Taburi. Ieșirea se actualizează pe măsură ce tastați și o puteți copia sau descărca un fișier .html. Încarcă exemplu arată o mostră.

Poate împărți liniile lungi sau formata CSS și JavaScript inline?

Da. Opțiunea Wrap oferă Fără împărțire, 80 de coloane sau 120 de coloane, iar opțiunea Formatează etichetele style și script formatează și CSS-ul și JavaScriptul din acele blocuri. Conținutul din pre și textarea este lăsat exact așa cum a fost scris.

Cum minific HTML-ul pentru producție?

Selectați Minify. Spațiile albe dintre etichete sunt restrânse, iar comentariile sunt eliminate, cu excepția cazului în care bifați Păstrează comentariile. Opțiunile facultative sunt Elimină ghilimelele opționale, Scurtează atributele booleene și minificarea stilurilor, scripturilor și atributelor style încorporate.

Minificarea va strica blocurile mele pre sau scripturile?

Conținutul elementelor pre, script, style și textarea este protejat în timpul restrângerii spațiilor albe și se păstrează un spațiu între elementele inline adiacente pentru ca cuvintele să nu se unească. Minificarea încorporată opțională se aplică doar dacă o bifați.

Este HTML-ul meu trimis la un server?

Nu. Un tokenizer încorporat în pagină procesează marcajul în browserul dvs., astfel încât șabloanele private și HTML-ul de e-mail rămân pe dispozitiv. Nu se încarcă nicio bibliotecă terță de formatare.

Da. Fiecare unealtă este gratuită, fără cont și fără card de credit. Procesarea se face pe dispozitivul tău, nu pe serverele noastre, ceea ce ne permite să le oferim gratuit.

Funcționează pe mobil?

Da. Funcționează în browserele mobile actuale de pe iOS și Android, fără nimic de instalat.

🌐

Înfrumusețător & Minificator HTML — gratuit

Formatează frumos sau minifică HTML cu indentare corespunzătoare a imbricării. Păstrează conținutul din blocurile <pre>, <script>, <style>.

Rulează în browserFără înregistrare, fără ferestre pop-upFără autentificare necesarăGratuit pentru totdeauna

Funcționează offline odată încărcat

Indentare:

Împărțire pe rânduri:

Formatează <style> și <script>

Trage un fișier aici sau fă clic pentru a naviga

HTML, HTM · procesat pe dispozitivul tău

sau apăsați Ctrl+V pentru a lipi din clipboard

Răsfoiește fișierele

Intrare HTML

HTML formatat

Ieșirea va apărea aici…

Utilizări frecvente

Depanare HTML redat de serverVizualizare ieșire HTML brută de la serverul dvs. (PHP, Rails, Django, Node) în format lizibil cu indentare.
Formatare șabloane email HTMLEmail HTML este verbose (tabele, stiluri în linie). Formatare pentru a o face editabilă și ușor de întreținut.
Formatare pagini HTML staticeFișierele HTML statice editate manual beneficiază de formatare consistentă pentru editare colaborativă.
Curățare HTML exportată din CMSWordPress, Wix, Squarespace exportare HTML cu multe artefacte. Formatare pentru a o face editabilă.
Minificare HTML pentru producțieReducere dimensiune fișier HTML pentru încărcări pagină mai rapide prin eliminarea spațiilor albe și caractere inutile.

Cum funcționează

Această unealtă formatează sau comprimă HTML folosind un tokenizator conștient de etichete scris manual, construit direct în pagină — fără bibliotecă de formatare terță parte, fără călătorie dus-întors la server. Fiecare caracter al markup-ului tău este procesat local în browser în momentul în care scrii sau lipești.

1
Tokenizatorul scanează markup-ul
Un scanner personalizat caracter-cu-caracter parcurge șirul HTML, identificând comentarii, declarații DOCTYPE, etichete de deschidere, etichete de închidere, elemente void auto-închise (br, img, input, etc.), și noduri de text brut. Un ajutor dedicat urmărește valorile de atribut citate astfel încât caracterele precum > din interiorul unui atribut (de exemplu, value="a>b") nu cauzează niciodată despărțirea prematură a unei etichete.
2
Adâncimea de indentare este urmărită per etichetă
Pentru modul beautify, tokenizatorul menține un contor de adâncime. Etichetele de deschidere la nivel de bloc măresc adâncimea; etichetele de închidere o scad înainte de a fi scrise. Elementele inline (span, a, strong, em, etc.) sunt păstrate pe aceeași linie cu conținutul lor mai degrabă decât împinse pe propria linie indentată. Etichete precum pre, script, style, și textarea au conținutul lor intern emis verbatim pentru a evita coruperea spațiilor albe sensibile sau a codului executabil.
3
Minificatorul colapsează spațiile albe în siguranță
În modul minify, conținutul blocurilor pre, script, style, și textarea este înlocuit cu sentinele numerotate înainte ca orice colaps de spații albe să se întâmple. Comentariile HTML sunt eliminate, iar seriile de spații albe dintre etichete sunt eliminate — cu excepția dintre elementele inline adiacente, unde un singur spațiu este păstrat astfel încât cuvintele nu se fuzionează. Sentinelele placeholder sunt apoi restaurate la conținutul lor original.
4
Ieșirea este afișată și opțional salvată
Rezultatul formatat sau minificat apare live în panoul de ieșire alături de un procentaj de schimbare a dimensiunii. Îl poți copia în clipboard sau descărca ca fișier .html, totul fără a părăsi browser-ul.