Com puc sagnar HTML desordenat?

Enganxa el teu HTML amb l'opció Embellir seleccionada i després configura el Sagnat a 2 espais, 4 espais o Tabulacions. La sortida s'actualitza mentre escrius, i la pots copiar o descarregar un fitxer .html. Carrega un exemple mostra una mostra.

Pot ajustar línies llargues o formatar CSS i JavaScript en línia?

Sí. L'opció Ajust ofereix Sense ajust, 80 columnes o 120 columnes, i l'opció Formata les etiquetes style i script també formata el CSS i JavaScript dins d'aquests blocs. El contingut dins de pre i textarea es deixa exactament com està escrit.

Com puc minificar HTML per a producció?

Selecciona Minificar. L'espai en blanc entre etiquetes es col·lapsa i els comentaris s'eliminen, tret que marquis Conserva els comentaris. Les caselles opcionals són Elimina les cometes opcionals, Abrevia els atributs booleans i minificar style, script i atributs d'estil incrustats.

Minificar trencarà els meus blocs pre o scripts?

El contingut de pre, script, style i textarea es protegeix durant el col·lapse d'espais en blanc, i es manté un espai entre elements en línia adjacents perquè les paraules no es fusionin. La minificació incrustada opcional s'aplica només si la marques.

S'envia el meu HTML a un servidor?

No. Un analitzador lèxic integrat a la pàgina processa el marcat al teu navegador, de manera que les plantilles privades i l'HTML de correu electrònic romanen al teu dispositiu. No es carrega cap biblioteca de formatat de tercers.

És realment gratuït?

Sí. Totes les eines són gratuïtes, sense compte ni targeta de crèdit. El treball s'executa al teu dispositiu en lloc dels nostres servidors, i això és el que permet que sigui gratuït.

Sí. Funciona als navegadors mòbils actuals d'iOS i Android, sense instal·lar res.

🌐

Embellidor i minificador d'HTML de franc

Formata o minifica HTML amb sagnat d'imbricació adequat. Preserva el contingut dins de blocs <pre>, <script>, <style>.

S'executa al teu navegadorSense registre, sense finestres emergentsNo cal iniciar sessióGratuït per sempre

Funciona sense connexió un cop carregat

Sagnat:

Ajust de línia:

Formata <style> i <script>

Deixeu un fitxer aquí o feu clic per cercar-lo

HTML, HTM · processat al teu dispositiu

o premeu Ctrl+V per enganxar des del porta-retalls

Navegar pels fitxers

Entrada HTML

HTML embellert

La sortida apareixerà aquí…

Usos habituals

Depuració HTML renderitzat pel servidorVeure la sortida HTML bruta del vostre servidor (PHP, Rails, Django, Node) en format llegible amb sagnat.
Format de plantilles Email HTMLEl correu electrònic HTML és detallat (taules, estils incrustats). Formatar per fer-lo editable i mantenible.
Formatar pàgines HTML estàtiquesEls fitxers HTML estàtics editados manualment es beneficien del formatatge consistent per a l'edició col·laborativa.
Netejar HTML exportat de CMSWordPress, Wix, Squarespace exporta HTML amb molts artefactes. Formatar per fer-lo editable.
Minificar HTML per a produccióReduïu la mida del fitxer HTML per a una càrrega de pàgina més ràpida traient l'espai en blanc i els caràcters desnecessaris.

Com funciona

Aquesta eina formata o comprimeix HTML utilitzant un tokenitzador conscient d'etiquetes escrit a mà integrat directament a la pàgina — sense biblioteca de formatació de tercers, sense anada i tornada al servidor. Cada caràcter del teu marcatge es processa localment en el moment que escrius o enganxes.

1
El tokenitzador escaneja el marcatge
Un escàner personalitzat caràcter per caràcter recorre la cadena HTML, identificant comentaris, declaracions DOCTYPE, etiquetes d'obertura, etiquetes de tancament, elements buits d'autotancament (br, img, input, etc.), i nodes de text en brut. Un ajudant dedicat segueix els valors d'atribut entre cometes perquè caràcters com > dins d'un atribut (per exemple, value="a>b") mai facin que una etiqueta es divideixi prematurament.
2
La profunditat de sagnat es controla per etiqueta
Per al mode embelleix, el tokenitzador manté un comptador de profunditat. Les etiquetes d'obertura de nivell de bloc augmenten la profunditat; les etiquetes de tancament la disminueixen abans d'escriure's. Els elements en línia (span, a, strong, em, etc.) es mantenen a la mateixa línia que el seu contingut en lloc d'empènyer-se a la seva pròpia línia sagnada. Etiquetes com pre, script, style i textarea tenen el seu contingut intern emès literalment per evitar corrompre codi sensible als espais en blanc o executable.
3
El minificador col·lapsa els espais en blanc de manera segura
En mode minifica, el contingut dels blocs pre, script, style i textarea es substitueix per marcadors numerats abans que passi cap col·lapse d'espais en blanc. Els comentaris HTML s'eliminen, i les seqüències d'espais en blanc entre etiquetes s'eliminen — excepte entre elements en línia adjacents, on es preserva un únic espai perquè les paraules no es fusionin. Els marcadors de posició es restauren després al seu contingut original.
4
La sortida es mostra i opcionalment es desa
El resultat formatat o minificat apareix en directe al panell de sortida al costat d'un percentatge de canvi de mida. El pots copiar al porta-retalls o descarregar com a fitxer .html, tot sense sortir del navegador.