HTML 实时预览

怎么用

1. 把 HTML 粘贴到左侧 —— 带 head 的完整文档，或只带 style 块的片段都行。
2. 点渲染；也可以什么都不做，停止输入片刻后预览会自动刷新。
3. 切换视口宽度：375、768、1024 或全宽，看响应式规则真正生效。
4. 状态栏会显示粘贴内容的字节数和上一次渲染耗时。
5. 点清空同时清掉源码和画面。

画面用的是没有脚本权限的沙箱 iframe，所以粘贴的标记不能执行代码、不能开窗，也不能把外层页面导航走。

常见用法

• 验证媒体查询 —— 贴一份样式表，切到 375 px，确认移动分支真的触发了。
• 粘贴前先过一眼 —— 片段渲染出来是什么样，看一眼比读源码猜要准。
• 不启开发服务器就能测布局 —— 一张卡片、一个网格、一个表单，不用起项目就能看。
• 安全地看别人的标记 —— 在沙箱里渲染来源不明的 HTML，不会碰到你自己的页面环境。

常见问题

问：为什么我的 JavaScript 没执行？ 答：沙箱刻意不给脚本权限，这正是「可以预览不是你写的标记」的前提。CSS、CSS 动画和表单控件照常工作。

问：媒体查询真的会响应宽度切换吗？ 答：会。切换的是 iframe 的宽度，里面的文档按这个宽度重新计算自己的媒体查询。

问：能预览引用外部 CSS 或字体的页面吗？ 答：只要标记里引用了、且网络可达就行 —— 外部请求没有被拦。想完全离线预览，就把 CSS 内联进 style 块。