vs code 点“运行”按钮没反应是因为缺少 live server 插件；安装后右键 html 文件选择“open with live server”或点右下角“go live”即可正常运行。
VS Code 里点“运行”按钮没反应？先确认你没装 Live Server
VS Code 本身不带 HTML 运行能力，点“打开在浏览器”或按 F5 默认会失败，常见报错是 Unable to launch browser 或直接静默。这不是你配置错了，是缺了关键插件。
Live Server 是最常用、最轻量的解决方案：它起一个本地 HTTP 服务，自动刷新，支持热更新，且不依赖 Node.js 全局环境（插件自带简易服务器）。
- 去 VS Code 扩展市场搜
Live Server，认准作者是Ritwick Dey的那个 - 安装后，右键 HTML 文件 → 选择
Open with Live Server，或点击右下角绿色「Go Live」按钮 - 别用
file://协议双击打开——很多 API（如fetch、localStorage在某些浏览器下）、相对路径、CORS 都会出问题
为什么不能直接用 F5 启动 HTML？
F5 是调试快捷键，默认调用 VS Code 的调试器，而 HTML 不是可执行语言，没有内置调试适配器。强行配 launch.json 不仅绕远，还容易触发 Cannot find runtime 'chrome' 或 Browser not found。
除非你真要断点调试 JavaScript，否则没必要走调试流程。Live Server 启动的是真实浏览器实例，F12 开发者工具照常可用，效率更高。
立即学习“前端免费学习笔记（深入）”；
- 如果非要 F5 调试 JS：需先装
Debugger for Chrome或Edge DevTools插件，并确保对应浏览器已安装 -
launch.json里url必须写成http://127.0.0.1:5500/xxx.html这类 HTTP 地址，不能写file:/// - 多数静态页面开发场景下，Live Server + 手动 F12 就够了，别给自己加戏
相对路径在 Live Server 下突然 404？检查根目录和 base 标签
Live Server 默认把当前打开的文件夹作为 Web 根目录（/），不是文件所在目录。比如你在 /project/src/index.html 里写 <img src="logo.png" alt="vscode怎么运行html_vscode编写运行HTML代码【教程】" >，它会去找 /project/logo.png，而不是 /project/src/logo.png。
这是最常被忽略的路径陷阱，尤其从双击打开切到 Live Server 后突然图片全挂。
- 确保资源路径相对于项目根目录写，或改用
./显式声明当前目录：<img src="./logo.png" alt="vscode怎么运行html_vscode编写运行HTML代码【教程】" > - 如果项目结构复杂，可在
里加<base href="./">锁定基准 URL - 不要依赖
__dirname或process.cwd()—— 浏览器里这些 Node.js 变量根本不存在
改完 HTML 没自动刷新？看右下角状态栏和端口是否冲突
Live Server 默认监听 :5500，如果该端口被占用（比如另一个 Live Server 实例、Python 的 http.server、甚至 Docker 容器），它会悄悄换端口（比如 :5501），但右下角按钮文字不会变，导致你以为没生效。
另外，自动刷新只监听当前工作区下的文件变更，如果你用符号链接、外部编辑器改了文件，或保存时用了“延迟写入”（如某些 IDE 的安全保存机制），也可能漏触发。
- 右下角点「Go Live」时留意状态栏显示的实际端口号，比如
http://127.0.0.1:5501 - 改完保存后，看浏览器地址栏是否跳转到了新端口；没跳就说明没启动成功
- 关闭所有其他占
:5500端口的进程，或在 Live Server 设置里改默认端口：liveServer.settings.port
