HTML代码在线预览
预览设置
把 .html / .htm 文件拖到这里，或点击选择文件
0字符
0行数
0 B体积
预览在带 sandbox 的独立窗口中渲染，顶层跳转与新开窗口已被拦截；相对路径的图片、CSS、JS 无法加载，请改用 https 绝对地址。代码全部在本机处理，不会上传服务器。
HTML 代码
预览效果
这个工具解决什么问题
HTML代码在线预览把一段网页源码直接变成可以看的页面。很多时候拿到的只是一小段 HTML：邮件模板、落地页片段、AI 生成的组件、同事发来的代码块，为了看一眼效果还要新建文件、保存、再用浏览器打开，流程很啰嗦。这里把这几步合成一个页面：左边编辑器打字或粘贴，右边窗口同步重绘，写在同一文件里的 style 样式和 script 脚本一样会执行。编辑器基于 CodeMirror 的 htmlmixed 模式，标签、属性、内联样式和脚本分别着色，行号与括号匹配都在。
渲染走的是 iframe 的 srcdoc，并开启 sandbox 隔离，预览里的脚本碰不到工具页面本身，也读不到本站的存储。预览窗口宽度可以在自适应、375、414、768、1024、1280 之间切换，用来快速核对媒体查询断点的表现。改完之后可以格式化重排缩进、压缩掉标签间空白、复制、下载成 .html 文件，或者在新标签页里完整打开。
使用方式
- 把 HTML 代码粘进左边的编辑器，或把本地 .html 文件拖进上传区（也可点击选择文件）。
- 保持「边改边渲染」勾选，停手约 0.6 秒预览自动刷新；想手动控制就取消勾选，改完点「渲染预览」。
- 用预览区上方的宽度按钮在手机、平板、桌面尺寸间切换，核对布局与断点。
- 代码排版乱时点「格式化」重新缩进；要把代码塞进模板字符串时点「压缩」去掉多余空白。
- 满意后「下载 HTML」存成文件，或「新标签页打开」查看不受 sandbox 限制的完整页面。
常见问题
内联的 CSS 和 JavaScript 会生效吗？
会。预览用完整文档加载，style 标签里的样式、script 标签里的脚本以及 DOM 操作都会照常执行，效果和把代码存成 html 文件双击打开基本一致。
为什么我代码里的图片显示不出来？
写成 ./img/a.png 这类相对路径的资源加载不到，因为预览文档没有真实的所在目录。换成 https 开头的绝对地址，或者把小图转成 data URI 内联进来即可。外部 CDN 的脚本和样式表只要对方允许被嵌入就能正常加载。
预览里的链接点了没反应是什么原因？
sandbox 只放开了脚本执行、弹窗提示和表单交互，顶层跳转和新开窗口被拦住，防止预览代码影响当前页面。需要验证跳转行为时请用「新标签页打开」。
切换到 375px 就等于真机效果了吗？
只能当作断点的粗略核对。这里改的是预览容器宽度，设备像素密度、字体渲染、滚动条和触摸交互都跟真机不同，上线前仍建议用开发者工具的设备模拟或真实手机再看一遍。
代码会被上传到服务器吗？
不会。上传的文件用浏览器的 FileReader 在本机读成文本，渲染、格式化、压缩、下载也全部在前端完成，整个过程没有把正文发往服务端，关闭标签页内容即清除。
只写了半截代码、没有 html 和 body 标签能预览吗？
可以。浏览器会按容错规则自动补全文档结构，所以单独一段 div 或 table 也能看到效果。不过为了中文不出现乱码，建议在开头保留 meta charset 声明。
