网页设计基础 第二讲：安装与配置 VSCode 开发工具，创建第一个 HTML 页面

课程简介

本节课将详细介绍如何安装和配置 Visual Studio Code（简称 VSCode），并使用它创建第一个 HTML 页面。通过实际操作，学生将学会基本的开发环境设置，并动手编写简单的网页。

知识普及

什么是 “IDE”

IDE 是集成开发环境的英文缩写 （Integrated Development Environment)，集成开发环境就是将在开发过程中所需要的工具或功能集成到了一起，比如：代码编写、分析、编译、调试等功能，从而最大化地提高开发者的工作效率。

IDE 通用特点： 提供图形用户界面，在 IDE 中可以完成开发过程中所有工作；

支持代码补全与检查，并提供快速修复选项；

内置解释器与编译器；

功能强大的调试器，支持设置断点与单步执行等功能。

前端开发IDE

而在前端开发中我们需要安装一个“趁手”的IDE，帮助我们更快更高效的开发，一个好的IDE是每个程序员的必备武器。前端开发IDE有很多种，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

安装 VSCode 开发工具

1. 下载与安装 访问官网：前往 Visual Studio Code 官方网站。 下载安装包：选择适合你操作系统的版本（Windows、macOS 或 Linux）。 安装：按照提示完成安装过程。

2. 配置 VSCode 安装扩展(插件)：

• HTMLHint:用于检测并提示潜在的代码问题和错误
• view in browser:快速查看 HTML 文件在浏览器中的效果
• HTML CSS Support:提升 HTML 文件的 CSS 支持功能
• Auto Rename Tag:用于自动重命名 HTML 或 XML 标签
• Live Server：实时预览 HTML 页面。
• HTML CSS Support：提供 HTML 和 CSS 支持。
• Bracket Pair Colorizer：为括号着色，提高可读性。
• 设置偏好：
• 设置主题 主题下载：推荐下载五星级，选择你喜欢的编辑器主题（如深色或浅色）。 marketplace.visualstudio.com/search?targ…
  
  
  Snazzy Operator

• 快捷键：根据个人习惯调整快捷键设置。

1. 快速打开文件：ctrl+p
2. 快速跳转到行：ctrl+g
3. 选中多行：ctrl+shift+l
4. 复制当前行：ctrl+shift+c
5. 剪切当前行：ctrl+shift+x
6. 格式化代码：ctrl+shift+f
7. 注释代码：ctrl+shift+/
8. 生成html模板 shift+!+enter(!+tab键)

1. 创建新文件 新建文件：在 VSCode 中选择 File > New File。 保存文件：将文件保存为 index.html。
2. 编写 HTML 代码 基本结构：

我的第一个网页

• 预览 HTML 页面 使用 Live Server 插件： 安装完成后，点击底部状态栏中的 "Go Live" 按钮。 浏览器将自动打开并显示你的 HTML 页面。
• 调试与修改 查看效果：观察页面的实际效果，并根据需要进行调整。 保存更改：每次修改后保存文件，页面会自动刷新。 通过这一讲，学生将学会如何使用 VSCode 进行网页设计，并亲手创建一个简单的 HTML 页面。这将为后续学习打下坚实的基础。