👁️ HTML 预览

关于 HTML 预览

这个实时预览编辑器完全在你的浏览器中运行。在三个输入框中分别输入 HTML、CSS 和 JavaScript，点击运行即可在 iframe 中看到合并后的渲染结果。整个过程不会上传任何数据到服务器——预览通过 JavaScript 在你的设备上本地构建。

预览是如何构建的

点击运行时，工具会把你的三段输入合并为一个 HTML 文档：CSS 被包裹在头部的 <style> 标签中，JavaScript 被包裹在 body 末尾的 <script> 标签中，HTML 则放在 body 内。合并后的文档通过 srcdoc 写入 iframe，在隔离的沙箱中渲染。

如何使用编辑器

1. 在 HTML 框中输入你的 HTML 标记。
2. 在 CSS 框中添加样式。
3. 在 JavaScript 框中添加脚本。
4. 点击运行，在下方预览区渲染合并后的结果。
5. 点击清空重置三个输入框和预览。

常见问题

能使用外部库吗？ 可以。你可以在 HTML 框中添加 <script src="..."> 或 <link> 标签来加载外部资源。

为什么我的 JavaScript 没有执行？ 请确保 JS 语法正确无错误。本工具不显示 iframe 的控制台错误，复杂脚本建议在浏览器开发者工具中调试。

我的代码会被上传吗？ 不会，所有处理都在本地浏览器的隔离 iframe 中完成。