安装Live Server插件并创建标准项目结构，通过右键“Open with Live Server”启动本地服务器，确保正确引用资源路径，可自动刷新预览HTML项目。
在 VSCode 中运行 HTML 项目并不需要复杂的配置，借助简单的插件和本地服务器即可快速预览网页效果。下面介绍如何正确配置并运行一个完整的 HTML 项目。
1. 安装必备插件：Live Server
VSCode 本身不内置浏览器运行环境，因此需要通过插件启动本地服务器来预览页面。
操作步骤：
- 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server
- 找到由 Ritwick Dey 开发的 “Live Server” 插件并安装
安装完成后，右键点击任意 HTML 文件时会出现 “Open with Live Server” 选项。
立即学习“前端免费学习笔记（深入）”；
2. 创建项目结构
一个典型的 HTML 项目建议有清晰的目录结构，便于管理和引用资源。
示例结构：
my-website/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── logo.png
确保 HTML 文件中正确引用了 CSS、JS 和图片路径，例如：
3. 启动 Live Server 运行项目
使用 Live Server 可以一键启动本地开发服务器，自动在浏览器中打开页面，并支持热重载（修改保存后自动刷新）。
启动方式：
- 打开项目中的 index.html
- 右键编辑器中的文件内容，选择 “Open with Live Server”
- 或者点击 VSCode 右下角状态栏的 “Go Live” 按钮
浏览器会自动打开 http://127.0.0.1:5500 并显示你的页面。
4. 配置默认启动页面（可选）
如果你的入口文件不是 index.html，可以通过配置让 Live Server 正确加载。
在项目根目录创建 .vscode/settings.json 文件：
{
"liveServer.settings.root": "/",
"liveServer.settings.file": "home.html"
}
这样 Live Server 会优先打开指定的 HTML 文件。
基本上就这些。只要安装 Live Server 插件，组织好文件结构，再通过右键“Open with Live Server”启动，就能顺利运行完整的 HTML 项目。修改代码后浏览器自动刷新，开发体验流畅。不复杂但容易忽略的是路径引用和服务器启动方式——用文件直接打开浏览器会有跨域问题，必须通过本地服务器运行。
