使用live server插件可实现在vscode中实时预览html页面，安装后右键选择“open with live server”即可在浏览器中打开；也可手动保存文件后通过资源管理器双击html文件或在浏览器输入file路径访问；还可配置tasks.json任务，指定浏览器路径和html文件，通过运行任务自动启动浏览器预览。
如果您在使用 Visual Studio Code 编辑 HTML 文件，但无法直接查看页面效果，可以通过多种方式在浏览器中运行该文件。以下是几种常用的运行方法：
一、使用 Live Server 插件
Live Server 是 VSCode 中最受欢迎的插件之一，能够启动一个本地开发服务器，并支持实时刷新功能，适合开发过程中快速预览 HTML 页面。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按下 Ctrl+Shift+X）进入扩展商店。
2、在搜索框中输入 Live Server，找到由 Ritwick Dey 开发的插件并点击“安装”。
立即学习“前端免费学习笔记（深入）”；
3、安装完成后，右键点击编辑器中的 HTML 文件。
4、选择 Open with Live Server，系统将自动在默认浏览器中打开该页面。
二、手动在浏览器中打开 HTML 文件
此方法无需安装任何插件，适用于简单的静态页面测试，通过直接调用本地浏览器打开文件进行预览。
1、在 VSCode 中保存当前编辑的 HTML 文件，确保文件后缀为 .html。
2、右键点击文件资源管理器中的 HTML 文件，选择“在资源管理器中显示”（或类似选项）。
3、在系统文件夹中找到该文件，双击即可用默认浏览器打开。
4、也可复制文件的完整路径，在浏览器地址栏粘贴并回车访问，例如：file:///C:/project/index.html。
三、配置任务运行 HTML
通过自定义任务，可以实现在 VSCode 内部启动浏览器打开指定 HTML 文件，适合需要自动化流程的用户。
1、点击顶部菜单的“终端”，选择“运行任务”，再点击“配置任务”。
2、选择 create tasks.json file from template，然后选择“Others”模板。
3、在生成的 tasks.json 文件中，修改 command 字段为浏览器的执行路径，如 Chrome 的安装路径："C:\Program Files\Google\Chrome\Application\chrome.exe"。
4、在 args 数组中添加文件路径变量，例如："--new-window", "${workspaceFolder}/index.html"。
5、保存文件后，通过“运行任务”来执行该配置，浏览器将自动启动并加载页面。
