根本原因是浏览器对 file:// 协议的跨源限制，必须通过 http 服务（如 live server、http-server 或 python 内置服务器）运行；路径需以 html 文件位置为基准，区分相对/绝对路径；github pages 等 linux 环境严格区分大小写；动态导入和预加载路径须字面量精确；前端路由需服务端 fallback 配置。
本地双击打开 HTML 文件时，fetch 或 XMLHttpRequest 报错：CORS policy: No ‘Access-Control-Allow-Origin’ header
这不是 HTML5 的问题，而是浏览器的安全限制：当文件通过 file:// 协议直接打开（比如双击桌面的 index.html），所有跨文件读取（包括加载 .js、.json、.png 等外部资源）都会被阻止，哪怕它们在同一文件夹下。错误信息里出现 No 'Access-Control-Allow-Origin' 就是典型表现。
解决办法只有一个：不能双击运行，必须用 HTTP 服务打开。常见做法：
- 用 VS Code 安装
Live Server插件，右键 HTML 文件 →Open with Live Server - 命令行中进入项目目录，执行
npx http-server（需先npm install -g http-server），然后访问http://127.0.0.1:8080 - Python 用户可临时用
python3 -m http.server 8000（Python 3.7+ 自带）
引用外部 CSS/JS 时页面空白或功能失效，检查 src 和 href 路径是否写错
HTML5 本身不改变路径解析规则，但新手常混淆相对路径起点——它永远以「当前 HTML 文件所在位置」为基准，不是以代码编辑器打开的文件夹根目录为准。
假设结构如下：
立即学习“前端免费学习笔记（深入）”；
my-site/
├── index.html
├── js/
│ └── main.js
└── css/
└── style.css
那么 index.html 中正确引用是：
-
<link rel="stylesheet" href="css/style.css">✅ -
<script src="js/main.js"></script>✅ -
<script src="./js/main.js"></script>✅（./可省略） -
<script src="js/main.js"></script>在my-site/subpage/about.html里就 ❌，应改为../js/main.js
绝对路径（以 / 开头）则从网站根目录算起，只在部署到真实服务器（如 Nginx/Apache）且配置了正确根路径时才稳定可用。
