网页的基本结构

VScode中HTML的自动补全：

自动补全：例如标签 <h1></h1>

1.输入<h1>后其会自动给其补全

2. 进输入h1 + tab键

网页的基本结构：

网页的基本结构只需要在VScode当中输入：！+ 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>

解释：

<!DOCTYPE html>
DOCTYPE

~文档说明，用来申明当前网页的版本，此处表示当前网站是遵循HTML5规范

~DOC(document)是指文本的意思，文档就是网页，一个网页即是一个文档。

~TYPE是指类型的意思

<html lang="en">
~用于设置网页的语言的

<html></html>
html

~html是根标签，一个网页只有一个根标签，其他标签都应该在根目录下

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello!world</title>
</head>
head

~html的子元素

~网页的头部

~对网页进行设置和配置 ，不会在网页中显示

meta

~head的子元素，用来设置网页的元数据

~charset是告知浏览器此页面属于什么字符编码格式（可以理解为解决乱码的问题）

【常见的字符编码有：gb2312、gbk、unicode、utf-8。（百度自行了解）】

title

~head的子元素

~设置网页的标签，会在标签上显示

例如上方所示的 Hello!world 字样在浏览器中显示如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

~至于这行的意思是像素点的意思，暂时无需了解，可以自行搜索了解