VS Code打开HTML文件不直接显示网页效果是因为它只是代码编辑器，需通过Live Server插件或python -m http.server启动本地HTTP服务才能正确加载资源并避免file://协议的跨域等问题。
VS Code 里打开 HTML 文件为啥不直接显示网页效果
VS Code 本身是代码编辑器，不是浏览器，index.html 双击或在侧边栏点开，看到的永远是源码——这是正常行为，不是你配置错了。想“可视化”，本质是启动一个本地服务或用浏览器打开该文件，VS Code 只能帮你快捷触发这件事。
Live Server 插件是最稳的可视化方案
它起一个轻量本地服务器（比如 http://127.0.0.1:5500），自动刷新、支持相对路径、能正确加载 CSS/JS/图片，比直接双击 file:// 协议靠谱得多。
- 必须安装官方认可的插件：
Live Server（作者是 Ritwick Dey） - 装完右键点击任意
.html文件 → 选Open with Live Server - 别用“Open in Default Browser”：它走
file://，跨域、模块导入、fetch本地 JSON 都会失败 - 端口冲突时，它会在右下角弹提示，点进去可改配置项
liveServer.settings.port
不用插件？命令行 python -m http.server 也行
适合临时验证、没装插件、或需要更干净环境的情况。但要注意 Python 版本和路径问题：
- Python 3.x：终端进 HTML 所在目录，运行
python -m http.server 8000 - Python 2.x（不推荐）：用
python -m SimpleHTTPServer 8000 - 必须在含
index.html的目录下执行，否则 404 - 访问地址是
http://localhost:8000，不是file://路径 - 这个方法不自动刷新，改完 HTML 得手动按 Ctrl+R
为什么双击 HTML 文件总出问题
因为系统用默认浏览器以 file:// 协议打开，这带来一堆隐形限制：
立即学习“前端免费学习笔记（深入）”；
- CSS 中的
@import或字体url()可能被拦截 -
fetch('./data.json')直接报跨域错误（即使同目录） - ES Module（
import）在file://下根本无法工作 - 某些浏览器（如 Chrome）会静默禁用本地 AJAX，连控制台都不报错，只卡住
这些不是 VS Code 的锅，是浏览器安全策略。只要看到页面空白、样式丢失、控制台一堆红色 CORS 或 net::ERR_FILE_NOT_FOUND，基本就能确定是掉进 file:// 坑里了。
真正麻烦的不是怎么打开，而是很多人改完代码后反复双击、清缓存、换浏览器，却没意识到问题根子在协议上。只要切到 http:// 环境，90% 的“不显示”就消失了。
