首先安装vscode并创建index.html文件，编写html结构后，推荐通过安装live server插件实现实时预览，保存后右键选择“open with live server”即可在浏览器中自动打开并实时更新页面效果。
在 Visual Studio Code（简称 VSCode）中编写和运行 HTML 文件非常简单，只需几个步骤即可快速预览页面效果。下面是一份清晰实用的操作指南。
1. 安装并配置 VSCode
确保你已经安装了最新版的 Visual Studio Code。如果还没有安装，可以前往官网下载并完成安装。
安装完成后，打开软件，准备开始编写 HTML。
2. 创建和编写 HTML 文件
操作步骤：- 在 VSCode 中点击“文件” → “新建文件”（或使用快捷键 Ctrl+N）
- 将文件保存为 .html 后缀，例如：
index.html（点击“文件” → “另存为”） - 输入基础 HTML 结构，例如：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>我的第一个网页</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
3. 运行 HTML 预览页面
VSCode 本身不内置浏览器，但可以通过以下两种常用方式运行 HTML：
立即学习“前端免费学习笔记（深入）”；
方法一：使用 Live Server 插件（推荐）- 在左侧扩展面板中搜索 Live Server
- 安装由 Ritwick Dey 开发的插件
- 保存 HTML 文件后，右键编辑器中的代码，选择“Open with Live Server”
- 浏览器会自动打开并显示页面，且支持实时刷新（修改代码后页面自动更新）
- 右键保存好的 HTML 文件，在资源管理器中找到它
- 双击该文件，系统默认浏览器将打开并显示网页内容
4. 提高效率的小技巧
- 使用 Emmet 快速生成结构：输入
!然后按 Tab 键，自动生成完整 HTML 模板 - 启用自动保存：文件 → 自动保存，避免忘记保存导致无法刷新
- 使用多光标、代码高亮等功能提升编码体验
基本上就这些。只要写好 HTML 文件，配合 Live Server 插件，就能在 VSCode 中高效开发和实时查看效果。整个过程不复杂，但容易忽略插件的使用，建议新手优先安装 Live Server。
