HTML 在线预览与运行
免费 HTML 在线预览与运行工具，粘贴完整 HTML 或代码片段即可查看网页效果。支持内嵌或独立编辑的 CSS、JavaScript，可导入本地 HTML 文件、格式化代码、切换手机和平板宽度、查看运行错误，并复制或下载合并后的 HTML。草稿自动保存在当前浏览器，无需注册。
HTML 在线预览适合做什么？
- 粘贴 AI 生成的 HTML 代码并预览网页
- 测试 CSS 样式和 JavaScript 按钮交互
- 查看和修改本地 HTML 文件
- 比较手机、平板和桌面的响应式布局
- 学习 HTML 标签并制作静态网页原型
主要功能
- 实时渲染预览
- 完整 HTML 与片段、独立 CSS / JS 编辑
- 一键运行、快捷键与代码格式化
- JavaScript 控制台与运行错误提示
- 浏览器本地草稿保存与恢复
- 本地文件导入与完整 HTML 下载
- 手机和平板宽度、放大预览
- 外部资源基础地址设置
HTML 在线预览怎么用？
把完整 HTML 文档或 <div>、<p> 等 HTML 片段粘贴到上方 HTML 编辑器，约 0.3 秒后即可看到运行结果。默认开启实时预览；需要连续编辑脚本时，可以先取消实时预览，再点击“运行代码”或按 Ctrl / ⌘ + Enter。手机上通过“编辑器”和“预览”按钮切换，切换前的输入会保留。
HTML 内的 <style> 和 <script> 可以直接运行，也可以分别切换到 CSS、JS 编辑区输入代码，不需要再包裹标签。独立 CSS 会添加到文档头部，独立 JavaScript 会在页面内容之后执行。复制和下载会把三个编辑区合并为一份完整 HTML，方便保存后继续修改。
预览本地 HTML 文件与 AI 生成的网页
点击“导入 HTML”选择不超过 5 MB 的 UTF-8 HTML、HTM 或 TXT 文件，即可在浏览器中查看和修改。导入会替换当前 HTML 并清空独立 CSS、JS；载入示例或清空也会替换内容，可以点击“撤销上次替换”恢复前一份代码。草稿自动保存在当前设备的浏览器中，刷新后可恢复；重要内容建议另行下载备份。
从 AI 对话复制的代码如果带有整段 Markdown 的 ```html 代码围栏，预览会自动去掉最外层围栏。若只粘贴 CSS、JavaScript、React JSX 或 Vue 单文件组件，不能直接得到完整网页；请放到对应编辑区，或先转换为浏览器可执行的 HTML。
HTML 预览空白、图片不显示或 JavaScript 没反应怎么办？
先确认代码已粘贴到 HTML 编辑区，并点击“运行代码”。出现脚本错误时，预览下方的“控制台 / 运行错误”会显示可捕获的错误；console.log、console.warn 和未处理的 Promise 错误也会在这里展示。浏览器通常会容错解析 HTML，因此控制台没有报错并不代表 HTML 完全符合规范，本工具不是 HTML 语法验证器。
本地文件旁边的图片、样式和脚本不会随单个 HTML 文件一起导入。请把资源改为可访问的完整 HTTPS 地址，或在“运行设置与外部资源”填写原网页目录的基础地址，例如 https://example.com/demo/。网络故障、CORS、混合内容或原网页的内容安全策略也可能阻止加载。
预览在隔离区域内运行，默认启用 JavaScript，可在设置中关闭。访问父页面、Cookie 或 localStorage 等操作可能受限制；PHP、服务器接口以及需要 npm 构建的 Vue / React 项目不能仅靠粘贴源码运行。
在线测试手机布局、格式化与导出 HTML
预览工具栏提供自适应、768px 平板和 375px 手机宽度，适合比较 CSS 媒体查询下的布局。固定宽度超过面板时，可在预览内横向滚动；点击“放大预览”可获得更大的工作空间。这里改变的是视口宽度，不模拟真实手机的浏览器、触摸或性能。
“格式化”整理当前 HTML、CSS 或 JS 编辑区的缩进；“复制完整 HTML”和“下载 HTML”则合并当前代码，下载文件名为 preview.html。处理和文件读取在浏览器本地完成，不会把代码提交给本站服务器；代码中引用的外部资源和主动发起的请求仍会访问相应网站。
使用示例
快速预览 HTML 片段
输入：<h1>Hello, HTML!</h1><p>This is my first webpage.</p>
结果：预览区立即显示标题和段落；可继续在 CSS 编辑区修改颜色、字体和间距。
测试 JavaScript 点击事件
输入：从上方示例中选择“JavaScript 交互”，在预览内点击按钮。
结果：按钮累计点击次数，展开控制台可查看对应日志。HTML、CSS、JS 均可单独编辑。
检查响应式布局
输入：选择“响应式布局”示例，再切换 768px 平板宽度和 375px 手机宽度。
结果：示例在较宽视口显示三列卡片，手机宽度变为单列，便于检查媒体查询。
保存修改后的网页
输入：导入一个 HTML 文件，修改内容后点击“下载 HTML”。
结果：下载包含当前 HTML、独立 CSS 和独立 JavaScript 的 preview.html；外部图片和依赖不会被打包。
常见问题
如何在线预览 HTML 代码？
把完整 HTML 或 HTML 片段粘贴到 HTML 编辑区即可实时查看结果，也可以关闭实时预览后点击运行代码。CSS 和 JavaScript 可以写在 HTML 内，或分别放在 CSS、JS 编辑区。无需安装软件或注册账户。
支持 HTML、CSS、JavaScript 一起在线运行吗？
支持。HTML 内的 style、script 标签会随文档运行；独立 CSS 放入文档头部，独立 JS 在正文之后执行。默认启用 JavaScript，可在运行设置中关闭。复制和下载会合并三个编辑区的代码。
为什么粘贴 HTML 后预览空白？
先确认输入的是 HTML 或 HTML 片段，而不是 JSX、Vue 单文件组件或经过实体转义的 <div> 文本。点击运行代码，并检查控制台中的脚本错误、资源是否能访问及 JavaScript 是否启用。需要后端或构建工具的项目不能直接运行。
HTML 文件里的图片、CSS 或 JS 为什么加载不了？
导入单个 HTML 不会自动读取同目录的其他文件。请使用可访问的完整 HTTPS 资源地址，或填写原网页目录的资源基础地址。跨域限制、混合内容、网络状态和文档自身的安全策略仍可能影响资源加载。
可以预览电脑里的 HTML 文件吗？
可以。点击导入 HTML，选择不超过 5 MB 的 UTF-8 HTML、HTM 或 TXT 文件。文件在本地浏览器中读取。导入会替换当前 HTML 并清空独立 CSS、JS，可用撤销上次替换恢复原内容。
刷新页面后 HTML 代码还在吗？
浏览器允许本地存储时，HTML、CSS、JS 和资源基础地址会自动保存并在刷新后恢复。清除浏览器数据、使用隐私模式或更换设备可能导致草稿不可用；建议用下载 HTML 保存重要代码。
如何在线预览手机网页效果？
点击预览工具栏的手机按钮，把预览宽度切换为 375px；平板按钮为 768px。可以结合响应式示例观察媒体查询。此功能只调整视口宽度，不模拟手机系统和真实设备性能。
代码会上传服务器吗？支持 PHP 或 React 吗？
本站在浏览器中处理输入、读取文件和保存草稿，不主动上传代码。HTML 引用的外部资源或脚本请求仍会访问目标网站。预览支持浏览器可执行的 HTML、CSS、JS，不运行 PHP 后端或需要构建的 React JSX、Vue 项目。
控制台能检查所有 HTML 错误吗？
不能。控制台显示可捕获的 JavaScript 错误、日志、未处理的 Promise 错误及部分资源错误，每次运行最多 100 条。它不检查所有 HTML 标签规范，外部跨域脚本或文档自身的安全策略也可能限制错误信息。
同类工具
- CSS文本换行CSS 文本换行在线测试工具支持输入自定义文本、调整容器宽度，并实时比较 overflow-wrap、word-break、white-space、text-overflow、h…
- Flexbox游乐场Flexbox 布局工具通过交互式界面学习 Flexbox 布局，可视化调整属性和查看效果。适合学习和理解 Flexbox 布局原理。
- 文本/HTML转换文本与 HTML 转换工具可以把普通文本快速转换为带段落和换行的 HTML，也可以从 HTML 中提取便于阅读和复制的纯文本。适合整理网页内容、邮件模板和富文本编辑器数据。
- Markdown编辑器Markdown 编辑器是一款强大的在线 Markdown 编辑和预览工具，支持实时预览、语法高亮、导出 HTML 等功能。适合撰写文档、博客文章和技术说明。
- SVG转JPEG/PNGSVG 转栅格图像工具将 SVG 矢量图渲染为 JPEG、PNG 等栅格图像。适合转换图片格式。
- Meta 标签生成器Meta 标签生成器帮助你为页面整理 SEO、Open Graph、Twitter Card 和结构化数据片段。它适合工具站、内容站和营销页，能够减少手写元标签时的遗漏与格式错误。