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 演练场 是 Zerethon Tools 提供的免费 开发者 工具。实时 HTML/CSS/JS 演练场，通过沙盒 iframe 即时预览效果，自动保存到 localStorage，完全在客户端运行。. 完全在浏览器中运行 — 无需注册，无需上传。
- 分类
- 开发者
- 价格
- 免费
- 隐私
- 基于浏览器
- 注册
- 无需
隐私
除非另有说明，否则你的数据永远不会离开浏览器。HTML 演练场 完全在客户端运行 — 无需上传服务器，不记录日志，不追踪你输入的内容。
相关工具
在 Zerethon Social 上创作、分享与成长
免费注册。赚取积分，收集成就，与全球创作者建立联系。