使用live server插件可实现实时预览，安装后右键html文件选择“open with live server”即可在浏览器中自动打开并实时刷新页面。
如果您在使用 Visual Studio Code 编辑 HTML 和 CSS 文件时，发现无法实时查看页面效果，可能是因为缺少合适的运行环境或配置。以下是几种在 VSCode 中高效运行和预览 HTML 与 CSS 的方法：
一、使用 Live Server 插件
Live Server 是一个广受欢迎的 VSCode 扩展，能够启动本地开发服务器并支持实时刷新功能，非常适合前端开发。
1、打开 VSCode，点击左侧活动栏的扩展图标（方块形状），进入扩展市场。
2、在搜索框中输入 Live Server，找到由 Ritwick Dey 开发的插件并点击“安装”。
立即学习“前端免费学习笔记（深入）”；
3、安装完成后，打开一个包含 HTML 文件的项目。
4、右键点击目标 HTML 文件，在上下文菜单中选择“Open with Live Server”。
5、默认浏览器将自动打开，并显示当前页面内容，任何对 HTML 或 CSS 的修改都会自动刷新页面以反映最新更改。
二、通过内置调试器运行 HTML
利用 VSCode 内置的调试功能结合 Chrome 或 Edge 浏览器，可以直接从编辑器启动并调试网页。
1、确保系统中已安装 Google Chrome 或 Microsoft Edge 浏览器。
2、在 VSCode 中按下 Ctrl+Shift+P 打开命令面板，输入“Debug: Open launch.json”，选择“创建 launch.json 文件”。
3、选择环境为 Chrome 或 Edge，VSCode 将生成一个基础的调试配置文件。
4、修改配置中的 "file" 字段，指向您的 HTML 文件路径，例如 "${workspaceFolder}/index.html"。
5、保存文件后，切换到运行视图（左侧活动栏虫子图标），点击“运行”按钮即可在浏览器中加载页面。
三、直接在浏览器中手动打开 HTML 文件
对于简单的静态页面测试，无需启动服务器也可快速预览，适用于仅包含 HTML 和 CSS 的项目。
1、在 VSCode 中右键点击 HTML 文件，选择“Copy Path”或“复制路径”。
2、打开 Chrome 或其他现代浏览器，在地址栏粘贴文件路径，前面加上 file:// 协议，如 file://C:/project/index.html。
3、按回车键加载页面，此时可查看 HTML 与 CSS 渲染效果。
4、每次修改代码后需手动刷新浏览器以查看更新。
四、集成终端执行简易 HTTP 服务
通过 Node.js 的 http-server 工具，可在项目目录快速搭建临时服务器进行预览。
1、确保计算机已安装 Node.js，可在终端执行 node -v 验证是否安装成功。
2、在 VSCode 中打开集成终端（Ctrl + `），输入命令 npm install -g http-server 安装全局工具。
3、进入项目根目录，执行 http-server 命令启动服务。
4、终端将显示本地访问地址，通常是 http://127.0.0.1:8080。
5、在浏览器中打开该地址，即可查看带有 CSS 样式的完整页面，支持热更新。
