Toolbox Hub
所有工具

HTML Preview

Preview HTML code

Preview HTML code 在您的浏览器中本地运行

About the

HTML 预览实时渲染 HTML 片段,这样您就可以看到它生成的内容,而无需保存文件并打开它。它适用于简短的片段:电子邮件模板、组件的标记、内容管理系统的片段,或者在将其粘贴到某处之前您想要查看的任何其他内容。编辑和预览之间的切换是即时的,这使得它成为调整标记的快速循环。

Where people use the

  • 在发送测试之前检查电子邮件模板片段。
  • 预览从内容管理系统粘贴的标记。
  • 在将代码片段粘贴到拉取请求之前对其进行完整性检查。
  • 测试表格或列表是否按您期望的方式呈现。

How to use the

  1. 1

    粘贴您的标记

    在编辑器中键入或粘贴 HTML 片段。完整的文档或只是一个片段都可以。

  2. 2

    切换到预览

    按“预览”进行渲染。标记被绘制到页面中,就像在浏览器中显示的那样。

  3. 3

    切换回来并调整

    按“编辑”返回到标记。更改会被保留,以便您可以迭代。

  4. 4

    高兴的时候抄下来

    在编辑器中选择标记并将其复制到您的项目中。

提示和最佳实践

  • 如果您的片段依赖于此处不存在的样式表,请添加内联样式。
  • 干净的渲染并不能证明标记有效;浏览器会掩盖错误。
  • 请记住预览片段,而不是具有脚本行为的整个页面。

常见问题

它支持 CSS 和 JavaScript 吗?

样式标签和内联样式呈现。脚本呈现为标记,但这是片段的预览,因此将脚本行为视为不可靠。

为什么我的代码片段看起来与我的网站不同?

因为周围的样式表丢失了。此处的片段不会继承任何内容,因此任何依赖于站点 CSS 的内容都将看起来没有样式。

我可以加载外部图像或字体吗?

是的,如果它们可以公开访问,但周围页面自己的规则仍然不适用。

标记已上传吗?

不会。渲染发生在您的浏览器中,因此未发布的模板和内部内容会保留在您的设备上。

它验证 HTML 吗?

不,它会渲染你所提供的内容。浏览器会默默地修复一些错误,因此干净的渲染并不能证明标记是有效的。

相关工具