双击 HTML 文件不工作是因为浏览器对 file:// 协议有安全限制：fetch、localStorage 等 API 静默失效，CSS @import 和相对路径易 404；VS Code + Live Server 通过 http://127.0.0.1:5500 提供标准 HTTP 服务，绕过限制，支持跨域加载与实时刷新。
HTML 文件不用“运行”，直接用浏览器打开就能看效果；所谓“在线运行”本质是绕过本地文件协议限制，解决 file:// 下加载资源失败、AJAX 报错、相对路径失效等问题。
为什么双击 .html 文件有时不工作？
浏览器出于安全策略，默认禁止 file:// 协议下执行某些操作：比如读取本地 ./data.json、加载同目录的 script.js（部分旧版 Chrome）、甚至图片路径带空格也会 404。你看到的空白页、控制台报 net::ERR_FILE_NOT_FOUND 或 Access to script at 'file:///...' is denied，基本都源于此。
常见触发场景：
- 用了
<img src="images/logo.png">，但没建images/文件夹 - 写了
fetch("./api/users.json")，结果控制台红字报错 - 在 VS Code 里右键“Open with Live Server”没反应——插件没装或没启用
VS Code + Live Server 是最稳的本地开发流
它起一个真正的 http://127.0.0.1:5500/ 服务，完全模拟线上环境，99% 的路径和请求问题一并消失。不是“看起来像”，是真能用 fetch、import、XMLHttpRequest。
立即学习“前端免费学习笔记（深入）”；
实操步骤：
- 确保已安装 VS Code 官方插件
Live Server（作者：Ritwick Dey） - 打开含
index.html的文件夹（不要只打开单个文件） - 右键
index.html→ 选择Open with Live Server，浏览器自动弹出 - 改完代码保存，页面自动刷新（可关掉自动刷新，在插件设置里搜
liveServer.settings.donotShowInfoMsg）
注意：Live Server 默认根路径是当前工作区文件夹，所以 <link rel="stylesheet" href="style.css"> 要求 style.css 和 index.html 在同一级目录。
CodePen / JSFiddle 适合快速验证片段，不适合练结构
它们把 HTML/CSS/JS 拆成三个面板，自动拼合成完整页面，省去手动搭骨架的麻烦。但这也掩盖了真实项目里的关键约束：比如 <head> 里放 <script> 会阻塞渲染、<script> 放 </body> 前才是常规做法。
适用情况：
- 临时测一个
flex布局是否生效 - 复现别人提问里的 bug（贴代码即跑）
- 分享可交互的最小示例给同事
不适用情况：
- 练习
<meta charset="UTF-8">位置或viewport设置——这些在 CodePen 里被自动托管了 - 调试多文件依赖（如
header.html+nav.js+main.css） - 想理解为什么
document.querySelector("h1")在<script>标签里取不到元素——因为 DOM 还没加载完
别迷信“在线编辑器 = 免配置”，小心默认行为坑人
比如 JSFiddle 默认把 JavaScript 执行时机设为 onLoad（等整个页面 load 完才运行），而新手常写 document.getElementById("btn") 却发现返回 null——其实只是脚本执行太晚，DOM 已存在，但你的代码没按预期时机执行。
再比如 CodePen 的 HTML 面板默认加了 <div id="app"></div>，你写 <h1>Hello</h1> 实际渲染在 #app 内部，但真实项目中你得自己决定容器 ID 是什么、要不要这个 wrapper。
真正容易被忽略的点：
-
<meta charset="UTF-8">必须放在<head>最前面，否则中文可能乱码——在线编辑器帮你加了，但你没意识到它有多关键 -
<img>的alt属性不是“可选补充”，是无障碍访问强制要求，也是 SEO 基础——所有在线编辑器都不校验这个 - 在线工具生成的链接（如 CodePen 的
https://codepen.io/xxx/pen/yyy）无法部署到你自己的域名，也不支持自定义 HTTP 头或服务端逻辑
