Toolbox Hub
Todas las herramientas

HTML Preview

Preview HTML code

Preview HTML code Se ejecuta localmente en su navegador

About the

La vista previa de HTML muestra un fragmento de HTML en vivo para que pueda ver lo que produce sin guardar un archivo y abrirlo. Está pensado para fragmentos cortos: una plantilla de correo electrónico, el marcado de un componente, un fragmento de un sistema de gestión de contenidos o cualquier otra cosa que desee observar antes de pegarlo en algún lugar. El cambio entre edición y vista previa es instantáneo, lo que lo convierte en un bucle rápido para modificar el marcado.

Where people use the

  • Verificar un fragmento de plantilla de correo electrónico antes de enviar una prueba.
  • Vista previa del marcado pegado de un sistema de gestión de contenidos.
  • Verificar la cordura de un fragmento antes de pegarlo en una solicitud de extracción.
  • Probar si una tabla o una lista se muestra como espera.

How to use the

  1. 1

    Pega tu marcado

    Escriba o pegue un fragmento HTML en el editor. Un documento completo o solo un fragmento funcionan.

  2. 2

    Cambiar a vista previa

    Presione Vista previa para renderizarlo. El marcado se dibuja en la página tal como aparecería en un navegador.

  3. 3

    Retroceder y ajustar

    Presione Editar para regresar a la marca. Los cambios se mantienen para que pueda iterarlos.

  4. 4

    Cópialo cuando estés feliz.

    Seleccione el marcado en el editor y cópielo en su proyecto.

Consejos y mejores prácticas

  • Agregue estilos en línea si su fragmento depende de una hoja de estilo que no está aquí.
  • Un renderizado limpio no es prueba de un marcado válido; Los navegadores ocultan los errores.
  • Tenga en cuenta la vista previa para fragmentos, no para páginas enteras con comportamiento de script.

Preguntas frecuentes

¿Es compatible con CSS y JavaScript?

Se representan etiquetas de estilo y estilos en línea. Los scripts se representan como marcas, pero se trata de una vista previa de un fragmento, por lo que debe tratar el comportamiento del script como poco confiable.

¿Por qué mi fragmento se ve diferente al de mi sitio?

Porque falta la hoja de estilo circundante. Un fragmento no hereda nada aquí, por lo que cualquier cosa que dependa del CSS de su sitio se verá sin estilo.

¿Puedo cargar imágenes o fuentes externas?

Sí, si son accesibles públicamente, aunque las reglas propias de la página circundante aún no se aplicarán.

¿Se carga el marcado?

No. La renderización se realiza en su navegador, por lo que las plantillas no publicadas y el contenido interno permanecen en su dispositivo.

¿Valida el HTML?

No. Representa lo que le das. Un navegador corregirá silenciosamente algunos errores, por lo que una representación limpia no prueba que el marcado sea válido.

Herramientas relacionadas