Señor Herramientas

Cómo usar

Cómo usar el Formateador HTML

Haga que el HTML sea más legible o minimícelo cuando necesite un resultado compacto.

Usar Formateador HTML
Miniatura de Formateador HTMLMiniatura de Formateador HTML

Casos de uso

Cuándo usarla

  • Hacer HTML desordenado más legible
  • Revisar marcado copiado antes de reutilizarlo
  • Minimizar HTML antes de compartirlo
  • Formatear fragmentos HTML para colaborar

Capacidades

Qué puede hacer esta herramienta

  • Formatear y minimizar HTML
  • Cambiar el estilo de sangría
  • Copiar entrada y resultado
  • Alternar números de línea y ajuste

Guía

Cómo usar cada zona de la pantalla

Aprenda a usar cada zona de la pantalla, incluidos ajustes, entrada, vistas previas, resultados y guardado.

01 HOWTO

Zona de modo de formato y entrada de código

Elija el modo de formato en la barra superior y pegue en el editor izquierdo el código que desea formatear o comprimir. También puede limpiar o copiar la entrada.

Pantalla que muestra Zona de modo de formato y entrada de código en Formateador HTMLPantalla que muestra Zona de modo de formato y entrada de código en Formateador HTML

Qué puede hacer esta zona

  • Puede elegir el modo de formato
  • Puede introducir el código a procesar
  • Puede limpiar la entrada
  • Puede copiar la entrada original

Dónde usarla

01
Modo de formato

Cambie entre formato con sangría y salida comprimida.

Pantalla que muestra dónde usar Modo de formato en Formateador HTMLPantalla que muestra dónde usar Modo de formato en Formateador HTML
02
Entrada de código

Pegue en el editor izquierdo el código que desea formatear o comprimir.

Pantalla que muestra dónde usar Entrada de código en Formateador HTMLPantalla que muestra dónde usar Entrada de código en Formateador HTML
03
Limpiar entrada

Vacíe el editor y empiece con otro código.

Pantalla que muestra dónde usar Limpiar entrada en Formateador HTMLPantalla que muestra dónde usar Limpiar entrada en Formateador HTML
04
Copiar entrada

Copie el código original antes de procesarlo.

Pantalla que muestra dónde usar Copiar entrada en Formateador HTMLPantalla que muestra dónde usar Copiar entrada en Formateador HTML

02 HOWTO

Zona de formateo y compresión

Use el formateo cuando necesite código legible, o la compresión cuando necesite un resultado más corto para insertar o transferir. El modo seleccionado actualiza el resultado de la derecha.

Pantalla que muestra Zona de formateo y compresión en Formateador HTMLPantalla que muestra Zona de formateo y compresión en Formateador HTML

Qué puede hacer esta zona

  • Puede formatear código
  • Puede comprimir código
  • Puede revisar el resultado procesado
  • Puede editar la entrada y procesar de nuevo

Dónde usarla

01
Modo de formateo

Añada saltos de línea y sangría para revisar el código con facilidad.

Pantalla que muestra dónde usar Modo de formateo en Formateador HTMLPantalla que muestra dónde usar Modo de formateo en Formateador HTML
02
Modo de compresión

Quite espacios y saltos de línea innecesarios para obtener código más corto.

Pantalla que muestra dónde usar Modo de compresión en Formateador HTMLPantalla que muestra dónde usar Modo de compresión en Formateador HTML
03
Panel de resultado

Revise el resultado generado por el modo seleccionado.

Pantalla que muestra dónde usar Panel de resultado en Formateador HTMLPantalla que muestra dónde usar Panel de resultado en Formateador HTML
04
Revisar entrada

Vuelva al editor izquierdo si el resultado no es el esperado.

Pantalla que muestra dónde usar Revisar entrada en Formateador HTMLPantalla que muestra dónde usar Revisar entrada en Formateador HTML

03 HOWTO

Zona de revisión y copia del resultado

Revise el código formateado o comprimido en el panel derecho y cópielo cuando esté listo. Cambie entre salida formateada y comprimida según dónde vaya a usarla.

Pantalla que muestra Zona de revisión y copia del resultado en Formateador HTMLPantalla que muestra Zona de revisión y copia del resultado en Formateador HTML

Qué puede hacer esta zona

  • Puede revisar el código procesado
  • Puede copiar el resultado
  • Puede usar la salida formateada
  • Puede usar la salida comprimida

Dónde usarla

01
Revisar resultado

Compruebe si el código procesado coincide con lo esperado.

Pantalla que muestra dónde usar Revisar resultado en Formateador HTMLPantalla que muestra dónde usar Revisar resultado en Formateador HTML
02
Copiar resultado

Copie el código procesado en un editor, CMS o panel de administración.

Pantalla que muestra dónde usar Copiar resultado en Formateador HTMLPantalla que muestra dónde usar Copiar resultado en Formateador HTML
03
Usar resultado formateado

Use la salida legible para revisión o para compartir.

Pantalla que muestra dónde usar Usar resultado formateado en Formateador HTMLPantalla que muestra dónde usar Usar resultado formateado en Formateador HTML
04
Usar resultado comprimido

Use la salida compacta para insertar o transferir.

Pantalla que muestra dónde usar Usar resultado comprimido en Formateador HTMLPantalla que muestra dónde usar Usar resultado comprimido en Formateador HTML

04 HOWTO

Zona de reedición y reintento

Cuando el resultado no sea correcto, revise la entrada, el modo de formato y el destino de copia. También puede limpiar el editor y probar con otro código.

Pantalla que muestra Zona de reedición y reintento en Formateador HTMLPantalla que muestra Zona de reedición y reintento en Formateador HTML

Qué puede hacer esta zona

  • Puede editar el código de entrada
  • Puede limpiar y reintentar
  • Puede volver a elegir el modo
  • Puede revisar y copiar el resultado

Dónde usarla

01
Editar entrada

Corrija la sintaxis o el rango pegado antes de procesar de nuevo.

Pantalla que muestra dónde usar Editar entrada en Formateador HTMLPantalla que muestra dónde usar Editar entrada en Formateador HTML
02
Limpiar entrada

Quite la entrada actual y empiece con código nuevo.

Pantalla que muestra dónde usar Limpiar entrada en Formateador HTMLPantalla que muestra dónde usar Limpiar entrada en Formateador HTML
03
Elegir modo de nuevo

Cambie entre formatear y comprimir, y revise el resultado.

Pantalla que muestra dónde usar Elegir modo de nuevo en Formateador HTMLPantalla que muestra dónde usar Elegir modo de nuevo en Formateador HTML
04
Copiar resultado

Revise el resultado corregido antes de copiarlo.

Pantalla que muestra dónde usar Copiar resultado en Formateador HTMLPantalla que muestra dónde usar Copiar resultado en Formateador HTML

Notas

Notas

Los puntos importantes se agrupan junto con sus razones para que pueda decidir antes de usar la herramienta.

Qué conviene revisar

Elija el lenguaje de destino antes de procesar

El formateo y la minimización se ejecutan según las reglas del lenguaje seleccionado. Confirme primero si está trabajando con HTML, CSS o JavaScript.

Qué conviene revisar

Revise el resultado antes de minimizar

La minimización elimina muchos espacios y saltos de línea. Si la legibilidad importa, revise primero el resultado formateado y luego decida qué salida usar.

Nota

TypeScript, SCSS y lenguajes similares no están disponibles

Esta herramienta admite solo HTML, CSS y JavaScript. TypeScript, SCSS y JSX no están disponibles. Confirme el lenguaje de destino antes de usarla.

FAQ

Preguntas sobre Formateador HTML

Primero se resumen las preguntas que ayudan a decidir antes de usarla.

¿Puede formatear fragmentos HTML?

Sí. Puede formatear documentos HTML completos y fragmentos pequeños.

¿Puedo formatear CSS o JavaScript aquí?

Esta página es solo para HTML. Use el Formateador CSS para CSS.

¿La entrada se envía a un servidor?

No. El formateo y la minimización se ejecutan en el navegador.

Siguientes guías

Guías relacionadas

Las guías relacionadas se muestran a continuación para que pueda continuar sin perderse.

Cómo usar Formateador JSON

Referencia detallada por zonas para entrada JSON, formato, compresión, validación, revisión de resultado y copia.

Ver guía
Cómo usar Formateador JSON

Cómo usar Vista previa de Mermaid

Referencia detallada por zonas para entrada Mermaid, acciones de edición, vista previa, temas, salida y errores.

Ver guía
Cómo usar Vista previa de Mermaid

Cómo usar PlantUML Preview

Referencia detallada por zonas para entrada PlantUML, acciones de edición, vista previa, temas, salida y errores.

Ver guía
Cómo usar PlantUML Preview
Herramientas de imagenHerramientas de videoHerramientas de textoHerramientas de desarrolloHerramientas de diseñoHerramientas de generación