🖼 HTML 粘贴预览

粘贴 HTML 即在右侧沙箱 iframe 中即时渲染。适合 HTML 邮件原型、Outlook 兼容性检查、设备宽度切换。

完全免费无需注册浏览器内完成 5 种语言深色模式

🔒 隐私和安全

・在本地沙箱 iframe (sandbox=allow-same-origin) 中渲染
・script 标签不执行(沙箱禁用)
・HTML 文本绝不发送到任何服务器
・无外部库 · 纯 JS

📝 HTML 输入

📁 文件

0 字符

👁 预览

背景:

📖 常见的坑

把粘贴的 HTML 即时渲染到沙箱 iframe 中，可切换宽度与背景进行确认。<script> 不会执行，HTML 也不会被上传。你在这里看到的，仅仅是「现代浏览器会怎么画」——若用途是 HTML 邮件，请一开始就把这份预览和收件箱里的效果当成两回事，因为各邮件客户端都有自己的渲染路径，并会在显示前改写收到的 HTML。

情形	会发生什么	怎么处理
这里显示正常，偏偏 Outlook 里就散架	Windows 桌面版 Outlook 使用 Word 的渲染引擎而非浏览器引擎来绘制 HTML。结果就是 `float`、`position`、`max-width`、`background-image`、圆角与 box-shadow 被整体忽略。用 `<div>` 堆出来的现代布局几乎必定塌成单列，而这里的预览绝无可能重现这一点。全球仍有相当比例的邮件是经由这条路径打开的。	邮件用 HTML 请用嵌套的 `<table>` 来搭，宽度用 `width` 属性而非 CSS 指定——看着像 2005 年的写法，但至今仍是唯一可靠的做法。整体宽度的事实标准是 600px。若确实需要背景图，请在 `<!--[if mso]>` 条件注释里补上 VML。最终确认务必用真实客户端——发给自己，然后在 Outlook、Gmail、iOS Mail 三处打开，几乎就能抓出所有致命崩坏。
CSS 类不起作用，或者整个 style 标签消失	许多邮件客户端会把收到的 HTML 里整个 `<head>` 连同你的 `<style>` 一起剥掉。它们只把 body 嵌进自家页面显示，因此 head 里的内容一概不留。Gmail 会保留一部分，但行为因客户端与版本而异，「网页版生效、手机 App 不生效」是再常见不过的结果。本预览会正常解析 `<style>`，所以这种差异在这里根本看不出来。	请把所有样式内联成 `style=` 属性。手写不现实，所以请在构建流程中加入 Premailer 或 juice 之类的内联器——它会把你写在 `<style>` 里的 CSS 展开到各元素上。但要注意媒体查询与伪类无法内联，因此响应式不应靠按宽度分支来实现，而应从一开始就做成「任何宽度都不会坏」的结构：单列、图片 `width:100%`、正文字号 14px 以上。
图片显示不出来	如果预览里什么都不显示，几乎总是相对路径的问题：`./img/logo.png` 在 iframe 内没有可供解析的基准页面。而在真实邮件里，即便改成绝对 URL，最初通常也仍然不显示——Gmail 与 Outlook 默认屏蔽外部图片，直到收件人点击「显示图片」才加载。也就是说，许多收件人第一眼看到的，是缺了图片的那版邮件。	在预览里请使用绝对 URL 或 data URI。在生产环境中，「图片被屏蔽时是否依然说得通」实际上是一项设计要求：务必写 `alt`，并在 logo 与按钮背后铺上颜色相近的 `bgcolor`，让没有图片时文字仍可读。把整封正文做成一张图片是最糟的选择——被屏蔽后内容彻底消失，还会推高垃圾邮件评分。用 data URI 内嵌也不是出路，因为 Gmail 并不支持。

宽度预设只是改变视口宽度，并不模拟真实设备。iOS Mail 与 Gmail 的深色模式会自动反转收到的 HTML 的颜色——所以按「白底深色字」设计的邮件，到了收件箱会变成暗底浅字，而且只有 logo 周围留下一块白方块（用透明 PNG 可以避免）。安全方面：sandbox 能拦住脚本，但并不能让粘贴进来的 HTML 变得安全。仅靠 CSS 就足以做出乱真的登录界面，而且 <a href> 依然有效。预览来源不明的 HTML 时，请不要点击其中的链接——既然目的是确认外观，就没有理由去访问那些目标地址。

📖 使用方法

1

粘贴 HTML

在左侧粘贴或加载 .html 文件。
2

选择设备宽度

选择桌面 / 平板 / Email 600 / 手机 375。
3

切换背景

切换白 / 暗 / 棋盘。邮件通常使用白色。

❓ 常见问题

script 标签会执行吗?

不会。沙箱阻止脚本运行。

能预览 HTML 邮件吗?

可以。使用 Email 600 + 白色背景。最终在真实客户端测试。

HTML 会上传服务器吗?

不会。在本地 iframe 中渲染。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。