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” 失效，多数情况和插件本身无关，而是触发条件没满足。
- 必须已安装并启用
ritwickdey.LiveServer插件（注意大小写） - 当前文件必须已保存——未保存的临时标签页（如
Untitled-1）不会被服务 - 文件扩展名必须是小写
.html，.HTML或.htm可能被忽略 - 如果项目根目录有
index.html，Live Server 会自动定位；否则需手动在浏览器输入完整路径，比如http://127.0.0.1:5500/test.html
Network 面板里一堆 404，但路径明明是对的
路径“看着对”，不等于浏览器请求的路径就对。相对路径解析依赖于当前 HTML 文件所在位置，而非你编辑时的直觉。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 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，比反复改路径高效十倍。
