html文件打不开、页面空白或资源加载失败，90%是本地file://协议安全限制所致，非代码错误；应起本地http服务（如live server）以http://localhost访问，避开跨域拦截与路径解析问题。
HTML 文件打不开、页面空白或资源加载失败，90% 是本地环境配置和路径问题，不是代码写错了。直接用浏览器双击打开 file:// 协议的 HTML 文件，现代浏览器（Chrome/Edge）会主动拦截 JS/CSS 加载、禁用 fetch、甚至拒绝解析某些 DOM 操作——这不是 bug，是安全策略。
为什么双击打开总是白屏或报 net::ERR_FILE_NOT_FOUND
根本原因是浏览器对 file:// 协议做了跨源限制，不是文件丢了，也不是路径错得离谱。
- 典型错误信息：
Access to script at 'file:///xxx.js' from origin 'null' has been blocked -
net::ERR_FILE_NOT_FOUND往往是浏览器拦截后伪造的 404，实际文件存在 - Chrome 启动加
--allow-file-access-from-files能临时绕过，但仅限调试，且新版 Chrome 已逐步废弃该参数 - 正解永远是：起一个本地 HTTP 服务，用
http://localhost:8000访问
Live Server 插件点不动或没反应
VS Code 里右键 “Open with Live Server” 失效，多数情况和插件本身无关，而是触发条件没满足。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须已安装并启用
ritwickdey.LiveServer插件（注意大小写） - 当前文件必须已保存——未保存的临时标签页（如
Untitled-1）不会被服务 - 文件扩展名必须是小写
.html，.HTML或.htm可能被忽略 - 如果项目根目录有
index.html，Live Server 会自动定位；否则需手动在浏览器输入完整路径，比如http://127.0.0.1:5500/test.html
Network 面板里一堆 404，但路径明明是对的
路径“看着对”，不等于浏览器请求的路径就对。相对路径解析依赖于当前 HTML 文件所在位置，而非你编辑时的直觉。
- 用开发者工具的 Network 面板点开红色 404 请求，看 “Initiator” 列和 “Request URL”，确认浏览器实际发的是什么地址
-
./css/style.css和css/style.css效果一样，前者冗余，还容易在嵌套引用时出错 - 避免多层
../，比如../../../js/app.js—— 一不小心少一个点就 404，建议用 VS Code 的路径自动补全 - JS 报
Uncaught SyntaxError: Unexpected token '？基本是路径错导致服务器返回了 HTML 页面（比如 404 页面）而不是 JS 文件
中文乱码、符号变问号、控制台报错说 charset 不匹配
核心矛盾是文件保存编码和 HTML 声明不一致。记事本默认存 GBK，但网页标准强制要求 UTF-8。
- VS Code 右下角状态栏显示编码（如
GBK），点击它 →Save with Encoding→ 选UTF-8 - 必须在
里加<meta charset="UTF-8">，且要放在所有其他标签之前（尤其在<title></title>前） - 不要用 Word、WPS 等富文本编辑器写 HTML，它们会偷偷插入不可见字符或改编码
- 复制别人代码时，先粘到记事本再拷进编辑器，可清除隐藏格式
最容易被忽略的一点：很多问题看似随机，其实只发生在特定组合下——比如 Chrome + 未保存文件 + 相对路径 + 中文路径。别猜，开 Network 面板看真实请求 URL，比反复改路径高效十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
