live server插件通过本地http服务实现html实时预览，支持保存即刷新，避免file://协议导致的跨域、模块导入失败等问题；推荐优先使用，替代方案包括python或node.js简易服务器。
用 Live Server 插件实时预览 HTML
VS Code 本身不带浏览器渲染功能，必须借助插件或外部工具打开 HTML 文件才能看到效果。最常用、最稳的方式是安装 Live Server 插件——它起一个本地 HTTP 服务，自动在默认浏览器中打开页面，并支持保存即刷新。
- 安装后右键点击 HTML 文件 → 选择
Open with Live Server，就会自动打开http://127.0.0.1:5500/xxx.html - 改完代码按
Ctrl+S（Windows/Linux）或Cmd+S（macOS），页面会自动刷新，无需手动切换标签页 - 注意：不能直接双击 HTML 文件用
file://协议打开——某些功能（如fetch、模块导入、相对路径资源）会因跨域或协议限制失效 - 如果项目有
index.html，Live Server 默认优先打开它；否则会打开当前活动文件
为什么不用“直接在浏览器中打开”？
双击 HTML 文件，浏览器地址栏显示的是 file:///.../index.html，这种 file:// 协议下，现代浏览器出于安全策略，会禁用很多 Web API：
-
XMLHttpRequest和fetch请求本地 JSON 文件会报CORS error或net::ERR_FILE_NOT_FOUND -
importES 模块会触发Failed to load module script - 某些 CSS 路径（尤其是
../回退）在file://下解析异常，但走http://就正常 - 开发 Vue/React/Vite 等前端框架时，完全无法启动
替代方案：命令行起简易服务器
没装插件，或想脱离 VS Code 环境验证时，可以用系统自带的命令快速起服务：
- Python 3 用户：终端进入 HTML 所在目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000 - Node.js 用户：全局安装
http-server（npm install -g http-server），再运行http-server -p 8080 - 注意端口冲突：如果 5500/8000/8080 已被占用，换一个数字即可，比如
-p 3000
常见坑：改了 HTML 却没刷新？
不是所有“刷新”都等于重载最新代码。以下情况会导致你看到的还是旧页面：
立即学习“前端免费学习笔记（深入）”；
- 浏览器缓存了 HTML 或 JS/CSS——强制刷新（
Ctrl+Shift+R或Cmd+Shift+R）可绕过缓存 - Live Server 没真正监听到文件变化（尤其在 WSL 或网络盘路径下）——把项目移到本地 NTFS/macOS APFS 分区再试
- HTML 中引用了绝对路径资源（如
/css/style.css），而服务根目录不对——检查浏览器开发者工具的Network标签页，看哪些请求 404 - VS Code 的文件没真正保存（右下角状态栏显示“未保存”），或者用了自动保存但延迟未触发
http:// 下暴露，file:// 反而“碰巧”能跑——别被它骗了。 
