安装与使用网页开发工具

12002

1. 本课介绍

在应用开发的入门课程中，你会用到以下这些工具：

谷歌浏览器：作为一款主流浏览器，谷歌浏览器提供了强大的开发者工具，帮助你调试网页、查看页面结构和样式，并支持最新的Web标准。
Visual Studio Code（简称 VS Code）：VS Code是一款功能强大的代码编辑器，支持HTML、CSS和JavaScript等多种语言，你可以用它来创建网页文件。

这些工具可以被安装在Windows电脑或者Mac电脑上。在接下来的章节中，我们会以Windows电脑为例，教你安装这些工具。如果你已经会安装或使用这些工具，可以跳过安装的部分。

此外，在这一课里，你还会学习如何阅读教程文档，好快速掌握编程知识的基本框架。

2. 安装谷歌浏览器

方法一：在谷歌官网下载安装

点击谷歌官网下载链接
在“下载和安装 Google Chrome”这一节下，找到“计算机”标签页下的“如何安装 Chrome”这一部分，点击“Windows”，展开操作说明。
按照操作说明，进行安装。

方法二：通过腾讯电脑管家下载安装
你需要先下载安装腾讯电脑管家这一工具：

点击腾讯电脑管家下载链接打开腾讯电脑管家的官网。这个网页会自动检测你的电脑是不是Windows系统，你可以直接点击“立即下载”下载安装包。
下载完成以后，在电脑上的“下载”文件夹里，找到刚刚下载的安装包，双击安装包开始安装。
按照操作提示、选择默认选项，进行安装即可。
安装后，你会在桌面上看到“腾讯电脑管家”的图标，双击就可以打开腾讯电脑管家了。

接下来，你需要通过腾讯电脑管家的“软件管理”功能，搜索并安装谷歌浏览器：

在打开的腾讯电脑管家的左边栏中，选择“软件管理”
选择“宝库”，在搜索框中，搜索“谷歌浏览器”，你会看到“谷歌浏览器稳定版”这个结果，点击这个结果右侧的“安装”按钮，就可以开始安装了。
按照操作提示、选择默认选项，进行安装即可。
安装后，你会在桌面上看到“谷歌浏览器”的图标，双击就可以打开谷歌浏览器了。

在后面的课程中，我们会使用谷歌浏览器，来查看我们所编写的网页，并且学习使用浏览器自带的开发者工具，检查网页的内容和查看程序的输出结果。

3. 安装VS Code

方法一：在VS Code官网下载安装

点击这个链接打开VS Code官网的下载页面
点击Windows系统下的下载按钮，开始下载安装包。
下载完成以后，在电脑上的“下载”文件夹里，找到刚刚下载的安装包，双击安装包开始安装。
按照操作提示、选择默认选项，进行安装即可。

方法二：通过腾讯电脑管家下载安装
你可以通过腾讯电脑管家的“软件管理”功能，搜索并安装VS Code：

在打开的腾讯电脑管家的左边栏中，选择“软件管理”
选择“宝库”，在搜索框中，搜索“VS Code”，你会看到“Visual Studio Code”这个结果，点击这个结果右侧的“安装”按钮，就可以开始安装了。
按照操作提示、选择默认选项，进行安装即可。

安装后，你会在桌面上看到“Visual Studio Code”的图标，双击就可以打开VS Code了。

4. 配置VS Code与创建文本文件

配置中文显示
打开VS Code，你会看到当前的页面是英文的。如果你对英文不熟悉的话，你可以设置VS Code的语言显示。

具体方法，可以参考这一篇文章

创建文本文件
文本文件是最简单的存储文本信息的文件格式，它的文件名都以.txt结尾。你可以使用VS Code创建文本文件：

在VS Code窗口上方的菜单栏里，依次选择“文件”、“新建文本文件”，打开编辑窗口
在编辑窗口中，输入“Hello World”。然后保存文件。输入文件名为：“第一个文本文件.txt”。第一个文本文件就创建好了。

保存文件的方法

方法1：在菜单栏里，依次选择“文件”、“保存”，然后在弹窗里选择文件夹，输入文件名，就可以保存了。
方法2：直接按快捷键Ctrl+S，就可以保存了。

管理文件的方法

各从其类管理好课程的文件。
方法：新建专门用于存放课程文件的大文件夹，例如新建文件夹为"应用开发002课程"，在大文件夹里再创建子文件夹，例如新建子文件夹"002-01课"，把每节课所用的文件放在里面，这样容易找到课程对应的文件。

5. 浏览菜鸟教程网站

菜鸟教程是一个提供编程的基础技术教程的网站，内容非常全面。学习编程，必须学会读文档。在本课程中，你会学习如何阅读菜鸟教程等网站上的教程和文档，帮助你快速建立编程的知识框架，并扩展你对编程知识的理解、丰富你的编程技能。

菜鸟教程网址

浏览菜鸟教程，注意以下的内容：

菜鸟教程都提供哪些编程技术的教程？
在菜鸟教程首页上，选择“【学习HTML】”，进入HTML的教程，你可以看到哪些主要内容？
HTML的定义是什么？主要功能是什么？
在页面的左边栏，都有哪些内容？

读文档，最重要的就是先建立框架。上面的提示就是帮助你了解一个网站的文档的主要框架的。不仅是学习HTML，学习任何其他一中编程技术，也都需要按照这样的方法，了解主要的知识框架。一旦你建立了这个知识框架，再学习细节内容，思路就会更加清晰。

## 1. 本课介绍

在应用开发的入门课程中，你会用到以下这些工具：

- 谷歌浏览器：作为一款主流浏览器，谷歌浏览器提供了强大的开发者工具，帮助你调试网页、查看页面结构和样式，并支持最新的Web标准。
- Visual Studio Code（简称 VS Code）：VS Code是一款功能强大的代码编辑器，支持HTML、CSS和JavaScript等多种语言，你可以用它来创建网页文件。

这些工具可以被安装在Windows电脑或者Mac电脑上。在接下来的章节中，我们会以Windows电脑为例，教你安装这些工具。如果你已经会安装或使用这些工具，可以跳过安装的部分。

此外，在这一课里，你还会学习如何阅读教程文档，好快速掌握编程知识的基本框架。

## 2. 安装谷歌浏览器

**方法一：在谷歌官网下载安装**
- 点击[谷歌官网下载链接](https://support.google.com/chrome/answer/95346)
- 在“下载和安装 Google Chrome”这一节下，找到“计算机”标签页下的“如何安装 Chrome”这一部分，点击“Windows”，展开操作说明。
- 按照操作说明，进行安装。

**方法二：通过腾讯电脑管家下载安装**
你需要先下载安装腾讯电脑管家这一工具：
- 点击[腾讯电脑管家下载链接](https://guanjia.qq.com/) 打开腾讯电脑管家的官网。这个网页会自动检测你的电脑是不是Windows系统，你可以直接点击“立即下载”下载安装包。
- 下载完成以后，在电脑上的“下载”文件夹里，找到刚刚下载的安装包，双击安装包开始安装。
- 按照操作提示、选择默认选项，进行安装即可。
- 安装后，你会在桌面上看到“腾讯电脑管家”的图标，双击就可以打开腾讯电脑管家了。

接下来，你需要通过腾讯电脑管家的“软件管理”功能，搜索并安装谷歌浏览器：
- 在打开的腾讯电脑管家的左边栏中，选择“软件管理”
- 选择“宝库”，在搜索框中，搜索“谷歌浏览器”，你会看到“谷歌浏览器 稳定版”这个结果，点击这个结果右侧的“安装”按钮，就可以开始安装了。
- 按照操作提示、选择默认选项，进行安装即可。
- 安装后，你会在桌面上看到“谷歌浏览器”的图标，双击就可以打开谷歌浏览器了。

在后面的课程中，我们会使用谷歌浏览器，来查看我们所编写的网页，并且学习使用浏览器自带的开发者工具，检查网页的内容和查看程序的输出结果。

## 3. 安装VS Code

**方法一：在VS Code官网下载安装**
- 点击这个链接打开VS Code官网的[下载页面](https://code.visualstudio.com/Download)
- 点击Windows系统下的下载按钮，开始下载安装包。
- 下载完成以后，在电脑上的“下载”文件夹里，找到刚刚下载的安装包，双击安装包开始安装。
- 按照操作提示、选择默认选项，进行安装即可。

**方法二：通过腾讯电脑管家下载安装**
你可以通过腾讯电脑管家的“软件管理”功能，搜索并安装VS Code：
- 在打开的腾讯电脑管家的左边栏中，选择“软件管理”
- 选择“宝库”，在搜索框中，搜索“VS Code”，你会看到“Visual Studio Code”这个结果，点击这个结果右侧的“安装”按钮，就可以开始安装了。
- 按照操作提示、选择默认选项，进行安装即可。

安装后，你会在桌面上看到“Visual Studio Code”的图标，双击就可以打开VS Code了。

## 4. 配置VS Code与创建文本文件

**配置中文显示**
打开VS Code，你会看到当前的页面是英文的。如果你对英文不熟悉的话，你可以设置VS Code的语言显示。

具体方法，可以参考这[一篇文章](https://blog.csdn.net/danshiming/article/details/132110419#comments_31186672)

**创建文本文件**
文本文件是最简单的存储文本信息的文件格式，它的文件名都以`.txt`结尾。你可以使用VS Code创建文本文件：
- 在VS Code窗口上方的菜单栏里，依次选择“文件”、“新建文本文件”，打开编辑窗口
- 在编辑窗口中，输入“Hello World”。然后保存文件。输入文件名为：“第一个文本文件.txt”。第一个文本文件就创建好了。

**保存文件的方法**
- 方法1：在菜单栏里，依次选择“文件”、“保存”，然后在弹窗里选择文件夹，输入文件名，就可以保存了。
- 方法2：直接按快捷键`Ctrl+S`，就可以保存了。

**管理文件的方法**
- 各从其类管理好课程的文件。
- 方法：新建专门用于存放课程文件的大文件夹，例如新建文件夹为"应用开发002课程"，在大文件夹里再创建子文件夹，例如新建子文件夹"002-01课"，把每节课所用的文件放在里面，这样容易找到课程对应的文件。

## 5. 浏览菜鸟教程网站
菜鸟教程是一个提供编程的基础技术教程的网站，内容非常全面。学习编程，必须学会读文档。在本课程中，你会学习如何阅读菜鸟教程等网站上的教程和文档，帮助你快速建立编程的知识框架，并扩展你对编程知识的理解、丰富你的编程技能。

[菜鸟教程网址](https://www.runoob.com/)

浏览菜鸟教程，注意以下的内容：
- 菜鸟教程都提供哪些编程技术的教程？
- 在菜鸟教程首页上，选择“【学习HTML】”，进入HTML的教程，你可以看到哪些主要内容？
- HTML的定义是什么？主要功能是什么？
- 在页面的左边栏，都有哪些内容？

读文档，最重要的就是先建立框架。上面的提示就是帮助你了解一个网站的文档的主要框架的。不仅是学习HTML，学习任何其他一中编程技术，也都需要按照这样的方法，了解主要的知识框架。一旦你建立了这个知识框架，再学习细节内容，思路就会更加清晰。