安装vscode并打开应用；2. 通过菜单、拖拽或命令行打开html文件；3. 新建文件并保存为.html格式编写代码；4. 使用Live Server插件或浏览器手动预览效果，实现高效开发。
在 visual studio Code（简称 VSCode）中打开和编辑 HTML 文件非常简单，适合初学者快速上手网页开发。下面是一份完整的操作指南，帮助你顺利使用 VSCode 打开、查看和编辑 HTML 文件。
1. 安装并启动 VSCode
如果你还没有安装 VSCode，请先完成以下步骤：
- 前往官网 https://code.visualstudio.com 下载对应系统的安装包（windows、macos 或 linux）
- 运行安装程序，按提示完成安装
- 安装完成后，打开 VSCode 应用
2. 打开已有的 HTML 文件
你可以通过以下几种方式打开一个现有的 HTML 文件：
方法一：通过菜单打开文件
- 点击顶部菜单栏的 “文件” → “打开文件”
- 在弹出的窗口中找到你要打开的 .html 文件，选中后点击“打开”
- 文件将在编辑器中显示，支持语法高亮和代码提示
方法二：直接拖拽文件到 VSCode 窗口
- 找到你电脑上的 HTML 文件（例如 index.html）
- 用鼠标将其拖动到 VSCode 的编辑区域，松开即可打开
方法三：通过命令行打开（可选进阶）
- 打开终端或命令提示符
- 输入 code 文件名.html（例如：code index.html）
- 如果文件存在，VSCode 会自动打开它
3. 创建新的 HTML 文件
如果你想从头开始写一个 HTML 文件，可以这样做：
立即学习“前端免费学习笔记（深入）”；
- 在 VSCode 中点击 “文件” → “新建文件”
- 输入你的 HTML 代码，例如：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>我的第一个网页</title> </head> <body> <h1>欢迎使用 VSCode 编写 HTML</h1> </body> </html>
- 点击顶部菜单的 “文件” → “另存为”
- 选择保存位置，并将文件命名为 index.html（注意后缀必须是 .html）
- 点击“保存”即可
4. 实时预览 HTML 效果
VSCode 本身不带浏览器功能，但你可以通过以下方式查看页面效果：
方法一：使用 Live Server 插件（推荐）
- 点击左侧活动栏的扩展图标（方块形状）
- 搜索 Live Server，由 Ritwick Dey 开发的插件
- 点击“安装”
- 安装完成后，右下角会出现 “go Live” 按钮
- 点击“Go Live”，系统会用默认浏览器打开当前 HTML 文件
- 修改代码后，浏览器会自动刷新，实时看到变化
方法二：手动在浏览器中打开
- 右键点击 HTML 文件，在资源管理器中选择“在浏览器中打开”
- 或直接双击文件，用浏览器打开查看效果
基本上就这些。掌握这些操作后，你就可以用 VSCode 高效地编写和调试 HTML 页面了。工具简洁，功能强大，非常适合前端学习和项目开发。