VSCode 写 HTML 文档

一、VSCode 的使用

1.1 软件的下载和基本的 html 文件创建

VSCode 下载可以去VSCode官网下载
新建文件，该文件名和和文件格式为.html即可

在新建的 html 文件中输入 ! 接着回车或按 Tab 键即可生成网页骨架。

<!-- 输入 ! 回车可快速生成下面骨架 -->
<!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>

修改网页的< title > 和 < body > 标签为自己想修改的内容然后右键选择Open In Default Browser 在默认浏览器中打开，可能你的右键没有这个选项，需要安装插件。
觉得页面代码字体不合适可以通过 command + 加号键、和 command + 减号键调整字体大小。

1.2 VSCode 插件使用

插件安装方法，在最左边的是插件功能选择，之后再搜索框搜索插件名安装，重启 VSCode 即可生效。
推荐安装的插件
- Chinese(Simplified)Language Pack for VS Code：中文（简体）语言包
- Open in Browser：右键选择在浏览器中打开 html 文件，上面演示的功能
- JS-CSS-HTML Formatter：每次保存，都会自动格式化js、css 和 html 代码
- Auto Rename Tag：自动重命名配对的 HTML/XML 标签
- CSS Peek：追踪至样式
更多好用的插件希望大家相互推荐~

1.3 VSCode 工具生成的骨架标签新增的代码

文档类型声明标签 < !DOCTYPE >：告诉浏览器使用那种 HTML 版本来显示网页

< !DOCTYPE html > 表示当前页面采用的是 HTML5 版本来显示网页。< !DOCTYPE html > 不是一个 HTML 标签，它只是一个文档类型声明标签。
lang 语言种类：用来定义当前文档显示的语言

en 定义语言为英语，zh-CN 定义语言为中文。无论哪种都可以在网页里写中英文，都能正常显示，这个属性只用于浏览器翻译功能的判断而已。
字符集：是多个字符的集合，以便计算机能够识别和存储各种文字

在< head> 标签内，可以通过 < meta> 标签的 charset 属性来规定 HTML 文档使用的字符编码集。

charset 常用值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。

【注意】:上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。