vscode本身不运行html，需借助插件或命令通过浏览器打开；live server支持热重载和本地服务器，open in browser仅静态预览；新建html文件输入!后按tab可自动生成标准模板。
VSCode 本身不自带 HTML 运行功能，必须靠插件或终端命令启动浏览器打开文件；直接双击 .html 文件或拖进浏览器也能看，但没热更新、没本地服务支持，开发中不推荐。
新建 HTML 文件时快速生成基础模板
在 VS Code 中新建一个 .html 文件后，第一行输入 !（英文感叹号），然后按 Tab 键，编辑器会自动展开为标准 HTML5 模板（含 、<code>、 和 结构）。
- 这个行为依赖于内置的 Emmet 功能，无需额外安装插件，但需确保文件语言模式是
HTML（右下角状态栏显示 “HTML”，不是 “Plain Text”） - 如果按
Tab没反应，检查是否关闭了 Emmet：设置里搜emmet.triggerExpansionOnTab，确认值为true - 不要手动敲完整模板——容易漏
meta charset或viewport，导致中文乱码或响应式失效
运行 HTML 必须装的两个插件选哪个
常见选择是 Open in Browser 和 Live Server，它们解决的是不同问题：
-
Open in Browser：单次打开，适合静态页面预览。右键 →Open in Default Browser，或快捷键Alt+B（Windows/Linux）/Option+B（macOS）。它只是调用系统默认浏览器打开本地file://路径，无服务器、无刷新监听 -
Live Server：起一个本地 HTTP 服务（如http://127.0.0.1:5500/xxx.html），保存文件后自动刷新页面，支持 AJAX、相对路径资源加载、CORS 等真实 Web 场景。右键 →Open with Live Server - 初学阶段建议优先装
Live Server——哪怕只写一行<p>hello</p>，也能养成“走 HTTP 协议”的习惯，避免后期遇到fetch失败、图片 404 才去查路径问题
不装插件也能运行，但有硬限制
VS Code 内置终端可绕过插件直接打开 HTML，命令因系统而异：
- Windows：终端中执行
start HelloWorld.html - macOS：执行
open HelloWorld.html - Linux：执行
xdg-open HelloWorld.html - ⚠️ 注意：这些命令都走
file://协议，无法加载fetch('/api')、import模块、或任何需要服务端响应的特性 - 更隐蔽的问题是：某些现代浏览器（如 Chrome 120+）对
file://下的localStorage、indexedDB有更严策略，本地测试可能和线上行为不一致
容易被忽略的细节：文件路径与编码
即使模板生成正确、插件也装了，仍可能白屏或乱码，关键在两点：
- 确保文件保存时编码为
UTF-8（VS Code 右下角点击编码名 → 选Save with Encoding→UTF-8），否则中文注释或内容会显示为方块 - 所有引用资源（如
<img src="pic.jpg">、<script src="main.js"></script>）必须和 HTML 文件在同一文件夹，或使用正确相对路径；Live Server的根目录是当前打开的文件夹，不是 HTML 文件所在子目录 - 如果用
Live Server后图片仍 404，先在浏览器地址栏看请求路径是不是多了一级/subfolder/xxx.html—— 那说明你打开的是子文件夹，应通过“文件 → 打开文件夹”选最外层项目目录
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
