双击打开html文件乱码或空白的主因是编码不匹配和扩展名错误；ajax等功能失效则源于file://协议的安全限制，需用http服务器（如python或live server）运行。
双击打开 HTML 文件为什么有时是乱码或空白？
核心问题出在编码和扩展名上。记事本默认用 ANSI 或 GBK 保存，而 HTML 中含中文时必须用 UTF-8 编码，否则浏览器解析失败；同时若保存时没选“所有文件”，系统会偷偷加 .txt 后缀，实际文件是 index.html.txt，图标看着像网页，点开却是纯文本。
- 保存前务必在记事本的“另存为”对话框里，把“编码”下拉菜单选成
UTF-8（不是UTF-8-BOM） - “保存类型”必须选
所有文件，不能留默认的“文本文档 (*.txt)” - 文件名栏手动输入完整名称，例如
index.html，不要依赖重命名改后缀 - 右键文件 → “属性” → 确认“类型”一栏显示的是“HTML Document”，不是“文本文档”
VS Code 保存 HTML 文件时为什么还是打不开？
VS Code 默认保存即为 UTF-8，但新手常忽略两个细节：一是新建文件未手动设置语言模式，二是没写 声明导致浏览器进入怪异模式（Quirks Mode），渲染异常。
- 新建文件后，右下角点击语言标识（如“Plain Text”），选
HTML，启用语法高亮与校验 - 输入
!再按 Tab 键（Emmet 快捷），自动生成标准 HTML5 模板，含<meta charset="UTF-8"> - 保存时直接按 Ctrl+S，VS Code 不会加 .txt，但要确认文件名带
.html或.htm - 若仍打不开，检查地址栏 URL 是否为
file://开头 —— 这说明是本地双击打开，功能受限正常
为什么 AJAX、图片路径或 localStorage 在双击打开时失效？
现代浏览器对 file:// 协议施加了严格限制：禁止跨源请求、部分 API 被禁用、相对路径解析行为异常。这不是你代码错，而是安全策略使然。
- 涉及
fetch()、XMLHttpRequest、import模块、localStorage（某些版本）、Service Worker的页面，必须走 HTTP 协议 - 最轻量方案：终端进入文件目录，运行
python -m http.server 8000（Python 3.14+ 已内置），然后访问http://localhost:8000/index.html - VS Code 用户装
Live Server插件，右键 HTML 文件 → “Open with Live Server”，自动启动并监听保存刷新 - 注意：Python 服务器根路径是当前终端所在目录，所有引用路径需相对于该目录，不是相对于 HTML 文件位置
文件名和路径里有哪些隐藏雷区？
Windows 和浏览器对空格、中文、特殊符号容忍度低，尤其在命令行或脚本调用时容易断裂，不是报错就是 404。
- 文件夹名、HTML 文件名避免空格和中文，用
my-project、index.html，别用我的项目或index v2.html - 路径中含中文时，
file://URL 会转义成百分号编码，部分浏览器解析失败；HTTP 服务器（如 Python）也未必正确解码 - 图片等资源路径用相对路径，例如
<img src="images/logo.png">，确保images/文件夹与 HTML 文件同级 - 调试时打开浏览器开发者工具（F12），看 Console 和 Network 标签页，404 错误直接暴露路径问题
<h1>你好</h1> 能干净显示，再跑通本地服务器访问路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
