vs code 新建 html 文件本质是创建带 .html 后缀的空文本文件，需手动添加 等基础结构才能触发语法高亮、emmet 展开和 live server 正常工作。
VS Code 里新建 HTML 文件，本质就是建个 .html 后缀的空文件
VS Code 本身不提供“HTML 项目模板”或“向导式新建”，它只管文件系统操作。你新建的是一个普通文本文件，后缀写成 .html，再手动加个基础结构（比如 ），它就立刻被识别为 HTML——语法高亮、标签补全、Live Server 都会自动生效。
常见错误现象：
– 新建文件没输后缀，保存后是 Untitled-1，打开没高亮，也不响应 HTML 插件
– 输了 .htm 或 .HTML（大写），部分插件或本地服务可能识别不稳定（尤其 Windows 下大小写不敏感但工具链有时敏感）
- 右键资源管理器空白处 → “新建文件” → 输入名字，**必须包含
.html**（例如index.html） - 快捷键
Ctrl+N（Win/Linux）或Cmd+N（Mac）新建空白标签页 → 按Ctrl+S保存 → 在弹出框中输入完整路径+名字，**结尾明确写.html** - 保存后，左下角状态栏会显示当前语言模式；如果没自动变成
HTML，点一下那里，手动选Change Language Mode→ 选HTML
为什么新建完要手动加 和基本结构？
VS Code 默认新建的是纯文本，不是 HTML 文档。没有 ，浏览器会进入怪异模式（Quirks Mode），CSS 布局、JS 行为都可能和预期不一致；没有 <code>，很多 Emmet 展开（比如输入 ! + Tab）根本不会触发。
使用场景：
– 本地快速验证一段 HTML/CSS/JS，不需要构建工具
– 学生写作业、做小 demo，图快不搭脚手架
立即学习“前端免费学习笔记（深入）”；
- 新建并保存为
test.html后，在编辑器里直接输入!，按Tab（前提是启用了 Emmet，默认开启）→ 自动展开为完整 HTML5 骨架 - 如果
!不生效，检查设置里emerald.emmet.triggerExpansionOnTab是否为true，且当前语言模式确实是HTML - 别依赖复制粘贴旧模板：不同项目对
<meta charset>、<viewport></viewport>要求不同，手敲一遍能顺手确认编码和响应式基础
用 Live Server 插件预览时，路径不对打不开？
Live Server 默认只服务当前工作区（folder）根目录下的文件。如果你在子文件夹里新建了 page.html，直接右键 → “Open with Live Server”，它启动的地址是 http://127.0.0.1:5500/subfolder/page.html，但如果你在 subfolder 外打开，或者路径含中文/空格，就容易 404 或跳转失败。
性能 / 兼容性影响：
– Live Server 是轻量 Node 服务，无构建，适合静态页；但不处理 @import CSS、ES6 import 等，需另配工具
– 如果项目里有多个 HTML 文件，每个都单独右键启动，会开多个端口，端口冲突时提示“address already in use”
- 确保 VS Code 左侧资源管理器顶部显示的是你期望的服务根目录（即“打开文件夹”选对了）
- 右键文件 → “Open with Live Server” 之前，先确认该文件已保存（未保存的临时文件无法被服务）
- 避免路径含中文、空格、特殊符号（如
我的页面.html或new page.html），改用英文下划线（my_page.html）最稳妥
新手常忽略的两个细节：编码声明和文件关联
VS Code 默认用 UTF-8 编码保存文件，但如果你从别处复制代码进来，或用了老旧编辑器存过，文件开头可能混入 BOM（字节顺序标记），导致 HTML 中文乱码或 JS 报错 Uncaught SyntaxError: Invalid or unexpected token；另外，有些用户把 .html 文件双击用 IE 打开，结果看到的是源码而不是渲染效果——这不是 VS Code 的问题，而是系统默认打开方式没设对。
- 检查文件编码：右下角状态栏点
UTF-8→ 选Reopen with Encoding→UTF-8（不是 UTF-8 with BOM） - 确认文件关联：右键
xxx.html→ “属性” → “打开方式” → 设为 Chrome / Edge / Firefox，而非记事本或 IE - Live Server 启动后，地址栏 URL 必须是
http://开头，不是file://；后者不支持 fetch、模块加载等现代 Web API
