HTML5基础——1、配置VSCode

  大家好，我是阿赵。接下来一起学习一下H5网页制作。
  第一篇比较简单，主要来装一下工具。在20多年前，阿赵刚开始制作网页的时候，都流行用Dreamweaver配合flash来制作网页。现在只要VSCode就可以了。

一、 体验用VSCode生成一个简单网页

  Visual Studio Code，简称VSCode，是一个跨平台的代码编辑器，比较轻量化，而且支持很多插件，而且是免费的。各位自行找到下载并安装即可。

  安装完之后，按道理是英文的，至于怎样汉化后面会说。这里先简单的体验一下用VS制作一个基础的网页。
  先找到新建文件的按钮：

  这里我建一个叫做TestH5.html文件。注意，刚安装VSCode的时候，有可能你的图标并不会跟随着文件类型而变化，这个后面会讲。

  在这个空文件输入一个感叹号，会看到出来2个提示：

  选择第一个感叹号，然后VSCode就自动帮我们生成了一个HTML文件的模版的：

  接下来在body里面加一些内容：

  然后打开这个html文件，可以看到，现在我们有了第一个网页，他会显示Hello world了：

二、 VSCode插件安装

  VSCode的插件，都在测栏的这个图标里面：

  点开之后，会看到阿赵我已经装了很多插件：

  然后也可以在上面搜索自己想要的插件。

  插件虽多，我们其实选择自己用得到的就行。所以我介绍几个感觉用得上的。

1、 中文语言包

  搜索chinese，会看到有中文的简繁体可以选择，选择中文(简体)，安装。

  装完之后视情况重启一下VSCode。应该界面就变成中文了。

2、 文件图标显示

  搜索icon，会看到vscode-icons，安装。

  安装完之后，一些常用的文件会自动显示对应的图标

3、 实时预览

  搜索live server，并且安装。
安装完之后，在文件编辑内容界面鼠标右键：

  会发现有一个Open with Live Server的选项。在配置了默认浏览器之后，VSCode将会用默认浏览器打开当前的html文件。

  然后我们在不关闭这个浏览器的情况下，修改html文件：

  刚才打开的网页内容也会立刻实时的变化：

三、 VSCode快捷键

1、 复制一行

  光标停在一行上时，按Shift+Alt+上下箭头键，可以复制当前光标所在的行：

2、 选中多个相同的单词

  先选择一个单词，然后按Ctrl+D，每按一下，将会选择一个和之前选择一样的单词：

  这时候可以批量修改相同的单词

3、 添加多个光标

  鼠标先选择一个地方，这时候光标在闪烁，然后按Ctrl+Alt+上下箭头键，会在上下行的同样位置插入光标：

  这时候可以批量的插入新内容：

4、 全局替换单词

  按快捷键Ctrl+H，会打开查找替换窗口，可以全局替换想要的单词：

5、 快速定位行

  按快捷键Ctrl+G，会打开行号跳转输入，可以输入自己想跳转的行号，VSCode会定位到指定的行号：

6、 选择一个区块

  按快捷键Shift+Alt，然后拖动鼠标，可以同时选择多行的某个区域：

7、 放大缩小界面

  按快捷键Ctrl+加减号，可以放大或者缩小整个界面：

8、 注释

Ctrl+/
或者
Shift+Alt+a

9、 自定义快捷键

  VSCode还有非常多的快捷键，可以自己去设置——键盘快捷方式里面查看或者修改：