本文目录
什么是 HTML 实时预览？
HTML 实时预览是一款浏览器内的代码编辑器，可实时渲染你的 HTML、CSS 和 JavaScript。你每输入一个字符，输出面板都会即时刷新，让你无需在编辑器和浏览器标签页之间来回切换即可获得直观的视觉反馈。
预览运行在一个带有严格安全限制的沙箱 iframe 中。这意味着你的代码在隔离环境中执行——它无法访问父页面、Cookie 或本地存储。你可以在完全不影响宿主应用的前提下，拥有一个安全的实验环境。
实时预览的工作原理
编辑器会将你的 HTML、CSS 和 JavaScript 合并为单个文档，并注入到沙箱 iframe 中。更新经过防抖处理，从而在保持预览响应迅速的同时避免拖慢浏览器。
- 沙箱 iframe——预览仅以 sandbox="allow-scripts" 运行，屏蔽对父页面、Cookie、表单和导航的访问，实现完全隔离
- 独立代码标签页——在专属面板中分别编写 HTML、CSS 和 JavaScript，各自采用适配语法的编辑方式，渲染时自动合并
- 防抖更新——在停止输入片刻后才应用更改，让预览更流畅，避免每次按键都触发不断的重新渲染
免费试用 —— 无需注册
试用 HTML 实时预览 →何时使用 HTML 实时预览
只要你需要对 HTML 和 CSS 快速获得视觉反馈，又不想搭建完整的开发环境，实时预览都是理想之选。
- 快速原型设计——无需搭建构建工具或开发服务器，即可即时测试布局思路、配色方案和组件设计
- 学习 HTML 和 CSS——初学者可以立即看到每个标签和属性的效果，让学习的反馈闭环大大缩短
- 邮件模板测试——由于邮件客户端对 CSS 的支持有限，可先预览带内联样式的 HTML 邮件布局，在发送前检查渲染效果
常见问题
预览安全吗？我的代码能访问父页面吗？
预览是完全沙箱化的。该 iframe 使用 sandbox="allow-scripts" 且不带 allow-same-origin，这意味着你的代码可以运行 JavaScript，但无法访问父页面的 DOM、Cookie、localStorage 或会话数据。这与 CodePen、JSFiddle 等平台采用的安全模型完全一致。
为什么沙箱中不包含 allow-same-origin？
将 allow-same-origin 与 allow-scripts 一同启用，会让被预览的代码彻底逃出沙箱——它可能访问父页面的 Cookie、修改 DOM 或读取敏感数据。省略该选项可确保完全隔离。代价是预览内部无法使用 localStorage 和 sessionStorage，但这是一个刻意为之的安全取舍。
我能在预览中加载外部 CSS 或 JavaScript 库吗？
可以。你可以在 HTML 面板中添加引用 CDN 地址的 link 和 script 标签（例如 Bootstrap、Tailwind、jQuery）。沙箱 iframe 允许发起网络请求以加载外部资源。只需记住，外部脚本同样受沙箱限制约束——它们也无法访问父页面。