双击打开html页面css/js不生效是因为file://协议禁用跨源请求，导致fetch、xmlhttprequest、web font等失败；应改用http服务预览，如python的http.server或vs code的live server。
直接双击打开就行，但“打开方式”不对会导致页面空白或样式错乱——本质不是文件问题，是浏览器没走 http 协议加载资源。
为什么双击打开的 HTML 页面 CSS/JS 不生效？
本地双击用 file:// 协议加载，浏览器会禁用部分跨源行为：比如 fetch() 读取本地 json、XMLHttpRequest 加载同目录 HTML 片段、某些 Web Font 或 import 模块路径解析失败。CSS 和 JS 文件路径写成相对路径（如 ./style.css）本身没问题，但一旦含 localhost、/api/ 或用了 module 类型脚本，就容易静默失败。
- 检查控制台是否报
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension... - 确认所有
src和href路径是相对路径，且文件确实存在（注意大小写和扩展名） - 避免在
<script type="module"></script>中使用import绝对路径或未加.js后缀
怎么快速起一个本地 HTTP 服务预览？
绕过 file:// 限制最稳的方式就是启动一个最小 HTTP 服务。不需要装完整开发环境，Python、Node.js 甚至浏览器插件都能秒开。
- Python 3：终端进项目根目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000 - Node.js：全局装
serve（npm install -g serve），再执行serve -s . -p 8000 - VS Code 用户可装插件
Live Server，右键 HTML 文件点 “Open with Live Server”
注意：不要用 Python 2 的 SimpleHTTPServer，它不支持现代 MIME 类型，可能导致 SVG、WebP 或模块脚本加载失败。
Chrome/firefox 直接打开 HTML 文件时的隐藏坑
Chrome 从 94 版本起默认禁用 file:// 下的 localStorage 和 IndexedDB；Firefox 则对 file:// 下的 fetch() 做了更严格的同源判定。这些不会报错，但功能直接不工作。
立即学习“前端免费学习笔记（深入）”；
- 测试存储类逻辑，必须走
http://localhost（哪怕只有一行index.html） - 用
chrome --unsafely-treat-insecure-origin-as-secure="file:///" --user-data-dir=/tmp/chrome-test强开是临时方案，但别用于日常浏览 - edge 和 safari 在
file://下行为更保守，尤其涉及canvas导出或FileReader时容易卡住
真正麻烦的从来不是“打不开”，而是“看起来打开了，但 JS 没跑、样式没应用、接口返回空对象”——这时候先看地址栏是不是 file:/// 开头，再打开开发者工具的 Network 和 console 标签页，比反复改路径有效得多。