HTML 实时预览工具

HTML 编辑器

在下方实时编辑代码，右侧视图将即时渲染更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preview</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      background: #f8fafc;
    }
    .card {
      padding: 40px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      text-align: center;
    }
    h1 { color: #2563eb; }
    button {
      background: #2563eb;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello</h1>
    <button onclick="alert('OK')">Button</button>
  </div>
</body>
</html>

实时预览视图

常见问题

这个 HTML 实时预览工具能做什么？

它提供了一个双栏实时编辑预览环境，左侧编写 HTML、CSS 和 JavaScript 代码，右侧即时显示渲染结果。你还可以一键进入网页全屏模式模拟真实浏览，或在新标签页中独立打开预览页面，方便调试和分享。

支持哪些前端技术？

支持完整的 HTML5、CSS3 和 JavaScript（包括 ES6+）。通过 `<iframe>` 的 `sandbox` 属性进行安全隔离，同时允许脚本执行、弹窗和表单提交，满足绝大多数前端调试场景。

如何进入网页全屏模式？

点击预览区右上角的“网页全屏”按钮，预览区域会立即占满整个浏览器窗口，模拟真实网页浏览体验。按键盘上的 `Esc` 键即可退出全屏。

为什么点击“新标签页打开”没有反应？

这通常是因为浏览器阻止了弹出窗口。请检查浏览器地址栏或设置，允许当前站点弹出新窗口，或者手动允许该操作后再次尝试。

预览的 iframe 有哪些安全限制？

iframe 使用了 `sandbox="allow-scripts allow-modals allow-popups allow-forms"` 属性，允许执行脚本、弹窗、弹出窗口和表单提交，但禁止顶级导航和自动下载等潜在危险行为，保证安全的同时提供充分的交互能力。

可以预览包含外部资源（如 CDN 库）的页面吗？

可以。你可以在 HTML 中通过 `<script>` 或 `<link>` 标签引用外部 CDN 资源（如 Bootstrap、Vue、React 等），预览时会正常加载并渲染。

输入代码后预览没有更新怎么办？

本工具采用实时渲染，每次输入都会自动刷新预览。如果未更新，请检查代码是否有语法错误（浏览器控制台可查看报错），或尝试点击“清空”后重新粘贴有效代码。

代码会发送到服务器吗？

不会。所有代码处理和渲染都在你的浏览器本地完成，编辑内容不会上传到任何服务器，保障代码隐私和安全。