答案：使用VSCode写HTML并运行需安装软件、创建文件、安装Live Server插件，通过右键“Open with Live Server”启动本地服务器，浏览器自动预览并实时刷新，支持高效开发调试。
用 VSCode 写 HTML 并运行并不复杂，只需简单配置和操作就能快速预览网页效果。下面是一套完整、实用的步骤，适合新手快速上手。
1. 安装 
VSCode 并配置基础环境
先确保你已经安装好 Visual Studio Code（简称 VSCode）：
- 访问官网 https://code.visualstudio.com/ 下载并安装 VSCode。
- 安装完成后打开软件，界面简洁，支持中文更佳（可在扩展中搜索“Chinese”安装语言包）。
2. 创建 HTML 文件
接下来创建你的第一个 HTML 文件：
- 新建一个项目文件夹，比如命名为 my-website。
- 在 VSCode 中点击【文件】→【打开文件夹】，选择刚创建的文件夹。
- 在侧边栏右键 →【新建文件】，输入 index.html。
- 输入以下基础 HTML 结构：
我的第一个网页
Hello, VSCode!
这是一段测试文字。
保存文件（Ctrl + S）。
3. 安装插件提升效率（推荐）
让写代码更高效，建议安装以下常用插件：
-
Live Server：最核心的插件，可一键启动本地服务器并实时刷新页面。
- 安装方法：点击左侧扩展图标（方块图标），搜索 “Live Server”，点击【安装】。
4. 运行 HTML 页面预览效果
有两种方式运行查看网页：
方法一：使用 Live Server（推荐）
- 右键点击编辑器中的 index.html 文件。
- 选择【Open with Live Server】。
-
浏览器会自动打开 http://127.0.0.1:5500/index.html，显示网页内容。
- 修改代码保存后，页面会自动刷新，极大提升开发效率。
方法二：直接用浏览器打开（简单但无热更新）
- 在资源管理器中右键 index.html →【在资源管理器中显示】。
- 找到该文件，双击用默认浏览器打开即可。
- 缺点是修改代码后需手动刷新浏览器。
5. 调试与检查页面
和所有网页一样，你可以按 F12 打开开发者工具，查看元素、调试样式或 JS 错误。
- 在浏览器中右键 →【检查】即可进入 DevTools。
- VSCode 本身不运行 JavaScript，但配合浏览器可完整测试前端功能。
基本上就这些。写 HTML + Live Server 预览，是前端开发最基础也最常用的流程。掌握这套组合，你就可以开始练习网页布局、引入 CSS 和 JavaScript 了。
VSCode 并配置基础环境