HTML在线运行

边写 HTML、CSS、JavaScript 边看效果的在线编辑器。console.log 和报错都会显示在下方的控制台里。

功能

用标签页切换编写 HTML、CSS、JavaScript，停止输入 0.4 秒后自动刷新预览（也可以手动运行）
console.log、console.error 和运行时错误显示在预览下方的控制台（错误标红）
预览宽度可在手机 375px、平板 768px、全宽之间切换，检查响应式布局
可下载为单个 HTML 文件。代码自动保存在浏览器里，4KB 以内还能通过链接分享

适用场景

快速试一段代码

不用搭环境，马上验证 CSS 写法或 JavaScript 的运行效果。

学习和上课

免注册，打开链接就能用。写完马上看到效果，适合刚入门 HTML 的同学。

检查手机端效果

切换 375px、768px、全宽，当场确认布局有没有错乱。

分享代码片段

导出为可直接运行的单个 HTML 文件发给别人，代码短的话直接发链接。

隐私说明

你写的代码只保存在浏览器内（localStorage），不会上传服务器。预览在不授予同源权限的 sandbox iframe 中运行，无法访问本页面的数据。只有点击“复制分享链接”时，分享链接（包含代码）才会发送到短链接服务。

常见问题

写的代码保存在哪里？

只保存在你当前浏览器的 localStorage 里，不会发送到服务器，所以换设备或换浏览器就看不到了；清除浏览器数据后代码也会消失。想长期保留，请用“下载 HTML”存成文件，4KB 以内的代码也可以用“复制分享链接”生成链接。

能引入 jQuery 等外部库吗？

可以加载 cdnjs.cloudflare.com 和 cdn.jsdelivr.net 上的脚本。本页面的安全策略（CSP）同样作用于预览，其他域名的脚本会被拦截。图片、网络字体和样式表只要是 https 就能从外部加载。另外，在中国大陆部分网络环境下这两个 CDN 可能访问不稳定，加载失败时库不会生效。

预览安全吗？

预览运行在只允许 allow-scripts 的 sandbox iframe 中。由于没有授予同源权限（allow-same-origin），预览里的脚本读不到本页面的 Cookie 和 localStorage。控制台的内容只是通过 postMessage 接收后显示出来。

可以关闭自动刷新吗？

取消勾选“自动刷新”后，输入时不再重新渲染。写耗时运算或可能死循环的代码时，建议关掉自动刷新，需要时再点“运行”。万一预览卡死，也只是 iframe 里卡住，关掉自动刷新、改好代码就能恢复。

代码

HTML CSS JS

自动刷新

模板

代码只保存在本浏览器中，不会上传到服务器。

预览

预览宽度

控制台

预览运行在带 sandbox 的 iframe 中，与本页面相互隔离。可以加载外部图片和网络字体，外部脚本只能从 cdnjs.cloudflare.com 和 cdn.jsdelivr.net 加载。