直接用浏览器双击打开 HTML 文件不可靠，因现代浏览器默认禁用 file:// 协议下的 JS/CSS/图片加载、fetch、AJAX 及跨目录相对路径，导致页面空白或资源失效；可靠方式是启用本地 HTTP 服务（如 Live Server 或 python3 -m http.server）并通过 http://localhost 访问。
直接用浏览器打开 .html 文件是最可靠、零依赖的方式；在线工具适合临时协作或无法保存文件的场景，但要注意跨域、路径和脚本执行限制。
为什么本地双击 .html 文件有时不生效
常见错误现象是点击后页面空白、图片不显示、CSS/JS 未加载——这通常是因为浏览器使用 file:// 协议加载，而现代浏览器默认禁止该协议下的 AJAX 请求、fetch()、import 模块、localStorage（部分情况）以及相对路径的跨目录资源引用。
使用场景：适合纯静态结构验证，比如测试一个带 <h1> 和 <p> 的单页文案排版。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 代码包含完整结构：
<html><head><title>...</title></head><body>...</body></html> - 所有图片、CSS、JS 文件必须与 .html 文件在同一目录，或使用正确相对路径（如
./css/style.css） - 避免在
file://下测试XMLHttpRequest或读取本地 JSON 文件
CodePen / JSFiddle 这类平台怎么避免“代码写了但没反应”
典型表现是预览区空、控制台报 ReferenceError 或样式完全丢失——根本原因是 HTML/CSS/JS 面板被拆开，用户误把 CSS 写进 HTML 区、或 JS 里用了尚未定义的 DOM 元素。
参数差异：CodePen 默认将 JS 执行时机设为 onLoad（即 window.onload），而 JSFiddle 默认是 onDomReady；若 JS 里直接操作 document.getElementById()，且 HTML 尚未解析完，就会返回 null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 CodePen 右上角 Settings → JavaScript → Load Type 改为
No wrap - in <head>，让 JS 同步执行 - JSFiddle 中勾选
no wrap (body)，等同于把脚本放在</body>前 - CSS 不要写在 HTML 面板里用
<style>，而是填入专用 CSS 面板，避免被 HTML 解析器忽略 - 外部资源（如 jQuery）需在设置中手动添加 CDN 链接，不能靠
script src="jquery.min.js"本地引用
用浏览器开发者工具快速测一段 HTML 片段
适用场景是改一行标题、加个按钮、临时补个 class——不需要建文件、不走网络、秒出效果。但容易忽略 DOM 生命周期和事件绑定时机。
性能影响极小，但注意：在 Elements 面板中右键 → Edit as HTML 替换的内容不会触发 DOMContentLoaded，已绑定的事件监听器也不会自动重装。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开任意网页（甚至
about:blank），按F12→ 切到 Elements 面板 - 右键任意元素（如
<body>）→Edit as HTML→ 清空内容，粘贴你的完整 HTML 片段（含<html>会报错，只留<body>内容即可） - 回车后立即渲染，但 JS 脚本需手动在 Console 中运行（如
document.querySelector('button').onclick = ...） - 刷新页面后所有修改丢失，适合一次性验证，不适合调试逻辑流
真正麻烦的不是“怎么跑起来”，而是“为什么跑起来后行为不对”——多数时候问题不在 HTML 本身，而在资源加载顺序、执行上下文隔离、或浏览器对 file:// 的策略收紧。动手前先想清楚：你是在验证结构、测交互、还是调响应式？目标不同，工具就该换。
