双击打开本地html文件会因file://协议限制导致空白或报错；应使用live server插件或python3 -m http.server启动本地http服务绕过限制。
双击打开后页面空白或报错 file:// 协议限制
本地 HTML 文件用双击打开时，浏览器默认走 file:// 协议，这时很多现代 Web 功能会直接失效——比如 fetch() 加载本地 JSON、import 模块、甚至某些 CSS/JS 的相对路径解析都会出错。这不是你代码写错了，是浏览器安全策略卡的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 装
Live Server插件，右键 HTML 文件选「Open with Live Server」，它起一个本地http://127.0.0.1:5500/服务，绕过所有file://限制 - 命令行快速起服务（有 Python 3）：
python3 -m http.server 8000，然后浏览器访问http://localhost:8000/your-file.html - 别依赖双击——尤其涉及 AJAX、ES modules、Web Components 时，
file://基本等于“不工作”
Chrome / Edge 打开提示「已阻止此页面运行脚本」
这是浏览器对本地文件的主动防御：当 HTML 里有内联 <script></script> 或用了 eval 类 API，且协议是 file://，部分 Chromium 内核浏览器会直接拦截并静默失败，控制台可能只显示「Refused to execute inline script」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把 JS 逻辑全挪到外部文件，用
<script src="main.js"></script>引入，避免内联脚本 - 禁用 Chrome 的这个限制仅用于调试（不推荐长期用）：
chrome --unsafely-treat-insecure-origin-as-secure="file://" --user-data-dir=/tmp/chrome-test - Edge 同理，但更激进——哪怕外链 JS，只要页面是
file://，某些 API（如navigator.permissions）也会返回denied
路径问题：CSS/JS 图片都加载不出来
双击打开时，浏览器把当前 HTML 文件所在目录当作根路径（/），但这个“根”和你想象的项目根目录往往不一致。比如 ./css/style.css 在 VS Code 里预览正常，双击就 404，因为路径解析基准变了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用相对路径，且全部以
./开头（不要省略，也不要写成css/style.css） - 图片等静态资源尽量和 HTML 放同一级，或用明确层级，比如
../images/logo.png，避免靠猜测 - 检查开发者工具 Network 面板，看实际请求的 URL 是什么——经常发现浏览器拼出了
file:///css/style.css（少了一级），这就说明路径基准错了
Mac 上右键「用浏览器打开」却启动了 Safari 而不是 Chrome
macOS 默认按文件关联启动，HTML 文件被绑定到 Safari，即使你日常用 Chrome，右键菜单也不会自动换。这不是 bug，是系统级配置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 右键 HTML 文件 →「显示简介」→ 展开「打开方式」→ 选 Chrome → 点「全部更改…」
- 改完后，新文件生效；旧文件需单独点「更改」，或批量重设：
find . -name "*.html" -exec duti -s com.google.Chrome {} \;（需先装duti） - VS Code 里右键「Reveal in Finder」再操作，比在 Finder 里大海捞针找文件快得多
file:// 就是条死路。别跟它较劲，起个本地 server 是唯一靠谱的起点。 
