# 1.5 VSCode 基础操作

在这一节课中，你将会学习到一些VSCode的基本操作以及HTML的基本文件管理。

首先，我们需要在你常用的位置创建一个名为Code的文件夹意代码文件夹，我们通常选择在Windows的D盘或者MACOS的文稿中创建。接下来，在这个目录下创建一个名为HTML的文件夹意为这是HTML代码，其次，在HTML目录下再创建一个名为Basic的文件夹意为HTML.Basic的学习代码。

现在，我们完成了文件夹的创建，开始进行第一个文件的编写。不同于以往右键新建文件的模式，在HTML的学习中，我们需要用VSCode进行创建。那么接下来，打开VSCode选择点击上方菜单栏的“文件”选择“打开...”并选择我们刚刚创建好的代码文件夹（Code）。

![](https://2074360502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MROe6Tz4bUJjgBoklsD%2F-MROv7qACs5JFGjbYeDz%2F-MRP0NJdcvulmP_DUAzl%2Fimage.png?alt=media\&token=8b04585e-d2d8-489e-b40d-2ff73710f3c3)

当文件夹打开后，选择上一步“文件”中的“将工作区另存为...“并且保存。建议保存在桌面以便下一次打开使用。工作区的意义就是省去每次打开文件夹的苦恼，并且可以一次性保存多个不同位置的文件夹。

现在，我们需要了解VSCode的基础结构，其结主要构图如下：

![](https://2074360502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MROe6Tz4bUJjgBoklsD%2F-MROv7qACs5JFGjbYeDz%2F-MRP1ahiQW6J1HgZY_hx%2Fimage.png?alt=media\&token=ed2e3843-901d-43c3-b15e-11c37beb4f02)

在资源管理器中，我们可以查看工作区中的所有文件。在代码区中我们可以进行编程，在预览区中可以查看文件的缩略图，而在标签区中可以查看我们所有打开的网页。提到标签区在这里需要进行一些解释。VSCode和网页浏览器一样，一次可以打开多个网页并且进行查看和编辑。在这里也是一样的，大家可以同时打开多个文件来回切换。

现在，我们把目光移动到资源管理器中。在资源管理器里，我们可以点击文件夹的名称展开文件夹或者对文件夹进行操作。我们先选中刚刚创建的HTML文件夹。在这里我们可以发现一个有趣的事情。原来我们在HTML下还创建了一个Basic文件夹，但是在这里不见了，只剩下一个“HTML/Basc”文件夹。这是因为VSCode识别到我们在HTML下只有一个文件夹，所以直接帮你打开了这个文件夹。

接下来，在我们打开文件夹后点击资源管理器右上角图标：

![](https://2074360502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MROe6Tz4bUJjgBoklsD%2F-MRPQIODUrBaZPxmMEeO%2F-MRPQKpsK42XV7Yq357W%2Fimage.png?alt=media\&token=5439c1ac-ce5e-4288-a43b-64212621e2c0)

红色：在当前选中目录下新建一个文件；

黄色：在当前选中目录下新建一个文件夹；

蓝色：刷新；

绿色：关闭所有已展开目录；

底下蓝色框选中的则是当前选中目录。

现在，我们选中Basic文件夹新建一个名为index.html的文件

![](https://2074360502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MROe6Tz4bUJjgBoklsD%2F-MRPQIODUrBaZPxmMEeO%2F-MRPR9x_l64QZ9VlITPG%2Fimage.png?alt=media\&token=0157c2e5-782c-42d1-8b13-4749e5e25701)

接下来，打开这个文件，在代码区输入:

```
html:
```

然后系统会自动联想到html:5（下图红色圈出来的地方）这时候我们按下回车，会自动输入html:5

![](https://2074360502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MROe6Tz4bUJjgBoklsD%2F-MRPQIODUrBaZPxmMEeO%2F-MRPRankVkktoizKThIK%2Fimage.png?alt=media\&token=0ae5a196-d33d-46e8-b39f-6c1f98720990)

随后，我们就会发现我们输入的html:5变成了一段代码：

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```

至此，我们已经完成了VSCode基础操作的学习和第一个HTML文件的创建，下一节课我们将会学习上面创建出来的这个文件的作用和具体讲解。
