开发工具

VScode的使用

双击打开软件
新建文件（ctrl+N）
保存(ctrl+s)，保存为.html文件

Ctrl+加号键/减号键，可以放大缩小视图
生成页面骨架结构：

输入！——按下tab键

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

右键选择——Open In Other Browser（Alt+Shift+B）（插件：open in browser）

VScode工具生成骨架标签新增代码

<!DOCTYPE>标签
lang语言
charset字符集

4.3.1 文档类型声明标签

<!DPCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

页面采用HTML5来显示页面

注意：

<!DPCTYPE>位于文档中的最前面的位置，处于<html>标签之前。
<!DPCTYPE>不是一个HTML标签，是文档类型声明标签。

4.3.2 lang语言种类

用来定义当前文档显示的语言

<html lang="en">

1.en定义语言为英语——英文网页

2.zh-CN定义语言为中文——中文网页

4.3.3 字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。

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

<meta charset="UTF-8">

charset常用值：GB2312,BIG5,GBK和UTF-8。

UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

注：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用UTF-8编码，不要写成其他形式。

总结

以上三个代码Vscode自动生成，不需要我们重写。
<!DOCTYPE>文档类型声明标签——html5
<html lang='"en">
<meta charset="UTF-8">必须写，生命编码类型，采用UTF-8来保存文字。

VSCode插件安装

安装方法

1.打开VSCode，单击左侧菜单栏的扩展

2.在搜索栏中输入自己想要的插件的名称

3.在下方找到插件，点击安装即可。

代码实现

<!--* @Description: This is the fist page with VScode by HTML.* @Version: 1.0* @Author: Pomelocc0302* @Date: 2022-01-11 13:05:39* @LastEditors: Pomelocc0302* @LastEditTime: 2022-01-11 14:33:25
-->
<!DOCTYPE html><!-- 页面为html5类型 -->
<html lang="en"><!-- 语言类型 -->
<head><meta charset="UTF-8"><!-- 字符编码类型，防止页面乱码 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03-VScode First Page</title>
</head>
<body>尽我所能，做我所爱
</body>
</html>