Como sangrar HTML desordenado?

Pega o teu HTML coa opción Beautify seleccionada e configura Sangría a 2 espazos, 4 espazos ou Tabulacións. A saída actualízase mentres escribes e podes copiala ou descargar un ficheiro .html. Cargar exemplo mostra unha mostra.

Pode axustar liñas longas ou formatar CSS e JavaScript en liña?

Si. Axuste ofrece Sen axuste, 80 columnas ou 120 columnas, e a opción Formatar etiquetas style e script tamén formatea o CSS e JavaScript dentro deses bloques. O contido en pre e textarea déixase exactamente como está escrito.

Como minificar HTML para produción?

Selecciona Minify. O espazo en branco entre etiquetas colápsase e os comentarios elimínanse a menos que actives Manter comentarios. As caixas de verificación opcionais son Quitar aspas opcionais, Abreviar atributos booleanos e minificar style, script e atributos de estilo incrustados.

A minificación romperá os meus bloques pre ou scripts?

O contido de pre, script, style e textarea protéxese durante o colapso de espazos en branco, e gárdase un espazo entre elementos en liña adxacentes para que as palabras non se fusionen. A minificación incrustada opcional aplícase só se a activas.

Envíase o meu HTML a un servidor?

Non. Un tokenizador integrado na páxina procesa a marcaxe no teu navegador, polo que os modelos privados e o HTML de correo electrónico permanecen no teu dispositivo. Non se carga ningunha biblioteca de formatado de terceiros.

Si. Todas as ferramentas son de uso gratuíto, sen conta nin tarxeta de crédito. O traballo execútase no teu dispositivo en lugar de nos nosos servidores, o que permite que sexa gratuíto.

Si. Funciona nos navegadores móbiles actuais en iOS e Android, sen instalar nada.

🌐

Embellecedor e minificador de HTML de balde

Formatea ou minifica HTML cunha sangría de anidamento adecuada. Conserva o contido dentro dos bloques <pre>, <script>, <style>.

Execútase no teu navegadorSen rexistro, sen ventás emerxentesNon é necesario iniciar sesiónDe balde para sempre

Funciona sen conexión unha vez cargado

Sangría:

Axuste de liña:

Formatar <style> e <script>

Solta aquí un ficheiro ou fai clic para buscalo

HTML, HTM · procesado no teu dispositivo

ou preme Ctrl+V para pegar desde o portapapeis

Explorar ficheiros

Entrada HTML

HTML embellecido

A saída aparecerá aquí…

Usos habituais

Depura HTML Renderizado no ServidorVe a saída HTML en bruto do teu servidor (PHP, Rails, Django, Node) nun formato con sangría lexible.
Formatea Modelos de HTML de Correo ElectrónicoHTML de correo electrónico é verboso (táboas, estilos inline). Formatea para facela editable e mantenible.
Formatea Páxinas HTML EstáticasOs ficheiros HTML estáticos editados manualmente benefícianse dun formateo consistente para edición colaborativa.
Limpa HTML Exportado dende CMSWordPress, Wix, Squarespace exportan HTML con moitos artefactos. Formatea para facela editable.
Minifica HTML para ProduciónReduce o tamaño do ficheiro HTML para cargas de páxina máis rápidas eliminando espazos en branco e caracteres innecesarios.

Como funciona

Esta ferramenta formatea ou comprime HTML usando un tokenizador consciente das etiquetas escrito a man incorporado directamente na páxina — sen biblioteca de formato de terceiros, sen viaxe de ida e volta ao servidor. Cada carácter do teu marcado procésase localmente no teu navegador no momento en que o escribes ou pegas.

1
O tokenizador escanea o marcado
Un escáner personalizado carácter a carácter percorre a cadea HTML, identificando comentarios, declaracións DOCTYPE, etiquetas de apertura, etiquetas de peche, elementos void de peche automático (br, img, input, etc.) e nós de texto en bruto. Un axudante dedicado rastrexa os valores de atributo entre comiñas para que caracteres como > dentro dun atributo (por exemplo, value="a>b") nunca fagan que unha etiqueta se divida antes de tempo.
2
A profundidade de sangría rastréxase por etiqueta
Para o modo embelecer, o tokenizador mantén un contador de profundidade. As etiquetas de apertura de nivel de bloque aumentan a profundidade; as etiquetas de peche redúcena antes de escribirse. Os elementos en liña (span, a, strong, em, etc.) manteñense na mesma liña que o seu contido en lugar de empurrarse á súa propia liña con sangría. As etiquetas como pre, script, style e textarea teñen o seu contido interno emitido textualmente para evitar corromper código sensible aos espazos en branco ou executable.
3
O minificador reduce os espazos en branco con seguridade
No modo minificar, o contido dos bloques pre, script, style e textarea substitúese por marcadores numerados antes de que ocorra calquera redución de espazos en branco. Os comentarios HTML elimínanse, e as secuencias de espazo en branco entre etiquetas elimínanse — excepto entre elementos en liña adxacentes, onde se preserva un único espazo para que as palabras non se fusionen. Os marcadores substitúense despois polo seu contido orixinal.
4
A saída móstrase e opcionalmente gárdase
O resultado formatado ou minificado aparece en directo no panel de saída xunto cunha porcentaxe de cambio de tamaño. Pódelo copiar ao portapapeis ou descargar como ficheiro .html, todo sen saír do navegador.