首先安装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 结构，例如：

  
  


  
Hello, World!

3. 运行 HTML 预览页面

VSCode 本身不内置浏览器，但可以通过以下两种常用方式运行 HTML：

• 在左侧扩展面板中搜索 Live Server
• 安装由 Ritwick Dey 开发的插件
• 保存 HTML 文件后，右键编辑器中的代码，选择“Open with Live Server”
• 浏览器会自动打开并显示页面，且支持实时刷新（修改代码后页面自动更新）

• 右键保存好的 HTML 文件，在资源管理器中找到它
• 双击该文件，系统默认浏览器将打开并显示网页内容

4. 提高效率的小技巧

• 使用 Emmet 快速生成结构：输入 ! 然后按 Tab 键，自动生成完整 HTML 模板
• 启用自动保存：文件 → 自动保存，避免忘记保存导致无法刷新
• 使用多光标、代码高亮等功能提升编码体验

基本上就这些。只要写好 HTML 文件，配合 Live Server 插件，就能在 VSCode 中高效开发和实时查看效果。整个过程不复杂，但容易忽略插件的使用，建议新手优先安装 Live Server。