1.5 VSCode 基础操作
在这一节课中，你将会学习到一些VSCode的基本操作以及HTML的基本文件管理。
首先，我们需要在你常用的位置创建一个名为Code的文件夹意代码文件夹，我们通常选择在Windows的D盘或者MACOS的文稿中创建。接下来，在这个目录下创建一个名为HTML的文件夹意为这是HTML代码，其次，在HTML目录下再创建一个名为Basic的文件夹意为HTML.Basic的学习代码。
现在，我们完成了文件夹的创建，开始进行第一个文件的编写。不同于以往右键新建文件的模式，在HTML的学习中，我们需要用VSCode进行创建。那么接下来，打开VSCode选择点击上方菜单栏的“文件”选择“打开...”并选择我们刚刚创建好的代码文件夹（Code）。
当文件夹打开后，选择上一步“文件”中的“将工作区另存为...“并且保存。建议保存在桌面以便下一次打开使用。工作区的意义就是省去每次打开文件夹的苦恼，并且可以一次性保存多个不同位置的文件夹。
现在，我们需要了解VSCode的基础结构，其结主要构图如下：
在资源管理器中，我们可以查看工作区中的所有文件。在代码区中我们可以进行编程，在预览区中可以查看文件的缩略图，而在标签区中可以查看我们所有打开的网页。提到标签区在这里需要进行一些解释。VSCode和网页浏览器一样，一次可以打开多个网页并且进行查看和编辑。在这里也是一样的，大家可以同时打开多个文件来回切换。
现在，我们把目光移动到资源管理器中。在资源管理器里，我们可以点击文件夹的名称展开文件夹或者对文件夹进行操作。我们先选中刚刚创建的HTML文件夹。在这里我们可以发现一个有趣的事情。原来我们在HTML下还创建了一个Basic文件夹，但是在这里不见了，只剩下一个“HTML/Basc”文件夹。这是因为VSCode识别到我们在HTML下只有一个文件夹，所以直接帮你打开了这个文件夹。
接下来，在我们打开文件夹后点击资源管理器右上角图标：
红色：在当前选中目录下新建一个文件；
黄色：在当前选中目录下新建一个文件夹；
蓝色：刷新；
绿色：关闭所有已展开目录；
底下蓝色框选中的则是当前选中目录。
现在，我们选中Basic文件夹新建一个名为index.html的文件
接下来，打开这个文件，在代码区输入:
html:然后系统会自动联想到html:5（下图红色圈出来的地方）这时候我们按下回车，会自动输入html:5
随后，我们就会发现我们输入的html:5变成了一段代码：
<!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文件的创建，下一节课我们将会学习上面创建出来的这个文件的作用和具体讲解。
最后更新于
这有帮助吗？