一、知识回顾（读完直接做下面的实践题）#

1. VS Code（Visual Studio Code）是 Microsoft 于 2015 年 4 月发布的代码编辑器；它对前端代码支持很强，也支持 C++、Java、Python、PHP、Go 等语言；官网是 https://code.visualstudio.com
2. 安装 VS Code 的两条注意事项：装到没有中文、不带空格的目录下；不仅要装软件，还得装插件
3. 课程资料里的安装包是 资料/2. VsCode/VSCodeUserSetup-x64-1.89.1.exe，版本 1.89.1（64 位）
4. 因为安装了 IDEA 快捷键映射插件，VS Code 的快捷键与 IDEA 一致（装了映射插件后 VS Code 原生默认键位会被改掉）
5. 课程 资料/4. 其他软件/ 里的两个配套工具：Snipaste 2.7（截图 + 贴图）、Sublime Text Build 3207（轻量文本编辑器）
6. 插件安装入口：左侧扩展图标（或 Ctrl+Shift+X），搜索插件名后 Install；课程明确装的是 IDEA 快捷键映射插件
7. 用 VS Code 写页面的流程：建英文名文件夹 → 文件 → 打开文件夹 → 新建 xxx.html 文件 → 写骨架 → Ctrl+S 保存 → 双击文件用浏览器打开
8. 路径不能带中文和空格的原因：后续 Maven、Node 等命令行工具解析路径时，遇到中文或空格容易解析失败（开发相关的软件和工程都放纯英文、无空格路径）

二、裸写题#

• 2-1 装好 VS Code 并检查环境（在电脑上操作，不需要练习文件） 要求：把 VS Code 装到一个没有中文、不带空格的目录下 → 装好插件（至少装 IDEA 快捷键映射）→ 确认版本号和安装位置 → 确认快捷键映射生效。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：安装 → 装插件 → 验证（版本 + 位置 + 键位）三步，每步都要能看到”证据” 二级 · 方法：安装时手动选目录（如 D:\develop\VSCode）；插件在扩展面板装；版本在”关于”里看；键位在”键盘快捷方式”里搜 三级 · 骨架：把看到的版本号、安装目录、插件列表截图（用 Snipaste 正好练一下），贴到自己的笔记里

  参考答案（做完再点开）

  2-1 检查清单： ① 安装目录：形如 D:\develop\VSCode，路径里没有中文、没有空格（用资源管理器地址栏复制路径核对）； ② 版本：菜单”帮助 → 关于”（或”文件 → 关于”）里应看到 1.89.1（跟课程一致）或你下载的版本号； ③ 插件：扩展面板的”已安装”里能看到 IDEA 快捷键映射插件（以及按需装的汉化、Live Server）； ④ 键位生效：“键盘快捷方式”设置里搜索”复制行”，看到它绑在 Ctrl+D 上说明映射插件生效了。

• 2-2 用 VS Code 写出第一个页面

  要求：不用记事本，全程在 VS Code 里完成——新建文件 01. 快速入门.html，写上 HTML 基本骨架，浏览器标签页显示”HTML快速入门”，页面上显示一行大标题”Hello HTML”；最后双击文件用浏览器打开验证。 （练习文件 test_04_第一个页面.html 里已经给出骨架和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：先建文件保存成 .html，再写骨架，最后用浏览器验证 二级 · 方法：文件 → 打开文件夹 → 新建文件 → Ctrl+S 保存；骨架用 <html>/<head>/<title>/<body>/<h1> 三级 · 骨架：在 .html 文件里输入 ! 按 Tab 可以自动生成骨架，再把 title 和 <h1> 换成自己的内容

  参考答案（做完再点开）

  1
  <!-- 告诉浏览器当前文档类型为HTML -->
  2
  <!DOCTYPE html>
  3
  <html lang="zh-CN">
  4
    <head>
  5
      <!-- 字符集 -->
  6
      <meta charset="UTF-8">
  7
      <title>HTML快速入门</title>
  8
    </head>
  9
    <body>
  10
      <h1>Hello HTML</h1>
  11
    </body>
  12
  </html>

  验证三个点：① VS Code 标签页上的小圆点消失＝已保存；② 浏览器标签页显示”HTML快速入门”（来自 <title>）；③ 页面正文显示大标题”Hello HTML”（来自 <h1>）。

三、综合题#

• 3-1 搭出课程的工程目录，并做一个”环境自检页”

  1. 在没有中文、不带空格的路径下建工程文件夹，例如 E:\Code\HTML-CSS
  2. 在工程文件夹里建子目录 img，随便放一张图片进去（可以自己用 Snipaste 截一张，命名成 1.png）
  3. 用 VS Code 打开这个文件夹，新建 index.html
  4. 页面结构（从上往下）：一级标题”我的前端开发环境” → 一行文字写编辑器名称和版本号 → 一行文字写安装目录 → 一行文字列出已装的插件 → 一张图片（用相对路径引用 img/1.png）
  5. 每一块内容前加一句 HTML 注释说明它是什么
  6. 保存后双击用浏览器打开，逐条核对页面上显示的内容和代码顺序一致 （练习文件 test_04_综合_环境自检页.html 里已经给出骨架和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：这是”建目录 + 写骨架 + 按顺序填内容 + 引图片”四件事的合体 二级 · 方法：<h1> 一级标题；<img src="img/1.png"> 相对路径引图；<!-- --> 注释；Ctrl+S 保存 三级 · 骨架：<html> → <head>（<meta charset="UTF-8"> + <title>）→ <body>（注释 + <h1> + 三行文字 + <img>）

  参考答案（做完再点开）

  目录结构：

  1
  E:\Code\HTML-CSS\          ← 纯英文、无空格
  2
    ├─ index.html
  3
    └─ img\
  4
      └─ 1.png

  1
  <!DOCTYPE html>
  2
  <html lang="zh-CN">
  3
    <head>
  4
      <meta charset="UTF-8">
  5
      <title>我的前端开发环境</title>
  6
    </head>
  7
    <body>
  8
      <!-- 一级标题 -->
  9
      <h1>我的前端开发环境</h1>
  10
      <!-- 编辑器与版本 -->
  11
      VS Code 1.89.1
  12
      <!-- 安装目录（不能有中文和空格） -->
  13
      安装目录：D:\develop\VSCode
  14
      <!-- 已安装的插件 -->
  15
      已装插件：IDEA 快捷键映射、Chinese (Simplified)、Live Server
  16
      <!-- 截图（相对路径：同级目录下的 img/1.png） -->
  17
      <img src="img/1.png">
  18
    </body>
  19
  </html>

  显示更多显示更少

  验证要点：① 三行文字在页面上的先后顺序和代码一致（浏览器从上往下渲染）；② 图片能显示，说明 img 相对路径写对了；③ 路径自检——工程路径、VS Code 安装路径里都没有中文和空格。