双击打开HTML文件会因file://协议限制导致跨域错误、API禁用、路径404等问题；开发须用本地服务器（如Live Server或http-server）通过http://localhost访问；上线前需检查相对路径、MIME类型及大小写/斜杠兼容性。
直接双击就能打开，但浏览器可能报错或不渲染——关键在文件路径和协议。
用浏览器双击打开 file:// 协议受限
本地双击 index.html 时，浏览器实际走的是 file:// 协议。这时：
• XMLHttpRequest、fetch 读取本地 JSON 或 JS 文件会触发跨域错误（net::ERR_FAILED）
• 某些现代 API（如 localStorage 在部分 Chromium 版本中）可能被禁用
• 图片/字体路径若含中文或空格，容易 404（URL 编码问题）
• 不支持服务端逻辑（PHP、Node.js 等自然无效）
开发阶段必须起本地服务器
绕过 file:// 限制的唯一可靠方式是走 http://localhost：
• VS Code 用户装 Live Server 插件，右键点 HTML 文件 → “Open with Live Server”
• 终端进项目目录，运行：python3 -m http.server 8000（Python 3）或 npx http-server（需 Node）
• 浏览器访问 http://localhost:8000/index.html，不是双击文件
• 注意：http-server 默认不支持路由 fallback，单页应用（SPA）需加 -p 8080 -c-1 参数
上线前检查三件事
哪怕本地跑通，上传后也可能白屏：
• 检查所有 src 和 href 路径是否为相对路径（如 ./js/app.js），避免写死 C:/project/... 或绝对 URL
• 确认服务器 MIME 类型正确：HTML 文件必须返回 Content-Type: text/html，否则可能下载而非渲染
• 静态资源（图片、CSS）放在同级或子目录下，别依赖 IDE 预览的“虚拟根路径”
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是：开发时用 Live Server 没问题，一放到 Nginx/Apache 就 404——八成是路径里混用了 Windows 反斜杠 \ 或大小写不一致（Linux 服务器区分大小写）。
