HTML 在线预览

HTML在线预览 是什么？

HTML在线预览工具，左边写代码右边立刻出效果，改一个字符预览就刷新。它解决的是「不想为了看10行HTML专门开编辑器、存文件、再切浏览器」这种麻烦。比如你要给公司邮件签名加个表格，写了个<table border="1">，想确认3列宽度是否撑破600px，直接粘进来就能看到实际渲染，不用新建demo.html。做前端调CSS、验证正则、试flex布局、给学生演示标签效果，都适合。所有解析和渲染都在你浏览器里跑，代码不经过服务器。

使用步骤

1. 打开页面，左侧编辑区默认已有一段示例HTML，直接全选删除即可开始。
2. 输入代码，例如<div style="color:red">测试</div>，右侧预览区会立即显示红色文字。
3. 要加样式就在<head>里写<style>body{margin:0}</style>，或直接给标签加style属性。
4. 测试JavaScript可写<script>document.body.innerHTML='<h1>Hi</h1>'</script>，预览区同步执行。
5. 点「运行」或按快捷键强制刷新，确认alert、console.log等行为是否符合预期。
6. 调好后点复制或下载按钮，把代码存成.html文件，用浏览器打开验证最终效果。

对比：用它还是手工做？

常见问题

预览和真实浏览器有差别吗？

预览用的是你当前浏览器的渲染引擎，所以Chrome下看到的效果和Chrome打开本地文件基本一致。但iframe沙箱会限制部分能力，比如localStorage可能被禁用、跨域fetch会失败、window.open可能被拦截。涉及这些API时，建议把代码下载成.html文件用file://协议再测一遍。

能跑外部CSS和JS吗？

可以写<link rel="stylesheet" href="https://...">和<script src="https://..."></script>，但目标地址必须允许跨域且是HTTPS，否则会被浏览器拦截。本地相对路径如./style.css无法加载，因为预览环境没有文件系统。建议把外部依赖换成CDN绝对地址，或直接把代码内联进来。

代码长度有限制吗？

没有硬性字符上限，但超过约1MB后编辑器输入会明显卡顿，预览刷新延迟可能从几十毫秒涨到1秒以上。日常调试片段通常在200行以内，完全无压力。如果要测大段HTML，建议先精简到最小复现用例，定位问题后再回到完整文件。

为什么我的JS没执行？

常见原因有三个：一是<script>写在了</body>之后，DOM还没建好就执行；二是代码里有语法错误，打开浏览器F12控制台能看到具体行号；三是用了被沙箱禁止的API如document.cookie。把脚本移到</body>前，或包在window.onload=function(){}里，通常能解决。

预览会保存我的代码吗？

不会上传。整个解析、渲染、执行过程都在你本机浏览器内完成，服务器只返回一个静态页面。刷新或关闭标签页后编辑区内容会丢失，重要代码请先复制到本地文件。如果用了浏览器同步功能，那是浏览器厂商的行为，与本工具无关。

本工具在浏览器本地解析和渲染HTML，代码不上传服务器，断网后已打开的页面仍可继续编辑。预览基于当前浏览器的渲染引擎，与目标用户浏览器版本不同时可能有细微差异。沙箱会限制cookie、localStorage、跨域请求等能力，涉及这些功能请下载为.html文件用file://协议测试。