课程简介

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

知识普及什么是 “IDE”

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

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

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

内置解释器与编译器；

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

前端开发IDE

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

安装 VSCode 开发工具下载与安装访问官网：前往 Visual Studio Code 官方网站。下载安装包：选择适合你操作系统的版本（Windows、macOS 或 Linux）。安装：按照提示完成安装过程。配置 VSCode安装扩展：Live Server：实时预览 HTML 页面。HTML CSS Support：提供 HTML 和 CSS 支持。Bracket Pair Colorizer：为括号着色，提高可读性。设置偏好：设置主题：选择你喜欢的编辑器主题（如深色或浅色）。快捷键：根据个人习惯调整快捷键设置。三、创建第一个 HTML 页面创建新文件新建文件：在 VSCode 中选择 File > New File。保存文件：将文件保存为 index.html。编写 HTML 代码基本结构：

<meta charset="UTF-8">
<title>我的第一个网页title>
<h1>欢迎来到我的网页h1>
<p>这是我的第一个网页，我很高兴能够学习HTML。p>
<ul>
    <li>爱好1li>
    <li>爱好2li>
    <li>爱好3li>
ul>
<a href="http://example.com">访问示例网站a>
<img src="转存失败，建议直接上传图片文件 path/to/image.jpg" alt="描述性文字转存失败，建议直接上传图片文件">

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