JSFiddle中HTML不生效是因为其自动将HTML面板内容注入到自身模板的<body>内，导致手动写的<html><head><body>标签被忽略；CSS和JS需按面板规范引用，避免作用域和执行时机问题。
JSFiddle 里 HTML 不生效？检查 <body> 是否被自动包裹
jsfiddle 默认把你在 html 面板写的代码，当作 <body> 内容插入到它自己的模板中——也就是说，你写的 <html>、<head>、<body> 标签全会被忽略，甚至可能引发解析错误。
常见错误现象：CSS 不生效、JS 找不到元素、document.querySelector('body') 返回 null（因为你的 <body> 被当成普通文本塞进真实 <body> 里了）。
- 只在 HTML 面板写内容主体，比如
<div id="app"></div>，别套<html> - 外部 CSS/JS 用左侧面板的
Resources添加，或直接写在对应面板（不加<style>/<script>标签） - 如果必须用
<style>或<script>，就写在 HTML 面板里，但确保它们在<body>级内容中（JSFiddle 会把整个 HTML 面板内容注入到<body>）
CSS 和 JS 怎么引用才不会 404 或执行失败
JSFiddle 的资源加载顺序和作用域跟本地 HTML 文件不同：CSS 面板内容自动转为 <style> 插入 <head>；JS 面板默认在 onLoad 事件里执行（即 DOM 加载完后），相当于加了 defer。
容易踩的坑：document.getElementById('xxx') 在 JS 面板里直接调用却返回 null，不是代码错，是执行时机问题。
- JS 面板右上角下拉菜单选
No wrap - in <head>，就能让 JS 在<head>中执行（注意此时 DOM 还没生成） - 选
No wrap - in <body>，JS 代码会放在<body>底部，适合操作 DOM - CSS 面板里的规则优先级和本地一致，但无法用
@import加载外部 CSS（会跨域或 404），改用 Resources 添加 CDN 链接
为什么本地能跑的 HTML，在 JSFiddle 里点击没反应
多数是因为事件绑定时机或作用域问题。JSFiddle 默认沙箱环境不污染全局，且 JS 面板代码被包裹在闭包里，function handleClick(){} 这种声明式函数不会自动挂到 window 上。
立即学习“前端免费学习笔记（深入）”；
典型错误：HTML 里写 <button onclick="handleClick()">，但 JS 面板里只写了 function handleClick(){...} —— 它根本不在全局作用域。
- 避免在 HTML 里用
onclick等内联 handler，改用 JS 面板里addEventListener - 如果非要内联，得显式挂到
window：window.handleClick = function(){...} - 检查浏览器控制台是否有
Uncaught ReferenceError，基本就是函数找不到
想测试响应式或媒体查询，JSFiddle 怎么看效果
JSFiddle 自带的“Tidy”按钮会重排版，但不模拟设备视口；它的预览区是 iframe，默认宽度固定，max-width 或 viewport 元标签无效。
关键点：JSFiddle 不支持 <meta name="viewport">，也不允许设置 iframe 的 sandbox 或 width 属性，所以纯靠它看响应式有硬伤。
- 响应式调试建议：用浏览器开发者工具的设备模拟器（Ctrl+Shift+M），对准 JSFiddle 右侧预览 iframe 操作
- 需要真实 viewport 行为？把代码复制到本地
.html文件，或用 CodePen（支持 viewport 设置） - CSS 媒体查询本身有效，只是预览区宽度固定，手动拖拽 JSFiddle 分割线改变预览宽度，能触发
min-width类规则
JSFiddle 是个快速验证片段的工具，不是完整开发环境。它省略了 HTML 结构、隐藏了加载时机、限制了全局作用域——这些不是 bug，是设计使然。真正卡住的时候，先看控制台报什么错，再确认你写的那行代码，到底是在哪个上下文里执行的。
