HTML 预览 / 代码沙盒，免费
在下方编辑器中编写 HTML、CSS 和 JavaScript，并在预览面板中即时查看结果。
工作原理
- 粘贴或输入 HTML：在编辑器中输入您的 HTML 代码 · 完整文档、片段、模板或邮件 HTML。
- 实时查看渲染：预览面板会实时显示浏览器对 HTML 的渲染效果。
- 快速迭代：在紧密循环中编辑和预览，无需切换标签页或保存文件。
为什么使用 HTML 预览？
在为模板、邮件、组件或静态页面编写 HTML 时，您需要持续看到代码的渲染反馈。在浏览器中打开文件并手动刷新会打断工作流。此 HTML 预览工具在您输入的同时即时渲染 HTML，在同一窗口中提供可视化实时预览 · 非常适合快速迭代模板、调试布局问题，以及在发送前测试 HTML 邮件。
功能特性
- 实时渲染：预览会随着您的输入即时更新，无延迟、无需手动刷新。
- 完整 HTML 支持：可渲染含 <head>、<style> 和 <body> 的完整文档，也支持简单的 HTML 片段。
- 隔离沙盒：预览运行在沙盒 iframe 中，防止脚本影响页面。
- 响应式预览：调整预览面板大小，以在不同视口宽度下测试 HTML 渲染。
- 错误显示：记录 HTML 错误，帮助识别损坏的标签和无效的标记。
常见问题
可以预览 HTML 邮件吗？
可以。粘贴您的 HTML 邮件，包括内联样式和表格布局。预览效果与邮件客户端的渲染相同。请注意，外部字体和某些 CSS 功能在真实邮件客户端中可能有不同表现。
外部 CSS 和 JavaScript 能用吗？
由于沙盒预览的 CORS 限制，通过 <link> 标签加载的外部样式表可能无法加载。JavaScript 执行受沙盒限制。为获得最佳效果，请使用内联 CSS。来自允许跨域访问的 CDN 的外部资源会正常加载。
可以用它测试响应式设计吗？
可以。拖动预览面板宽度以模拟不同屏幕尺寸，或使用视口预设（手机、平板、电脑）测试您的响应式断点。
实时预览如何工作:iframe srcdoc
<iframe> 元素是在 HTML 4.0(1997 年 12 月)引入的,用于将一个文档嵌入到另一个文档中。二十年来,填充 iframe 的唯一方法是通过 src 属性指向 URL。允许你以字符串形式内联传递 iframe 的 HTML 的 srcdoc 属性,是在 HTML5(W3C 推荐,2014 年 10 月)中添加的,现在所有现代浏览器都支持。srcdoc 使基于浏览器的 HTML 预览工具无需服务器上传成为可能:你写 HTML,工具将其包装在 <iframe srcdoc="..."> 中,浏览器在隔离的上下文中渲染它,没有任何东西跨越网络。
sandbox 属性和同源陷阱
<iframe sandbox> 是在 HTML5 中引入的,用于对每个 iframe 应用安全策略。没有值时应用最严格的沙箱:同源限制(被视为唯一源)、脚本禁用、表单禁用、顶级导航禁用、插件禁用、指针锁定禁用、弹窗禁用、媒体自动播放禁用。你通过添加 token 选择性地重新启用:sandbox="allow-scripts"、allow-forms、allow-popups、allow-top-navigation 等。每个 token 开启一个特定的能力。
永远不要使用的组合是同时 sandbox="allow-scripts allow-same-origin":这允许 JavaScript 调用 document.domain 并回到父窗口,完全击败沙箱。当你设置两者时,浏览器会在 DevTools 中警告。这个预览工具设置 allow-scripts 并明确不设置 allow-same-origin,因此用户的 JS 运行,但无法读取或写入父页面的 DOM、cookies、localStorage、IndexedDB 或 service-worker 缓存。
Content Security Policy,第二道防线
另一个独立但相关的防御是 Content-Security-Policy,在 W3C CSP Level 1(2012 年 11 月候选推荐)中引入的 HTTP 响应头。CSP Level 3 是当前标准。预览工具的关键指令:frame-src(可以加载哪些 iframe)和 script-src(可以运行哪些内联/外部脚本)。即使恶意 payload 逃脱了沙箱,主机页面的 CSP 仍然适用,并禁止大多数渗透路径。深度防御:沙箱隔离 iframe 的代码,主机的 CSP 限制如果 iframe 以某种方式影响了主机页面,主机页面可以做什么。
电子邮件客户端 HTML 是自己的世界
渲染现代浏览器 HTML 的预览不渲染电子邮件 HTML。主要的电子邮件客户端使用非常不同的引擎:Gmail 网页版使用基于 WebKit 的渲染器,带有类剥离和有限的 <style> 标签支持(2016 年添加)。Apple Mail / iOS Mail 使用 WebKit,最宽容的渲染器。Outlook 桌面版(2007 至 2019)通过 Microsoft Word 渲染引擎渲染 HTML 邮件:不支持 <style> 块,不支持 flex/grid,不支持定位元素,不支持动画;背景图像需要 VML 条件注释。这个 Outlook 怪癖是电子邮件开发中最大的问题。Outlook 365 网页版是现代 WebKit。2023-2024 年推出的「新 Outlook」使用 Edge WebView2。要获得真正的电子邮件客户端预览,请使用付费服务,如 Litmus 或 Email on Acid。
要测试的响应式断点
CSS 媒体查询断点约定可以追溯到 Ethan Marcotte 2010 年 5 月在 A List Apart 发表的「Responsive Web Design」文章。两个主导框架选择了不同的截止点:
- Bootstrap 5 断点(自版本 4,2016 年 10 月):
576px / 768px / 992px / 1200px / 1400px用于 sm / md / lg / xl / xxl。 - Tailwind CSS 断点:
640px / 768px / 1024px / 1280px / 1536px用于 sm / md / lg / xl / 2xl。 - 标准设备宽度:iPhone SE 375×667、iPhone 14/15 390×844、iPad 768×1024、iPad Air 820×1180、桌面 1280×800 / 1440×900 / 1920×1080、4K 3840×2160。
HTML 的标准谱系
您的预览正在渲染的标准的快速参考:HTML 2.0(RFC 1866,1995 年 11 月),Tim Berners-Lee 的第一个官方规范,建立了基本的标签集。HTML 4.01(W3C 推荐,1999 年 12 月)添加了 <script>、<style>、<table>、frames。XHTML 1.0(W3C 推荐,2000 年 1 月)尝试了严格的 XML 序列化,到 2010 年大多数被放弃。HTML5(W3C 推荐,2014 年 10 月)添加了语义元素(<article>、<section>、<nav>)、canvas、video/audio、web storage。2019 年 5 月,WHATWG 从 W3C 接管了管理权,HTML 现在在 html.spec.whatwg.org 作为 Living Standard 维护,持续更新。
常见使用场景
- 电子邮件模板原型设计(知道 iframe 渲染不会匹配 Outlook)。
- 快速 HTML / CSS 草稿本,当你不想创建 CodePen 账户时。
- 构建演示配方用于博客文章或文档。
- 教授 HTML 基础给学生,带有即时视觉反馈。
- JS 算法可视化,结合 HTML/CSS 结构和小型 JS 脚本。
- 测试表单行为,无需启动服务器。
- 可访问性实验,测试
aria-*属性、角色模型、Tab 顺序。
常见错误
- 试图从父页面读取 iframe 的内容。设置
sandbox后,跨域限制会阻止它。iframe 可以postMessage输出,但父页面无法进入。 - 粘贴针对
body的 CSS,然后惊讶地发现工具自己的 body 样式未受影响。iframe 是一个独立的文档,有自己的 DOM。 - 被 CSP 阻止的外部资源。一个
<img src="https://example.com/x.png">可能在你的预览中加载良好,但当你将相同代码复制到锁定 CSP 的生产站点时被阻止。 - 忘记
DOMContentLoaded在 iframe 中触发,而不是父页面。iframe 内的脚本看到自己的document,而不是工具的。 - 在沙箱工具中同时设置
allow-scripts和allow-same-origin,完全击败了目的。浏览器在 DevTools 中警告此组合。
更多常见问题
为什么我的 localStorage 在预览中不起作用?
localStorage 和 sessionStorage 需要在 sandbox 属性中有 allow-same-origin。由于将其与 allow-scripts 组合会击败沙箱,因此此预览按设计阻止存储。你的代码将在第一次 localStorage.setItem 时抛出 SecurityError。要测试依赖存储的代码,请在真实源上运行它(例如,本地开发服务器)。
预览支持哪个 JavaScript 版本?
你的浏览器支持的任何版本。iframe 运行与父页面相同的 JS 引擎,因此 Chrome 用户获得 V8,Firefox 用户获得 SpiderMonkey,Safari 用户获得 JavaScriptCore。现代功能(可选链接、顶级 await、类、async/await、ES2024 语法)如果你的浏览器支持,就可以工作。对于针对旧浏览器的测试,粘贴 Babel 或 swc 的转译输出。
我可以加载外部脚本和样式表吗?
对于大多数公共 CDN 是的。<script src="https://cdn.jsdelivr.net/..."> 和 <link href="https://cdn.tailwindcss.com" rel="stylesheet"> 通常工作,因为这些 CDN 设置了宽松的 CORS 头。需要凭据或源锁定的资源将失败。浏览器 DevTools 中的 Network 面板会准确显示哪些资源加载了,哪些被阻止了。
这与 CodePen / JSFiddle / StackBlitz 有何不同?
那些是具有保存/共享/fork/协作功能的完整代码托管服务,需要账户。这个工具是一个单页草稿本:没有账户,没有保存,没有共享,没有分析。粘贴、预览、迭代、关闭标签页。对于你想要保留或共享的东西,CodePen 仍然是更好的选择。
我的代码会上传到任何地方吗?
不会。你粘贴的 HTML / CSS / JS 在同一页面上被包装在 <iframe srcdoc="..."> 中,并在浏览器中的沙箱化唯一源中渲染。没有网络调用携带你的内容。你的 HTML 引用的外部资源(图像、脚本、样式表)由你的浏览器以与任何网页相同的方式获取,但源代码本身永远不会离开页面。