HTML 在线预览和在线编辑器

粘贴 HTML、打开文件，或者直接修改示例。预览会随输入实时更新，并在沙箱中运行，代码不会影响本页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>活动门票</title>
  <style>
    body { font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f4f8; margin: 0; padding: 32px; }
    .ticket { max-width: 340px; margin: 0 auto; background: #fff; border-radius: 16px;
              padding: 24px; box-shadow: 0 8px 24px rgba(20, 20, 60, .08); }
    .tag { color: #6d4aff; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
    h1 { font-size: 26px; margin: 6px 0 4px; color: #16142b; }
    p { color: #55546a; margin: 0 0 16px; }
    .row { display: flex; justify-content: space-between; border-top: 1px dashed #d7d6e3;
           padding-top: 14px; font-size: 14px; color: #3c3b4f; }
    button { margin-top: 18px; width: 100%; border: 0; border-radius: 10px; padding: 12px;
             background: #6d4aff; color: #fff; font-size: 15px; cursor: pointer; }
    @media (min-width: 700px) { .ticket { max-width: 520px; } h1 { font-size: 32px; } }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="tag">前端技术沙龙</div>
    <h1>CSS Grid 实战</h1>
    <p>周四 19:00，2 号会议室。请自带笔记本电脑。</p>
    <div class="row"><span>座位</span><strong>B-14</strong></div>
    <button onclick="this.textContent = '已添加到日历'">添加到日历</button>
  </div>
</body>
</html>

HTML 在线预览怎么用

把代码粘贴到编辑器，或点击 打开文件 从设备加载 .html 文件。
在右侧查看预览。在手机（390px）、平板（768px）和桌面之间切换，检查每种宽度下的布局。
改到满意后，点击 下载 .html 保存结果。

处理大型页面，或者只应运行一次的脚本时，可以关闭 输入时自动更新；这样只有点击“运行”时预览才会刷新。

常见用途

粘贴进项目前先检查代码片段。 来自 AI 聊天工具、论坛回答或同事的代码，先在这里渲染一遍，不碰你的代码仓库。
在手机上查看 HTML 附件。 邮件客户端经常把 .html 文件显示成源代码。在这里打开文件，就能看到渲染后的页面。
测试响应式布局。 “手机”和“平板”按钮会把预览调整到真实设备的宽度，媒体查询和 Tailwind 断点会像在设备上一样切换。

沙箱允许什么

预览是一个只带 sandbox="allow-scripts" 的 iframe，没有其他权限。你的 HTML、CSS 和 JavaScript 都会运行，Google Fonts 或 Tailwind CDN 脚本等外部资源也能正常加载。这个框架的源是不透明的（opaque origin），因此读不到 img2html.com 的 Cookie 和存储，不能提交表单、打开弹窗，也不能让当前标签页跳转。console.log 的输出会出现在浏览器的开发者工具里。

HTML 在线预览常见问题

我的 HTML 会被上传吗？

不会。代码只留在当前浏览器标签页里。预览是用本地字符串（iframe 的 srcdoc）生成的，不会发送给 IMG2HTML 或任何其他人。

预览里的 JavaScript 会运行吗？

会，在一个拥有唯一、不透明源的沙箱 iframe 里运行。脚本可以修改预览内容，但读不到本页面、它的 Cookie 和存储。表单、弹窗和顶层页面跳转都会被拦截。

为什么我的图片或 CSS 文件加载不出来？

粘贴代码或只打开单个文件时，images/logo.png、style.css 这类相对路径没有可以参照的位置。请使用绝对地址（https://...），或者把 CSS 写进 <style> 标签。

可以打开电脑或手机上的 .html 文件吗？

可以。点击“打开文件”，选择 .html 或 .htm 文件，它会加载到编辑器和预览里。这也是在手机上查看 HTML 邮件附件最快的方法。

怎么保存修改？

“下载 .html”会把当前代码保存为文件。两次访问之间不会保存任何内容，所以关闭标签页前记得下载。