用浏览器直接打开本地HTML文件可行但易出错，需确保路径正确、编码为UTF-8、资源相对路径准确，并推荐使用本地HTTP服务（如Python的http.server或VS Code的Live Server）避免file://协议限制。
直接双击打开 HTML 文件，用浏览器就能看——但多数人卡在路径错误、编码乱码、本地 JS/CSS 不生效这三步上。
用浏览器直接打开本地 index.html 文件
这是最快的方式，适合静态页面预览。关键不是“能不能开”，而是“开得对不对”：
- 右键文件 → “在浏览器中打开” 可能调用默认浏览器，但部分浏览器（如 Chrome）会因安全策略拒绝读取本地
file://协议下的XMLHttpRequest或fetch() - 务必检查地址栏：开头是
file:///（三个斜杠），不是http://；路径含中文或空格时容易 404，建议用英文命名 + 下划线 - Chrome 会禁用本地
localStorage和部分 API，Firefox 相对宽松；开发阶段别依赖file://测试交互逻辑
启动一个本地 HTTP 服务（推荐开发时用）
绕过浏览器对 file:// 的限制，让 HTML 行为和线上一致：
- Python 3 用户：终端进入项目目录，运行
python3 -m http.server 8000
，然后访问http://localhost:8000/index.html - Node.js 用户：全局安装
serve：npm install -g serve
，再运行serve -s .
- VS Code 安装插件 “Live Server”，右键 HTML 文件点 “Open with Live Server”，自动起服务并监听文件变化
网页开发者工具里实时修改并保存 HTML
浏览器的 DevTools（F12）能改 HTML/CSS/JS，但改完不等于保存到磁盘：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板右键节点 → “Edit as HTML” 可临时编辑结构，刷新即丢失
- 想持久化？必须手动复制修改后的内容，粘贴回本地
index.html文件并保存 - Network 面板可确认资源是否加载成功：状态码
200是正常，404说明路径写错（比如src="js/main.js"但实际在./scripts/main.js）
常见乱码和路径问题怎么快速定位
页面文字变方块、图片不显示、控制台报错 net::ERR_FILE_NOT_FOUND，基本就这三类原因：
- HTML 文件本身编码不是 UTF-8：用 VS Code 打开 → 右下角点编码（如 “GBK”）→ 选 “Save with Encoding” → “UTF-8”
-
<link rel="stylesheet" href="style.css">中的style.css路径是相对于 HTML 文件位置，不是相对于当前工作目录 - 图片路径写成
<img src="images/logo.png">，但实际文件夹叫img/，大小写也要注意（macOS 不敏感，Linux/Windows 敏感）
真正麻烦的不是“打不开”，而是“看起来打开了，但 JS 没执行、CSS 没加载、接口 404 却没报错”。本地开发时，别跳过 HTTP 服务这步。
