HTML 演练场
实时 HTML/CSS/JS 演练场，通过沙盒 iframe 即时预览效果，自动保存到 localStorage，完全在客户端运行。
停止输入 300 毫秒后，预览区会自动更新。
预览
使用方法
- 1 在任意一个编辑框中修改代码——HTML、CSS 或 JS 均可。停止输入约 300 毫秒后，预览区会自动更新。
- 2 保存代码片段，将你的工作存入 localStorage，方便下次访问时继续使用。
- 3 点击“重置”可重新加载示例代码。
为什么使用此工具
- HTML、CSS、JS 三个编辑框实时联动，统一渲染到同一个预览 iframe 中。
- 通过 localStorage 保存代码片段——关闭标签页再回来，代码依然完好无损。
- 预览 iframe 处于沙盒环境中（仅允许 allow-scripts）——JS 仍可正常运行，但无法访问本站点的 origin。
- 完全在客户端运行——每次按键都不会与服务器产生往返请求。
常见问题
我可以引入外部的第三方库吗？
可以——只需在 HTML 编辑框中添加 <code class="font-mono text-xs"><script src="https://…"></code> 标签，下次预览重建时 iframe 就会加载它们。
预览用的 iframe 是沙盒化的吗？
是的——我们设置了 <code class="font-mono text-xs">sandbox="allow-scripts"</code>，并有意去掉了 <code class="font-mono text-xs">allow-same-origin</code>，因此预览区域无法读取本页面或其存储内容。
我的工作内容保存在哪里？
只有在你点击“保存”后，内容才会被保存到浏览器的 <code class="font-mono text-xs">localStorage</code> 中，不会有任何数据发送到服务器。
什么是 HTML 演练场？
HTML Playground 是一款可以同时编辑 HTML、CSS 和 JavaScript 的工具，并在沙盒 iframe 中实时渲染结果。它会自动把你的工作保存到浏览器的 localStorage 中，让代码在不同会话之间得以保留。由于完全在客户端运行，一切都只发生在浏览器本地，不会有任何内容上传到服务器，为快速搭建和测试前端代码片段提供了一个私密的空间。
功能特性
三个编辑面板
分别编辑 HTML、CSS 和 JS;它们会被合并成一个实时文档。
实时预览
编辑内容在短暂的防抖延迟后重新渲染到 iframe 中,无需刷新页面。
保存代码片段
将当前的 HTML/CSS/JS 保存到浏览器本地存储中,以便日后使用。
100% 隐私安全
在沙盒化的 iframe 中于客户端运行——不会上传任何内容。
示例
Input
HTML: <h1>Hi</h1> · CSS: h1{color:red} · JS: console.log("ready")Output
Live iframe preview: a red "Hi" heading (JS runs in the sandbox)常见使用场景
-
1
原型设计一个组件
构思一个简单的 HTML/CSS/JS 想法,并立即查看渲染效果。
-
2
测试一段 CSS 代码
无需搭建项目即可尝试布局或动画效果。
-
3
教授前端基础知识
演示 HTML、CSS 和 JS 如何在一个实时视图中组合在一起。
Zerethon 的 HTML 演练场会在你输入时,将独立的 HTML、CSS 和 JavaScript 面板中的内容实时渲染到一个沙盒化(sandboxed)的 iframe 中,全部过程都在你的浏览器内完成。它会对编辑操作进行防抖(debounce)处理,组装成一个完整的文档,并且可以将你的代码片段保存到本地存储中。不会上传任何内容——预览完全在你的设备上运行。
- 分类
- 开发者
- 价格
- 免费
- 隐私
- 基于浏览器
- 注册
- 无需
参考资料
- <iframe> — MDN Web Docs — MDN
- HTML Standard — The iframe element — WHATWG
隐私
除非另有说明，否则你的数据永远不会离开浏览器。HTML 演练场 完全在客户端运行 — 无需上传服务器，不记录日志，不追踪你输入的内容。
相关工具
在 Zerethon Social 上创作、分享与成长
免费注册。赚取积分，收集成就，与全球创作者建立联系。