HTML 实时预览是什么？

HTML 实时预览是一个交互式代码游乐场，让你编写 HTML、CSS 和 JavaScript，并立即看到结果。可以把它看作是浏览器中的轻量级 CodePen — 无需注册。

无论你是学习网页开发的初学者，还是想快速原型化想法的经验丰富的开发者，这个工具都能为你提供快速的反馈循环，无需设置本地环境。

完美用于：快速原型设计、学习网页开发、测试代码片段和分享实时示例 — 无需任何设置或安装。

主要特点

三标签页编辑器

HTML、CSS 和 JavaScript 分别在独立标签页中，由 CodeMirror 提供完整的语法高亮，提供专业的编码体验。

实时预览

你的代码在沙箱 iframe 中实时渲染，采用智能防抖技术保持性能流畅。

内置控制台

查看 console.log、warn、error 和 info 输出，无需打开浏览器开发者工具 — 直接在界面中调试。

下载你的作品

导出完整的独立 HTML 文件，包含内联的 CSS 和 JS — 随处可用。

如何使用

编写代码

选择标签页

在编辑器面板顶部的 HTML、CSS 或 JS 标签页之间选择，开始用你喜欢的语言编码。

输入你的代码

在编辑器中编写代码。右侧的预览面板会在短暂延迟后自动更新，为你提供即时的视觉反馈。

切换并构建

在标签页之间切换，用 HTML 构建结构，用 CSS 添加样式，用 JavaScript 增加交互 — 所有操作都在一个无缝的工作流中完成。

使用模板

点击工具栏中的模板按钮选择启动模板，快速启动你的项目。选择以下选项：

空白

从空白开始，没有预写代码 — 完美用于从零开始构建。

Hello World

一个基础页面，包含按钮和点击计数器，演示 HTML、CSS 和 JavaScript 的交互。

Flexbox 布局

使用 Flexbox 的响应式卡片网格 — 学习现代 CSS 布局技术。

CSS 动画

带有关键帧的加载动画，演示平滑的 CSS 过渡和效果。

注意：选择模板会替换所有三个编辑器中的当前代码。如果你想保存代码，请先下载。

调整布局

调整大小 — 拖动编辑器和预览之间的手柄，根据需要放大或缩小任一面板
切换布局 — 点击布局按钮在并排（水平）和堆叠（垂直）视图之间切换
全屏预览 — 点击展开按钮以全屏查看预览。按 Escape 或点击关闭按钮返回

使用控制台

点击 控制台 按钮（终端图标）打开控制台面板。JavaScript 中的任何 console.log()、console.warn()、console.error() 或 console.info() 调用都会显示在这里，带有相应的图标和样式。

无控制台

传统调试

打开浏览器开发者工具
导航到控制台标签页
在窗口之间切换
失去对代码的关注

使用内置控制台

简化的工作流

一键访问控制台
内联查看输出
保持在编辑器中
用垃圾桶图标清除

下载你的代码

点击下载按钮将你的作品保存为单个 preview.html 文件。导出的文件在 body 中包含你的 HTML，在 <style> 标签中包含 CSS，在 <script> 标签中包含 JavaScript — 随时可以在任何浏览器中打开。

专业提示：下载的文件是完全自包含的，没有外部依赖。你可以分享它、托管它，或将其用作更大项目的起点。

功能

带语法高亮的代码编辑器

编辑器由 CodeMirror 驱动，为 HTML、CSS 和 JavaScript 提供语法高亮。它还包括自动闭合括号和标签、括号匹配和正确的缩进（使用软制表符）。

语法高亮

HTML、CSS 和 JavaScript 的彩色编码语法使代码更易于阅读和理解。

自动闭合

在你输入时自动闭合括号、引号和 HTML 标签，加快编码速度。

智能缩进

使用软制表符的正确缩进保持代码整洁和格式正确。

实时预览

你的代码在沙箱 iframe 中运行，并在你输入时自动更新。预览支持完整的 HTML 文档，包含嵌入的 CSS 和 JavaScript，为你提供代码在真实浏览器中的准确表现。

沙箱 iframe 保证安全
输入时自动更新
支持完整 HTML 文档
嵌入 CSS 和 JavaScript
真实浏览器渲染

内置控制台

无需打开浏览器的开发者工具。内置控制台面板捕获 JavaScript 的所有控制台输出 — 包括 log、warn、error 和 info 消息。控制台按钮上的徽章显示已记录的消息数量。

控制台方法	图标	用途
`console.log()`	信息	常规调试输出
`console.warn()`	警告	潜在问题或弃用警告
`console.error()`	错误	运行时错误和异常
`console.info()`	信息	信息消息

可调整大小的面板

拖动编辑器和预览之间的分隔线，为你需要的任一面板分配更多空间。调整器支持水平和垂直布局，并限制在 20% 到 80% 之间，以保持两个面板都可用。

最小编辑器宽度 20%

最大编辑器宽度 80%

布局切换

只需单击一下，即可在水平布局（编辑器左侧、预览右侧）和垂直布局（编辑器顶部、预览底部）之间切换。垂直布局适合较窄的屏幕或当你想要更宽的预览时。

水平

宽屏幕的并排布局

垂直

窄屏幕的堆叠布局

全屏预览

将预览扩展到填满整个屏幕，获得无干扰的工作视图。按 Escape 或点击右上角的关闭按钮退出。

键盘快捷键：按 Escape 快速退出全屏模式并返回编辑器。

HTML 导出

将你的创作下载为独立的 HTML 文件。导出的文档包含正确的 doctype、meta 标签，以及内联的 CSS 和 JavaScript — 无需外部依赖。

导出的 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" c>
    <title>HTML Live Preview</title>
    <style>
        /* Your CSS here */
    </style>
</head>
<body>
    <!-- Your HTML here -->
    
    <script>
        // Your JavaScript here
    </script>
</body>
</html>

启动模板

使用内置模板快速开始，这些模板演示常见的模式：Hello World 页面、Flexbox 卡片布局和 CSS 关键帧动画。每个模板都会在所有三个编辑器标签页中填充可工作的示例代码。

预写的可工作代码示例
通过检查真实实现来学习
修改模板以满足你的需求
通过示例理解最佳实践

常见问题

我的代码会被发送到服务器吗？

不会。所有代码编辑、预览渲染和控制台输出都完全在你的浏览器中进行。没有任何内容被上传或存储在任何服务器上。

隐私有保障：你的代码保留在你的设备上。这个工具加载后完全可以离线工作。

我可以使用 Bootstrap 或 jQuery 等外部库吗？

可以。在 HTML 标签页中添加指向 CDN URL 的 <link> 或 <script> 标签，该库将在预览 iframe 中加载。

示例：从 CDN 加载 Bootstrap

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

为什么我的 JavaScript 不工作？

预览在具有 allow-scripts 和 allow-modals 权限的沙箱 iframe 中运行。大多数 JavaScript 正常工作，但某些需要额外权限的浏览器 API 可能受到限制。

检查内置控制台中的错误消息
验证你的语法是否正确
确保外部库正确加载
某些 API（剪贴板、地理定位）在沙箱 iframe 中可能受限

常见问题：需要用户权限的 API（如剪贴板访问或地理定位）在沙箱预览环境中可能无法工作。

我可以保存我的作品吗？

使用下载按钮将你的代码导出为独立的 HTML 文件。你可以在任何浏览器中重新打开此文件，或稍后将代码粘贴回编辑器。

点击下载保存为 preview.html
文件包含所有 HTML、CSS 和 JavaScript
无需外部依赖
在任何浏览器或文本编辑器中打开
随时将代码复制回编辑器

编辑器支持移动设备吗？

支持。在较小的屏幕上，布局会自动切换到垂直堆叠视图。调整器支持触摸事件，可在移动和平板设备上进行拖动调整大小。

设备类型	布局	功能
桌面	水平（默认）	完整功能、拖动调整大小
平板	水平或垂直	触摸启用的调整大小
手机	垂直（自动）	触摸优化的界面

控制台面板有什么用？

控制台面板捕获 JavaScript 代码中 console.log()、console.warn()、console.error() 和 console.info() 的输出。它还捕获运行时错误和未处理的 Promise 拒绝。

这让你可以在不打开浏览器开发者工具的情况下进行调试，保持工作流的流畅性和对代码的专注。

在一个地方查看所有控制台输出
彩色编码的消息类型（log、warn、error、info）
徽章计数器显示总消息数
用垃圾桶图标清除所有消息
自动捕获运行时错误