首先用浏览器打开html文件即可运行，具体步骤为：安装vscode并创建HTML文件，输入代码后保存，通过手动方式或Live Server插件在浏览器中预览，推荐使用Live Server实现修改后自动刷新，提升开发效率。
在 visual studio Code（简称 VSCode）中运行 HTML 代码，其实并不需要“编译”或“执行”过程，因为 HTML 是静态网页标记语言。你只需要用浏览器打开 HTML 文件即可查看效果。以下是详细的步骤和方法，帮助你在 VSCode 中顺利运行 HTML 代码。
1. 安装 VSCode 并配置基础环境
确保你已经安装了最新版本的 visual studio code。如果还没安装，可以前往官网（code.visualstudio.com）下载并安装。
安装完成后，打开 VSCode，无需额外配置即可编写 HTML 代码。
2. 创建并编写 HTML 文件
按照以下步骤创建你的第一个 HTML 文件：
立即学习“前端免费学习笔记（深入）”；
- 新建一个项目文件夹，例如命名为 my-website
- 在 VSCode 中打开该文件夹（菜单栏：文件 → 打开文件夹）
- 点击左上角的“新建文件”按钮，或使用快捷键 Ctrl + N
- 输入文件名，例如 index.html，VSCode 会自动识别为 HTML 文件
- 输入一段简单的 HTML 代码，例如：
<font face="Consolas, 'Courier New', monospace"> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>我的网页</title> </head> <body> <h1>Hello, VSCode!</h1> <p>这是我的第一个HTML页面。</p> </body> </html> </font>
3. 使用浏览器打开 HTML 文件
保存文件后（Ctrl + S），有以下几种方式在浏览器中运行/预览：
- 手动方式：右键点击文件资源管理器中的 index.html，选择“在资源管理器中显示”，然后双击该文件，系统默认浏览器会自动打开并显示页面。
- 拖拽方式：将 HTML 文件直接拖入 chrome 或 edge 浏览器窗口中查看。
- 地址栏输入：浏览器地址栏输入文件的本地路径，如：file:///D:/my-website/index.html
4. 使用扩展插件快速预览（推荐）
为了更高效地开发，建议安装 Live Server 插件，实现热更新预览。
- 点击左侧活动栏的扩展图标（或按 Ctrl + Shift + X）
- 搜索 Live Server，由 Ritwick Dey 开发，点击“安装”
- 安装完成后，回到 HTML 文件，右键选择“Open with Live Server”
- 浏览器会自动打开页面，并且当你修改代码并保存时，页面会自动刷新
这个功能极大提升前端开发效率，尤其适合练习 HTML、css 和 javaScript。
基本上就这些。不需要复杂的配置，只需写好代码，用浏览器打开就行。搭配 Live Server 插件后，体验更接近真实服务器环境。整个过程简单直观，适合初学者快速上手。