VS Code配合Chrome可直接运行HTML：安装Open in Default Browser插件后右键选择“在浏览器中打开”，保存即刷新，无需额外服务或系统配置。
直接用 VS Code + Chrome 就能跑起来，不用装任何额外服务、不配环境变量、不改系统设置。其他方案要么有编码陷阱，要么绕开浏览器限制后反而更难调试。
VS Code 为什么比记事本更安全
记事本默认保存为 ANSI 编码，中文一保存就变乱码；VS Code 新建文件默认就是 UTF-8，且不带 BOM，打开即用。它还能自动识别 .html 后缀并启用语法高亮、标签闭合提示、错误标记——这些不是“高级功能”，而是防止你写错 <title> 拼成 <tite> 的基础防线。
- 安装后首次启动，不要点“添加到 PATH”，也不用动任何设置，直接新建文件 → 保存为
index.html - 右键文件 → “在浏览器中打开”（需提前装好
Open in Default Browser插件，搜名字直接装） - 改完代码按
Ctrl + S，切到 Chrome 按F5刷新即可，闭环极短
为什么双击 HTML 文件经常打不开或显示源码
这不是你代码错了，是浏览器对 file:// 协议的限制：当页面里用了 fetch()、localStorage、甚至某些 CSS @import，Chrome 会直接拒绝执行，并静默失败。你看到空白页或源码，大概率是 JS 报了 Access to script at 'file:///...' from origin 'null' has been blocked 这类错误。
- 验证方法：右键 → “检查” → 切到
Console标签页，看有没有红色报错 - 临时解法：用 Python 起个最小服务——终端进项目目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - 长期建议：装 VS Code 的
Live Server插件，右键 HTML 文件 → “Open with Live Server”，自动起服务+热重载
DOCTYPE 和 lang 属性不能省略的两个硬原因
<!DOCTYPE html> 必须是文件第一行，前面不能有空格、注释、BOM 字节；<html lang="zh-CN"> 的 lang 属性不是可选项——它直接影响屏幕阅读器断句、搜索引擎语义识别、甚至某些 CSS 伪类（如 :lang(zh)）的行为。
立即学习“前端免费学习笔记（深入）”；
- Notepad++ 或旧版编辑器容易偷偷加 BOM，导致 DOCTYPE 失效，浏览器进入怪异模式（Quirks Mode），盒模型计算全乱
- Mac 上用 TextEdit 默认是富文本，必须先点菜单栏“格式 → 使纯文本”，否则保存时插入不可见字符，
<p>可能被截断成<p></p>但内容消失 - VS Code 里按
Shift + Alt + I可快速查看当前编码，确认是UTF-8而非UTF-8 with BOM
最常被忽略的其实是路径书写：图片、CSS、JS 的 src 或 href 值里用反斜杠 \（Windows 风格）会导致 404，必须统一用正斜杠 /；相对路径从 index.html 所在位置算起，不是从编辑器打开的文件夹根目录——这点在多层子目录下极易出错。
