HTML 查看器

编写或粘贴 HTML，即时查看浏览器渲染效果。

布局:脚本处于沙盒中，无法运行。

HTML 代码

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

预览

关于本工具

HTML 查看器让您编写或粘贴 HTML 代码，立即看到浏览器中的渲染效果。预览显示在禁用脚本的沙盒 iframe 中，可安全预览来自不受信任来源的 HTML。

支持完整 HTML 文档（含 head、内联 CSS 和 style 块）及 HTML 片段。所有处理在浏览器中本地进行。

使用方法

在左侧代码编辑器中输入或粘贴 HTML。
单击渲染按钮更新预览。
切换到上下分栏布局以获得更大的预览区域。
在编辑器中使用 Tab 键缩进行。

使用场景

前端开发者快速测试 HTML 片段、邮件开发者预览 HTML 邮件模板、学习 HTML 的学生实验标签并即时查看效果、代码审查者直观验证渲染输出。

常见问题

为什么脚本被禁用？ — 预览 iframe 使用 sandbox="allow-same-origin" 属性阻止 JavaScript 执行，让您可以安全预览未知来源的 HTML。
可以预览 CSS 吗？ — 可以。在 HTML 中包含 style 标签或使用内联样式。来自其他域的外部样式表可能被 CSP 阻止。
支持完整 HTML 文档吗？ — 支持。您可以粘贴包含 DOCTYPE、head 和 body 标签的完整 HTML 文档。