所有工具
HTML Preview
Preview HTML code
Preview HTML code 在您的浏览器中本地运行
About the
HTML 预览实时渲染 HTML 片段,这样您就可以看到它生成的内容,而无需保存文件并打开它。它适用于简短的片段:电子邮件模板、组件的标记、内容管理系统的片段,或者在将其粘贴到某处之前您想要查看的任何其他内容。编辑和预览之间的切换是即时的,这使得它成为调整标记的快速循环。
Where people use the
- 在发送测试之前检查电子邮件模板片段。
- 预览从内容管理系统粘贴的标记。
- 在将代码片段粘贴到拉取请求之前对其进行完整性检查。
- 测试表格或列表是否按您期望的方式呈现。
How to use the
- 1
粘贴您的标记
在编辑器中键入或粘贴 HTML 片段。完整的文档或只是一个片段都可以。
- 2
切换到预览
按“预览”进行渲染。标记被绘制到页面中,就像在浏览器中显示的那样。
- 3
切换回来并调整
按“编辑”返回到标记。更改会被保留,以便您可以迭代。
- 4
高兴的时候抄下来
在编辑器中选择标记并将其复制到您的项目中。
提示和最佳实践
- 如果您的片段依赖于此处不存在的样式表,请添加内联样式。
- 干净的渲染并不能证明标记有效;浏览器会掩盖错误。
- 请记住预览片段,而不是具有脚本行为的整个页面。
常见问题
它支持 CSS 和 JavaScript 吗?
样式标签和内联样式呈现。脚本呈现为标记,但这是片段的预览,因此将脚本行为视为不可靠。
为什么我的代码片段看起来与我的网站不同?
因为周围的样式表丢失了。此处的片段不会继承任何内容,因此任何依赖于站点 CSS 的内容都将看起来没有样式。
我可以加载外部图像或字体吗?
是的,如果它们可以公开访问,但周围页面自己的规则仍然不适用。
标记已上传吗?
不会。渲染发生在您的浏览器中,因此未发布的模板和内部内容会保留在您的设备上。
它验证 HTML 吗?
不,它会渲染你所提供的内容。浏览器会默默地修复一些错误,因此干净的渲染并不能证明标记是有效的。