很多人需要测试一段 HTML/CSS/JS 代码，或者想快速把自己写好的网页效果分享给别人，这时候“HTML 在线编辑器”（Online Code Editor / Playground）就是最好的工具。
不用安装 VS Code，不用配本地环境，打开浏览器就能写、能跑、能看效果。
这篇文章将带你了解 HTML 在线编辑器的核心用法，以及如何把你在上面写好的代码导出并真正发布上线。
HTML 在线编辑器能做什么？
HTML 在线编辑器通常分为两类：
- 代码游乐场（Playground）：左边写代码，右边出效果。适合测试片段。
- 代表工具：CodePen, JSFiddle, JSBin。
- 可视化在线建站（Web Builder）：拖拽组件或编辑模板。适合做完整网页。
- 代表工具：HTMLPage Builder, Wix, Webflow。
本文主要讨论第一类：面向代码的在线运行环境。它们能帮你：
- 实时预览：改一个颜色，右边马上变。
- 引用外部库：一键引入 Bootstrap, jQuery, Vue.js，无需下载。
- 分享代码：生成一个 URL，发给同事或贴在博客里。
3 种典型使用场景
1. 学习与测试代码片段
新手学 HTML 时，最怕为了写个 <h1>Hello</h1> 还要新建文件、保存、浏览器刷新。
在线编辑器让你专注于代码本身。
2. 调试 Bug 与求助
当你的网页样式乱了，与其截图问人，不如把那段代码粘贴到在线编辑器里，复现问题，然后把链接发给大神。
3. 快速制作单页 Demo
做一个倒计时页面、一个计算器工具，写完直接把编辑器的“全屏预览”链接发给用户使用。
核心功能详解：从代码到预览
大多数在线编辑器的界面布局都差不多，通常分为三个小窗口（HTML / CSS / JS）和一个大预览窗口（Result）。
1. HTML 窗口：只写 <body> 里的东西
这是新手最容易犯错的地方。
在 CodePen 或 JSFiddle 里，你不需要写 <!DOCTYPE html>, <html>, <head>, <body>。
编辑器默认已经帮你“包裹”好了这些结构。
你只需要直接写：
<div class="card">
<h1>我的卡片</h1>
</div>
2. CSS 窗口：无需 <style> 标签
直接写 CSS 规则，不要在外面包 <style>...</style>。
同时，大多数编辑器支持 SCSS/LESS 预处理，点击设置齿轮可以开启。
3. JS 窗口：无需 <script> 标签
直接写 JavaScript 逻辑。记得如果要操作 DOM 元素，代码会在页面加载后自动运行，不需要手动写 window.onload（除非设置里改了执行时机）。
4. 引入外部库（External Resources）
想用 Bootstrap 或 Vue？不要在 HTML 里写 <link> 或 <script src="...">。
去编辑器的 Settings -> External Resources（设置 -> 外部资源），在搜索框里搜 "bootstrap"，点击添加即可。
如何导出源码与部署
你在在线编辑器里写得很开心，但怎么把它变成一个真正的 HTML 文件部署到自己的服务器或 GitHub Pages？
方法一：使用“Export / Download”功能
大多数工具（如 CodePen）右下角有 Export 按钮，选择 Export .zip。
下载后解压，你会得到一个包含 index.html, style.css, script.js 的标准文件夹。
这个 index.html 此时已经补全了 <html><head><body> 结构，可以直接双击运行。
方法二：手动拼接（通用法）
如果工具不支持导出，或者如果你用的是简易版编辑器，可以手动复制：
- 新建
index.html。 - 写好基础骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的网页</title> <!-- 如果用了外部库，记得在这里加 CDN 链接 --> <style> /* 把 CSS 窗口的代码粘贴到这里 */ </style> </head> <body> <!-- 把 HTML 窗口的代码粘贴到这里 --> <script> // 把 JS 窗口的代码粘贴到这里 </script> </body> </html> - 保存，上传到服务器。
常见坑与避坑指南
1. 本地图片无法显示
你在 HTML 里写 <img src="my-cat.jpg">，在在线编辑器里是显示不出来的。
因为编辑器在云端，找不到你电脑桌面的 my-cat.jpg。
解决办法：使用图床（如 Imgur, SM.MS）上传图片，获取 https://... 开头的链接，填入 src。
2. 跨域问题 (CORS)
如果你在 JS 里用 fetch() 请求另一个网站的 API，可能会报错 CORS policy。
这是因为在线编辑器的域名（如 cdpn.io）和你请求的 API 域名不同。
解决办法：确保 API 支持跨域，或者使用支持 JSONP 的接口。
3. 本地存储 (localStorage)
虽然可以在线测试 localStorage，但要注意，同一个编辑器平台下的不同“代码片段（Pen）”可能共享同一个域名。你在这个 Pen 存的数据，可能会被那个 Pen 读取或覆盖（取决于工具的隔离机制）。
常见问题 (FAQ)
HTML 在线编辑器可以写后端代码吗？
绝大多数（CodePen, JSBin）只支持前端（HTML/CSS/JS）。 如果需要写 Node.js, PHP, Python，需要用更高级的云 IDE，如 Replit, CodeSandbox, Glitch。
在线编辑器写的代码可以商用吗？
取决于你使用的平台协议。 例如 CodePen 上，公开（Public） 的代码通常默认是 MIT 协议（开源，可商用但需署名）。 如果你是 私有（Private） 代码（通常付费），版权完全归你。
怎么把在线运行的效果嵌入到我的博客里？
找到编辑器的 Embed（嵌入）按钮。
它会给你一段 <iframe> 代码。把这段代码复制到你的 WordPress 或 Markdown 文章里，读者就能直接在你的文章里看到并运行代码了。
可以在手机上写代码吗？
理论上可以，但体验极差。手机键盘打 < > { } ; 非常痛苦。
如果非要用手机，建议使用专门的 App（如 JSany）或者在大屏 iPad 上配合外接键盘使用。
为什么我的 JS 代码没反应？
- 检查有没有打开 Console（控制台）看报错。
- 检查是不是忘了引入 jQuery 却用了
$。 - 检查 HTML 里的元素 ID 和 JS 里获取的 ID 是否一致。
导出源码后乱码怎么办？
检查你的 HTML 文件 <head> 里有没有加上 <meta charset="UTF-8">。如果没有，浏览器可能会用错误的编码解析中文。
不想写代码，只想做网页？ 试试我们的 HTMLPage 可视化编辑器，无需理会标签和语法，直接拖拽生成专业网页，且支持一键导出源码。