新建HTML文件只需两步：右键新建文件并命名为index.html（必须带.html后缀），或Ctrl+N后Ctrl+S保存为含.html的路径；再按!+Tab生成骨架前需确认右下角语言模式为HTML。
新建 .html 文件只需要两步，不是“新建项目”或“装插件”
VS Code 本身不区分“HTML 文件”和“文本文件”，它只认后缀名。只要你保存为 xxx.html，语法高亮、自动补全、实时预览（配合 Live Server）就自然生效。
常见错误是点「文件 → 新建文件」后直接敲代码，却不改后缀名——结果文件没后缀或成了 Untitled-1，VS Code 不知道该用 HTML 模式渲染，标签不着色、emmet 缩写也不触发。
- 右键资源管理器空白处 → 「新建文件」→ 输入
index.html（必须带.html） - 或快捷键
Ctrl+N（Windows/Linux）/Cmd+N（Mac）新建空白标签 →Ctrl+S保存 → 输入完整路径+名字，比如./pages/about.html - 别手动在输入框里只输
about就回车——系统默认不加后缀，你得自己敲.html
! + Tab 是最常用的 HTML 快速骨架，但得先确认语言模式
很多人按了 ! 再按 Tab 没反应，不是 Emmet 坏了，而是当前文件没被识别为 HTML。VS Code 右下角会显示当前语言模式（如 Plain Text），这时要手动点它，选 HTML。
一旦模式正确，! + Tab 会生成标准 <!DOCTYPE html> 结构；div.container>ul>li*3 + Tab 也能立刻展开。
立即学习“前端免费学习笔记（深入）”；
- 如果右下角显示的是
Plain Text或JSON，emmet默认禁用 - 语言模式不对时，即使文件名是
test.html，也可能因内容为空或含非法字符被误判 - 想永久避免这问题？新建后立刻敲个
<，VS Code 通常会自动切到HTML模式
Live Server 插件不是必须的，但不用它就看不到页面效果
双击打开 .html 文件，浏览器走的是 file:// 协议——此时 fetch 请求、import 模块、甚至部分 CSS 路径都会失败，报错像 Access to script at 'file:///...' from origin 'null' has been blocked。
Live Server 启动的是本地 http://127.0.0.1:5500/xxx.html，绕过浏览器的安全限制，这才是开发时的真实环境。
- 插件安装后，右键文件 → 「Open with Live Server」，不要双击文件图标
- 端口冲突时（比如 5500 被占），Live Server 会自动换一个，但地址栏 URL 会变，注意看右下角提示
- 关掉 VS Code 再重开，Live Server 不会自动重启服务，得再点一次
中文路径或空格会导致 Live Server 打不开，这是 Windows 用户高频翻车点
如果你的项目放在 D:\我的项目\demo\index.html，Live Server 启动后可能白屏，控制台报 GET http://127.0.0.1:5500/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/demo/index.html net::ERR_ABORTED ——URL 编码出问题，服务器根本找不到路径。
这不是 bug，是设计使然：HTTP 服务器对非 ASCII 路径支持差，尤其 Windows 下中文路径 + 空格组合极易触发。
- 解决方案很简单：把项目移到纯英文路径下，比如
C:\dev\my-demo\ - 路径中避免空格，
my project改成my-project或my_project - VS Code 资源管理器里看到路径有中文，哪怕只是文件夹名，也建议重命名
这些细节不解决，后面连引入 JS、加载图片都会陆续报错，而且错误信息藏得深，不如一开始就用干净路径。
