直接双击index.html仅适用于纯静态页面；若使用fetch、import等特性，必须通过HTTP服务器（如Live Server插件或npx http-server）以http://localhost运行，否则因file://协议限制导致资源加载失败。
直接双击 index.html 就能看效果，但如果你的页面用了 fetch()、import 或外链 CSS/JS，大概率会白屏或报错——这不是代码写错了，是浏览器在 file:// 协议下主动拦掉了这些功能。
双击打开为什么有时不工作
Windows/macOS 双击 index.html 本质是走 file:/// 协议，浏览器出于安全限制，会禁止：
-
XMLHttpRequest和fetch()请求本地文件（跨域错误：Failed to load resource: net::ERR_FAILED） - ES 模块导入（
import报Failed to load module script） - 某些
localStorage或Service WorkerAPI 的初始化
静态文本、内联样式、内联脚本通常没问题；只要涉及外部资源加载或现代 JS 特性，就得换方式。
VS Code 里点一下就跑：Live Server 插件
这是开发时最省心的方式，它自动起一个 http://localhost:5500 服务，并监听保存自动刷新。
立即学习“前端免费学习笔记（深入）”；
- 在 VS Code 扩展市场搜
Live Server，安装并重启编辑器 - 右键你的
index.html文件 → 选Open with Live Server - 浏览器自动打开，改完 HTML/JS/CSS 保存后页面立刻更新
- 注意：默认端口是 5500，如果被占用了，插件会在终端提示新端口（比如
http://127.0.0.1:5501）
不用装插件：用命令行起个最小 HTTP 服务器
适合没装 VS Code、或者想确认是否真和环境有关的排查场景。
- 确保已安装 Node.js（终端输入
node -v能看到版本号） - 进入你的 HTML 文件所在目录，运行：
npx http-server - 终端会输出类似：
Starting up http-server, serving .和Available on:后跟http://127.0.0.1:8080 - 复制那个地址，粘贴到浏览器——这时所有
fetch、import都能正常工作 - 不想装全局工具？
npx是临时调用，无需npm install -g
Python 用户可选：一行命令启动
如果你系统自带 Python 3（macOS/Linux 默认有，Windows 安装时勾选了 Add Python to PATH），更轻量：
- 终端进入项目目录，执行：
python -m http.server 8000 - 访问
http://localhost:8000即可 - 注意：Python 2 是
python -m SimpleHTTPServer 8000，但已淘汰，别混用 - 这个服务器不支持 HTTP/2 或 CORS 头自定义，日常调试完全够用
真正容易被忽略的不是“怎么打开”，而是“为什么打开后功能异常”——绝大多数时候，问题不出在代码，而出在协议上。只要看到控制台报 net::ERR_FAILED 或 Blocked loading resource，第一反应该检查是不是还在双击运行。
