双击打开HTML文件不生效是因为浏览器在file://协议下禁用fetch、XMLHttpRequest和ES模块等安全敏感功能；应使用Python内置http.server、VS Code Live Server插件或CodePen/JSFiddle/StackBlitz等在线工具预览。
直接双击打开 HTML 文件为什么有时不生效
很多用户双击 index.html 后浏览器弹出空白页或报错，常见原因是页面用了 fetch、XMLHttpRequest 或模块化导入（如 import），而浏览器在 file:// 协议下默认禁用跨源请求和部分 ES 模块功能。这不是浏览器 bug，而是安全策略限制。
- Chrome / Edge 从 v95 起彻底禁止
file://下加载本地.js模块（报错Failed to load module script） - Vue/React/Vite 等构建工具生成的产物依赖本地服务，不能靠双击运行
- 含
localStorage或Service Worker的页面在file://下可能静默失效
用 Python 快速起一个本地 HTTP 服务
无需安装额外工具，Python 自带的 http.server 模块就能解决绝大多数预览需求，且兼容所有现代浏览器。
终端进入项目根目录后执行：
python3 -m http.server 8000
然后访问 http://localhost:8000/index.html 即可。注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- Python 2 用户请用
python -m SimpleHTTPServer 8000（但已不推荐，存在安全与编码问题） - 端口可换为
8080、3000等未被占用的数字 - 该服务支持静态资源加载（CSS/JS/图片）、相对路径解析、CORS 默认允许，满足开发调试基本要求
- 不支持热更新或代理，如需这些功能，应切换到
live-server或vite preview
VS Code 插件 Live Server 的真实行为
Live Server 插件本质是启动一个轻量 Node.js 服务（基于 connect + chokidar），但它不是“魔法”，有明确边界：
- 只对当前打开的文件夹生效，不递归扫描子项目
- 默认开启自动刷新，但不会监听
node_modules或隐藏文件（如.git） - 点击右下角 “Go Live” 后，实际启动的是
http://127.0.0.1:5500/xxx.html，不是file:// - 若页面含
<base href="/subpath/">，需手动在插件设置里配置liveServer.settings.root - 它不处理构建步骤（比如把
.ts编译成.js），仅托管已存在的静态文件
在线预览 HTML 的三个可靠入口
真正适合快速验证片段、分享给他人或测试响应式效果的在线方式，只有以下三种稳定可用：
- CodePen：粘贴完整 HTML/CSS/JS 到对应面板，点 “Run” 即可；支持私有笔（Private Pen），但免费版无法设密码
-
JSFiddle：选择框架（如 Vue 3 CDN）、添加外部资源（如 Bootstrap CSS）、写好
<div id="app"></div>后直接运行；注意其默认使用onLoad执行 JS，需手动切到No wrap - in <head>才能模拟真实环境 -
StackBlitz Web Container：支持完整项目结构（含
package.json），可运行 Vite/Next.js 等，但首次加载较慢；适合需要 npm 依赖的场景
别用那些“一键上传 HTML 预览”的小网站——多数会删改你的 <script> 标签、注入广告脚本，甚至把代码发到第三方服务器存档。
