HTML Preview
Preview HTML code
Preview HTML code Executa localmente no seu navegador
About the
A visualização de HTML renderiza um fragmento de HTML ao vivo para que você possa ver o que ele produz sem salvar um arquivo e abri-lo. Ele se destina a trechos curtos: um modelo de e-mail, uma marcação de componente, um trecho de um sistema de gerenciamento de conteúdo ou qualquer outra coisa que você queira observar antes de colá-lo em algum lugar. A alternância entre edição e visualização é instantânea, o que o torna um loop rápido para ajustar a marcação.
Where people use the
- Verificando um fragmento de modelo de e-mail antes de enviar um teste.
- Visualização da marcação colada de um sistema de gerenciamento de conteúdo.
- Verificar a integridade de um snippet antes de colá-lo em uma solicitação pull.
- Testar se uma tabela ou lista é renderizada da maneira esperada.
How to use the
- 1
Cole sua marcação
Digite ou cole um fragmento HTML no editor. Um documento completo ou apenas um trecho funcionam.
- 2
Mudar para visualização
Pressione Preview para renderizá-lo. A marcação é desenhada na página como apareceria em um navegador.
- 3
Volte e ajuste
Pressione Editar para retornar à marcação. As alterações são mantidas, para que você possa iterar.
- 4
Copie quando estiver feliz
Selecione a marcação no editor e copie-a para o seu projeto.
Dicas e práticas recomendadas
- Adicione estilos embutidos se o seu fragmento depender de uma folha de estilo que não esteja aqui.
- Uma renderização limpa não é prova de marcação válida; os navegadores ocultam os erros.
- Lembre-se da visualização para trechos, não para páginas inteiras com comportamento de script.
Perguntas frequentes
Suporta CSS e JavaScript?
Tags de estilo e estilos embutidos são renderizados. Os scripts são renderizados como marcação, mas esta é uma visualização de um fragmento, portanto, trate o comportamento do script como não confiável.
Por que meu snippet parece diferente do meu site?
Porque a folha de estilo circundante está faltando. Um fragmento não herda nada aqui, então qualquer coisa que dependa do CSS do seu site parecerá sem estilo.
Posso carregar imagens ou fontes externas?
Sim, se forem acessíveis publicamente, embora as próprias regras da página circundante ainda não se apliquem.
A marcação foi carregada?
Não. A renderização ocorre no seu navegador, portanto, os modelos não publicados e o conteúdo interno permanecem no seu dispositivo.
Valida o HTML?
Não. Ele renderiza o que você dá. Um navegador corrigirá silenciosamente alguns erros, portanto, uma renderização limpa não prova que a marcação é válida.