直接双击打不开 HTML 文件？先看浏览器是否默认关联
多数人遇到的“打不开”，其实是系统没把 .html 文件和浏览器正确绑定。Windows 双击后弹出“选择应用”、Mac 上用预览打开乱码、Linux 里直接下载不渲染——本质都不是文件坏了，而是执行链断在第一步。
- Windows：右键
index.html→“属性”→“打开方式”→ 点“更改”→ 选 Chrome / Edge / Firefox（别选记事本） - macOS：右键 →“显示简介”→“打开方式”选 Safari 或 Chrome → 点“全部更改”
- Linux（GNOME）：
xdg-mime default firefox.desktop text/html（临时修复）
注意：改完要重新双击，不是刷新桌面。有些安全软件会偷偷重置默认程序，关掉实时防护再试一次更稳妥。
用 file:// 协议打开时页面空白？检查路径和资源加载
本地双击或拖进浏览器走的是 file:// 协议，它比 http:// 严格得多：跨域限制直接生效，相对路径解析规则也不同。常见现象是 HTML 能显示，但 CSS 不生效、JS 报错 net::ERR_FILE_NOT_FOUND、图片全挂。
- 所有
src和href必须用相对路径（如./css/style.css），不能写绝对路径（/css/style.css会被解析成磁盘根目录） - 避免在 JS 里用
fetch('./data.json')——file://下 fetch 默认被禁，换成XMLHttpRequest也不行，得起本地服务 - Chrome 会拦截
file://下的本地 AJAX，Edge 和 Firefox 同样受限，这不是 bug 是安全策略
简单验证法：把整个文件夹拖进浏览器地址栏，看地址是不是以 file:/// 开头；如果是，就别指望动态加载外部资源。
立即学习 “ 前端免费学习笔记（深入）”；
需要运行 JS 或调 API？必须起本地 HTTP 服务
只要涉及 fetch、XMLHttpRequest、WebSocket、Service Worker，或者用了现代构建工具（Vite、Webpack Dev Server）的热更新，file:// 就彻底失效。这时候不是“怎么打开”，而是“怎么启动一个最小 HTTP 服务”。
- Node.js 用户：
npx serve（自动找当前目录）或npx http-server -o（-o 自动打开浏览器） - Python 3：
python -m http.server 8000，然后访问http://localhost:8000 - 没有环境？VS Code 安装 Live Server 插件，右键 HTML 文件点“Open with Live Server”
注意端口冲突：如果报 EADDRINUSE，换端口即可，比如 http-server -p 3001。别试图改系统 hosts 或配 nginx——对单个 HTML 来说太重了。
中文乱码、特殊符号显示异常？Meta 声明和保存编码要一致
浏览器靠 <meta charset="utf-8"> 和文件实际编码两个信息共同判断解码方式。二者不一致，就会出现“文字变方块”“标点错位”“注释里中文变问号”。
- 编辑器保存时务必选 UTF-8 无 BOM（Notepad++ 里叫“UTF-8”，不是“UTF-8-BOM”；VS Code 底部状态栏点编码名可切换）
-
<meta>标签必须放在最前面，且不能写成<meta charset="UTF8">（少个横线、大小写混用都可能失效） - 如果用了构建工具（如 Vite），检查输出 HTML 是否被二次处理过编码，有时插件会悄悄转成 ISO-8859-1
最简验证：用浏览器开发者工具（F12）→ Network → 点 HTML 请求 → 查看 Response Headers 里的 content-type 是否含 charset=utf-8。没有？说明服务没发对，不是前端代码问题。
真正麻烦的从来不是“怎么打开”，而是打开之后发现 JS 不跑、接口不通、样式飞了——这些基本都卡在协议、路径、编码、服务四个环节里。漏掉任何一个，都会让你在“明明文件没错”的状态里反复重启浏览器。
