1- 开发环境概述

• 学习 HTML 和 CSS 不需要复杂的环境配置，只需要一个现代浏览器和一个代码编辑器即可。
• 本节课将引导你完成 Google Chrome 浏览器和 VS Code 编辑器的安装和配置。

2- 安装 Google Chrome 浏览器

网址:https://www.google.com/intl/zh-CN/chrome/

• 推荐原因： Chrome 浏览器是前端开发的常用浏览器，它拥有强大的开发者工具，方便我们调试代码。
• 下载：
  • 请从 Google Chrome 官方网站下载安装包，确保安全。
• 安装步骤：
  • 下载完成后，双击安装包，按照提示进行安装，和其他软件安装过程一样。
• 设置为默认浏览器：
  • 安装过程中，Chrome 会提示是否设置为默认浏览器，建议设置为默认浏览器。
• 温馨提示：
  • 本课程不再演示 Chrome 浏览器的安装过程，请自行完成安装。

3- 选择代码编辑器

• 编辑器作用： 代码编辑器是编写代码的工具，它提供代码高亮、自动补全等功能，可以提高开发效率。
• 推荐 VS Code：
  • VS Code 是一款轻量级、功能强大的免费代码编辑器，非常适合前端开发。
  • 它支持多种语言，有丰富的扩展插件，可以满足各种开发需求。
• 选择 VS Code 的原因：
  • 为了照顾新手，本课程选择使用 VS Code，它更加轻便，占用内存更少。
• 其他选择：
  • PyCharm： 如果你同时进行 Python 开发，PyCharm 专业版也是一个不错的选择，它也支持前端开发。
  • WebStorm： WebStorm 是另一款专业的 Web 开发 IDE，与 PyCharm 同属 JetBrains 公司产品，但 PyCharm 专业版已经包含 WebStorm 的所有功能，无需重复安装。

4- 安装 VS Code 编辑器

• 下载：
  • 请从 VS Code 官方网站下载安装包。
  • 网址:https://code.visualstudio.com/
• 安装步骤：
  • 下载完成后，双击安装包，按照提示进行安装，和其他软件安装过程一样。
• 温馨提示：
  • 本课程不再演示 VS Code 的安装过程，请自行完成安装。

5- VS Code 初始配置

• 打开 VS Code：
  • 安装完成后，打开 VS Code。
• 关闭欢迎界面：
  • 首次打开 VS Code 时，可能会出现欢迎界面，请关闭它。
• 语言包提示：
  • 如果你的操作系统语言是中文，VS Code 会提示是否安装中文语言包。
  • 个人建议： 为了提高英语能力，建议使用英文界面，遇到不认识的单词查阅一下，可以当做学习英语。

6- 创建 HTML 项目文件夹

• 创建文件夹：
  • 在你的电脑磁盘中，选择一个合适的位置，创建一个文件夹，用来存放你的 HTML 代码。
• 使用 VS Code 打开文件夹：
  • 方式一： 点击 VS Code 左上角的 “File” (文件) -> “Open Folder” (打开文件夹)，选择刚刚创建的文件夹。
  • 方式二： 点击 VS Code 左侧的 “Explorer” (资源管理器) 图标，展开后点击 “Open Folder” (打开文件夹)，选择刚刚创建的文件夹。
  • 方式三： 直接将文件夹拖拽到 VS Code 窗口。
• 信任文件夹：
  • VS Code 会弹出提示，询问是否信任该文件夹中的文件作者，勾选 " 信任父文件夹内所有文件作者 "，然后点击 " 信任 "。

7- 在 VS Code 中创建文件

• 新建文件夹：
  • 在 VS Code 的资源管理器中，鼠标右键点击空白区域，选择 “New Folder” (新建文件夹)，例如创建一个名为 01html概述 的文件夹。
• 新建文件：
  • 选中 01html概述 文件夹，鼠标右键点击该文件夹，选择 “New File” (新建文件)，创建一个名为 第一个网页.html 的文件。
• 文件后缀名：
  • 文件后缀名决定了文件的类型和打开方式。
  • HTML 文件的后缀名是 .html，浏览器默认会用它打开。
• 文件和文件夹操作：
  • 在资源管理器中，可以对文件和文件夹进行右键操作，包括删除、重命名等。

8- 总结

• 本节课我们学习了 HTML 和 CSS 开发环境的搭建。
• 我们安装了 Google Chrome 浏览器和 VS Code 编辑器，并创建了第一个 HTML 项目文件夹。