必须用 Live Server 插件启动 HTTP 服务（如 http://127.0.0.1:5500）运行 HTML 项目，因浏览器禁止 file:// 协议下的 fetch、import、相对路径跳转等现代 Web 功能；双击打开或右键“在浏览器中打开”均无效。
VSCode 本身不内置浏览器运行能力，Live Server 插件是新手最稳、最省事的本地运行方案——它自动起一个带热更新的本地服务，保存即刷新，不用反复右键“在浏览器中打开”。
为什么不能直接双击 HTML 文件运行？
双击打开会走 file:// 协议，很多现代前端功能（比如 fetch 请求本地 JSON、某些 CSS 模块化行为、Service Worker）会被浏览器直接拦截或失效。开发阶段必须走 http:// 或 https:// 协议。
- 常见现象：
fetch("data.json")报错CORS policy: "file://" protocol is not allowed - 真实场景：哪怕只是读一个本地
.json配置，也得有 HTTP 服务支撑 - 替代方案（不推荐新手）：
python -m http.server 8000或npx serve，但要记命令、开终端、手动刷新
安装并启用 Live Server 插件
这是目前 VSCode 上最主流的 HTML 运行插件，维护活跃、零配置、支持热重载。
- 打开 VSCode 左侧扩展图标（或按
Ctrl+Shift+X） - 搜索
Live Server，认准作者是Ritwick Dey（官方推荐插件） - 点击 Install，安装完成后无需重启
- 打开任意
.html文件，右下角状态栏会出现Go Live按钮，点它即可启动服务 - 首次点击会自动在默认浏览器打开
http://127.0.0.1:5500/xxx.html
保存后页面不自动刷新？检查这三点
Live Server 默认开启热更新，但新手常因以下原因失效：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
Live Server没真正启动：确认右下角有绿色Go Live文字，不是灰色；没点过就只是静态文件打开 - 你改的是其他未被服务托管的文件：比如在项目根目录外新建了一个
test.html，再点Go Live，它只会服务当前打开的文件所在文件夹 - 浏览器缓存干扰：按
Ctrl+F5强制硬刷新一次，或打开开发者工具（F12）→ Network → 勾选 “Disable cache”
用 !+Tab 快速生成 HTML 骨架，别手敲
VSCode 内置 Emmet 支持，! 是 HTML5 文档模板缩写，比手动写 <html><head><title></title></head><body></body></html> 快得多。
- 在空文件中输入
!，然后按Tab或Enter（不是回车键 Enter，是 Tab 键更稳定） - 会自动生成包含
<meta charset="UTF-8">和<meta name="viewport">的标准结构 - 注意：这个快捷只在
.html文件且语言模式为HTML时生效（右下角应显示HTML，不是Plain Text）
真正容易被忽略的是：Live Server 启动后，路径里带端口号（如 :5500），所有相对资源引用（img/src、link/href、script/src）都基于该服务根目录解析——和双击打开时的文件系统路径逻辑完全不同，这点直接影响图片加载和 CSS 生效。
