怎么用vscode写html并运行_vscode写html及运行完整步骤【教程】-html教程-PHP中文网

怎么用vscode写html并运行_vscode写html及运行完整步骤【教程】

看不見的法師

发布： 2025-12-05 18:52:02

原创

478人浏览过

答案：使用VSCode写HTML并运行需安装软件、创建文件、安装Live Server插件，通过右键“Open with Live Server”启动本地服务器，浏览器自动预览并实时刷新，支持高效开发调试。

怎么用vscode写html并运行_vscode写html及运行完整步骤【教程】

用 VSCode 写 HTML 并运行并不复杂，只需简单配置和操作就能快速预览网页效果。下面是一套完整、实用的步骤，适合新手快速上手。

1. 安装 VSCode 并配置基础环境

先确保你已经安装好 Visual Studio Code（简称 VSCode）：

访问官网 https://code.visualstudio.com/ 下载并安装 VSCode。
安装完成后打开软件，界面简洁，支持中文更佳（可在扩展中搜索“Chinese”安装语言包）。

2. 创建 HTML 文件

接下来创建你的第一个 HTML 文件：

新建一个项目文件夹，比如命名为 my-website。
在 VSCode 中点击【文件】→【打开文件夹】，选择刚创建的文件夹。
在侧边栏右键 →【新建文件】，输入 index.html。
输入以下基础 HTML 结构：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>我的第一个网页</title>
</head>
<body>
  <h1>Hello, VSCode!</h1>
  <p>这是一段测试文字。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</body>
</html>

登录后复制

保存文件（Ctrl + S）。