最可靠方法是按Ctrl+N新建空白文件后立即按Ctrl+S，在保存对话框中输入完整文件名如index.html；务必包含.html后缀，否则浏览器无法识别，状态栏显示Plain Text即表示后缀错误。
直接按快捷键 Ctrl+N 后保存为 .html 文件最可靠
VS Code 本身没有“新建 HTML 文件”的专用按钮或菜单项，所谓“新建”本质就是创建一个空文本文件，再手动指定后缀。很多人卡在点完 File → New File 后忘了改后缀，结果保存成无扩展名或 .txt，浏览器打不开。
- 按
Ctrl+N（Windows/Linux）或Cmd+N（macOS），打开空白编辑器标签页 - 立刻按
Ctrl+S（或Cmd+S），在弹出的保存对话框里输入完整文件名，例如：index.html - 务必包含
.html，不要只输index——VS Code 不会自动补后缀 - 保存后，右下角状态栏会显示
HTML，说明语法识别已生效；如果显示Plain Text，说明后缀错了或没保存
用终端命令行快速生成带基础结构的 index.html
纯空文件写起来麻烦，尤其要加 <!DOCTYPE html> 和基本骨架。用内置终端一行命令就能搞定，比复制粘贴更稳。
- 按
Ctrl+`打开集成终端 - 执行：
echo "<!DOCTYPE html><html><head><title>Page</title></head><body></body></html>" > index.html - 然后在资源管理器里右键该文件 →
Reveal in Explorer，双击打开即可编辑 - 注意：命令中用的是英文双引号和半角符号，中文引号或全角符号会导致写入失败
装了插件也别依赖“一键生成”，小心模板过时或乱码
像 Auto Rename Tag、Ember Snippets 这类插件确实能输 !+Tab 插入 HTML5 模板，但实际用起来容易翻车：
- 部分老插件生成的仍是
<html lang="en">但没<meta charset="UTF-8">，中文会乱码 - 某些插件默认用
utf8而不是UTF-8（大小写敏感），浏览器可能不认 - 如果你在项目里用
Vite或Webpack，它们自带的index.html模板已有特定结构（比如含<div id="app">），插件生成的反而要删改 - 建议只在全新静态页面起步时用，且生成后立刻检查
<meta charset>和<title>是否符合当前需求
保存路径不对，file:// 协议下相对路径照样 404
新建完 index.html，双击用浏览器打开，发现图片、CSS 加载失败？大概率是文件没放在合理目录里。
立即学习“前端免费学习笔记（深入）”；
- 浏览器通过
file://协议打开本地 HTML 时，所有src和href都按**文件系统相对路径**解析，不是“当前项目根目录” - 比如你在桌面建了
index.html，又把style.css放进同级的css/文件夹，链接必须写：<link rel="stylesheet" href="css/style.css"> - 如果误把
index.html存在C:\Users\Name\根目录，而资源在子文件夹里，路径很容易错一层 - 开发阶段更推荐用 VS Code 的
Live Server插件右键启动——它起的是http://127.0.0.1:5500/，路径解析更接近真实部署环境
