新建HTML文件必须使用.html后缀，VS Code仅通过扩展名识别语言模式并启用语法高亮、Emmet等功能；输入!+Tab可快速生成HTML5骨架；保存路径需为纯英文，推荐用Live Server插件避免file://协议限制；刷新页面需强制刷新或禁用缓存。
新建文件后缀必须是 .html
VS Code 不靠“模板”或“向导”创建 HTML 文件，它只认文件扩展名。你新建一个空白文件，只要把它命名为 index.html（或任何以 .html 结尾的名字），VS Code 就自动识别为 HTML 语言模式，启用语法高亮、标签补全和 Emmet 支持。
常见错误现象：
– 新建文件叫 index 或 page，没加后缀 → 没有 HTML 语法提示
– 手动输错成 .htm 或 .HTML（大写）→ 大部分情况也能识别，但少数插件或本地服务可能不认 .HTML
- 推荐做法：按
Ctrl+N（Windows/Linux）或Cmd+N（macOS）新建空白文件 → 立即按Ctrl+S保存 → 输入index.html→ 点保存 - 保存时如果 VS Code 底部状态栏没显示 “HTML”，点一下语言模式（右下角）→ 手动选
HTML - 不需要安装额外插件来“支持 HTML”，基础功能开箱即用
! + Tab 快速生成 HTML 骨架
VS Code 内置 Emmet，输入 ! 再按 Tab（不是回车），就能展开成标准 HTML5 文档结构。这是最省事的起手方式，比手动敲 <!DOCTYPE html> 可靠得多。
使用场景：
– 新建页面原型
– 写临时测试页
– 教学演示中快速搭架子
立即学习“前端免费学习笔记（深入）”；
- 确保光标在空行，输入
!，再按Tab（不是Enter） - 如果没反应，检查是否关闭了 Emmet：设置里搜
emmet→ 确保Emmet: Trigger Expansion On Tab是勾选状态 - 展开后默认是英文内容，
<title></title>里是空的，记得手动填上，否则浏览器标签页显示为空白
保存路径影响浏览器能否正常打开
VS Code 本身不运行 HTML，只是编辑器。你双击文件或拖进浏览器打不开？大概率是路径含中文、空格或特殊符号，或者文件没保存就直接打开了临时缓存。
常见错误现象：
– 浏览器地址栏显示 file:///.../桌面/我的网页.html → 中文路径导致部分资源（如 CSS、图片）加载失败
– 点击“在浏览器中打开”插件报错 Cannot find module 'open' → 插件过时或权限问题，别依赖它
- 最佳实践：把项目放在纯英文路径下，比如
C:/dev/my-site/index.html或~/projects/demo/index.html - 打开方式：右键文件 → “在浏览器中打开”，或直接把
index.html拖进 Chrome/Firefox 窗口 - 调试时建议用 Live Server 插件（微软官方维护），右键菜单点 “Open with Live Server”，它会起本地服务，自动处理路径和刷新，避开
file://协议限制
为什么改完代码刷新页面没变化？
不是 VS Code 的问题，而是浏览器缓存了旧版本。尤其当你反复修改又快速刷新时，CSS 或 JS 很容易卡在缓存里。
性能 / 兼容性影响：
– 强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R）跳过缓存，是最直接解法
– 开发时建议始终打开浏览器开发者工具（F12），勾选 “Disable cache”（在网络面板右上齿轮里）
- 不要依赖普通 F5 刷新，它可能读缓存
- 如果用了 Live Server，它默认带自动刷新，但也要注意：修改 CSS 后有时需手动触发一次保存才能触发热更新
- 检查浏览器地址栏是不是
http://127.0.0.1:5500/...（Live Server）而不是file:///...，后者无法执行某些 API（如fetch本地 JSON）
