HTML 在线运行 - 在浏览器编辑代码即时渲染

HTML 在线运行编辑器

HTML 在线运行让你编写 HTML、CSS 和 JavaScript，并在浏览器里即时看到结果渲染出来。它是一个轻量的代码演练场——就像迷你版 CodePen——无需注册、无需安装、也不用在本地搭建环境。

无论你是在学习 Web 开发，还是要快速验证一个想法，都能获得飞快的反馈：在编辑器里输入，预览面板就会自动更新。三个独立标签让你的 HTML、CSS 和 JavaScript 井井有条，内置控制台直接显示日志和错误，无需打开浏览器开发者工具。

隐私优先设计：所有编辑、预览渲染和控制台输出都完全在你的浏览器中进行。你的代码绝不会被上传或存储到任何服务器。

如何使用 HTML 在线运行

选择标签并编写代码

在编辑器顶部选择 HTML、CSS 或 JS 标签，然后输入代码。语法高亮、自动闭合括号与标签以及括号匹配都已默认开启。

观看实时预览

停止输入片刻后，预览面板会自动重新渲染。切换标签来搭建结构、设置样式、添加交互——结果都会随之更新。

从模板开始（可选）

打开模板菜单加载起始模板：空白、Hello World、Flexbox 布局或 CSS 动画。选中其一会用可运行的示例代码填满三个编辑器标签。

查看、放大或下载

打开控制台读取你的 console.log 输出，切换布局，拖动分隔条调整大小，把预览放大到全屏，或点击下载 HTML保存独立文件。

功能特性

三标签代码编辑器

由 CodeMirror 驱动的独立 HTML、CSS 和 JavaScript 标签，每种语言都有语法高亮。

即时实时预览

你的代码在沙箱 iframe 中渲染，并在你停止输入片刻后自动刷新。

内置控制台

捕获 log、warn、error 和 info 输出，以及运行时错误和未处理的 promise 拒绝——无需开发者工具。

智能编辑

自动闭合括号与标签、括号匹配以及两个空格的软缩进，让你的代码保持整洁。

可调整面板

拖动编辑器和预览之间的分隔条，给任一面板更多空间，范围限定在 20% 到 80% 之间。

布局切换

一键在左右并排和上下堆叠布局之间切换——在较窄屏幕上很实用。

全屏预览

把预览放大到铺满整个屏幕，获得无干扰的视野，然后按 Escape 或关闭即可返回。

HTML 导出

下载一个完整的独立 HTML 文件，CSS 和 JavaScript 内联嵌入其中——没有任何依赖。

起始模板

从空白、Hello World、Flexbox 布局或 CSS 关键帧动画开始，省去样板代码。

隐私与本地

一切都在你的浏览器中运行，内置暗色主题。不会上传或保存到任何服务器。

常见问题

如何在线预览 HTML，无需安装任何东西？

只需在编辑器里输入你的 HTML，预览面板就会立即渲染出来。没有任何东西要下载或注册：打开页面、编写代码，就能在浏览器里看到结果。

可以编辑 HTML、CSS 和 JavaScript 并实时看到效果吗？

可以。编辑器有独立的 HTML、CSS 和 JS 标签。在 HTML 中搭建结构，在 CSS 中设置样式，在 JavaScript 中添加行为——预览会把三者合并，并随你输入而更新。

预览会在我输入时实时更新吗？

会。输入短暂停顿后，预览会自动重新渲染。这段简短的防抖延迟让预览保持流畅，而不是每敲一个键就闪烁一次。

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

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

可以使用 Bootstrap 或 jQuery 这类外部库吗？

可以。在 HTML 标签里添加一个指向 CDN URL 的 <link> 或 <script> 标签，该库就会在预览 iframe 中加载。

为什么我的 JavaScript 不起作用？

预览运行在一个带有 allow-scripts 和 allow-modals 权限的沙箱 iframe 中。大多数 JavaScript 都能正常工作，但某些需要额外权限的浏览器 API（如剪贴板或地理定位）可能受到限制。打开内置控制台即可查看任何错误消息。

可以保存我的成果吗？

使用下载 HTML按钮，把你的代码导出为单个 preview.html 文件，CSS 放在 <style> 标签里，JavaScript 放在 <script> 标签里。在任何浏览器中重新打开它，或之后把代码粘贴回编辑器。

编辑器能在手机等移动设备上使用吗？

可以。在较小的屏幕上，布局会切换为上下堆叠视图，分隔条也支持触摸，因此你可以在手机和平板上拖动来调整编辑器和预览的大小。