HTML标签及网页开发工具的使用（VSCode）

article/2025/10/2 20:34:46

一、HTML语法规范

1.1所有的标签都应该包括在<>里面，如<html>或</html>等，大部分的标签都是成对出现的，<>里没/的为开始标签，<>里有/的为结束标签，因为这些标签是成对出现的，所以也被称为双标签。

也有的是单个存在的，又被称为单标签，如<br />等，但是但标签比较少，所以可以重点的单独去记忆。

1.2标签关系

双标签关系分为两类，一类为包含关系，一类为并列关系。

<head><title></title>
</head>

<head>和<title>就为包含关系（包含关系也可以看作是父子关系）如下图：

<html><head></head><body></body>
</html>

<head>和<body>就属于并列关系（并列关系也可以看作是兄弟关系）如下图：

二、HTML基本结构标签

1、每个网页都会有一个基本的结构标签（也被称为骨架标签）

<html><head><title>我的第一个网页</title></head><body>乾坤未定，你我皆是黑马</body>
</html>

<html>标签把所有的标签都包括在里面，所以html标签是页面中最大的标签，也被称为根标签。

<head>标签是页面的头部标签。

<title>部分是网页标题，也可以叫文档标题。

<body>标签是网页的主体部分，网页中的内容基本上都是放在这个部分里面。

最后我们通过一个图来了解一下他们之间的具体关系：

html可以看成小猪佩奇，head看成是小猪佩奇的头部，title可以看成是小猪佩奇的眼睛，因为眼睛属于头的一部分，所以head和title属于包含关系，body可以看成是小猪佩奇的身体，，因为head和body构成了html，所以可以head和body属于并列关系。

三、网页的开发工具

以VSCode为例：VSCode的使用

1、双击打开软件。

2、新建文件（Ctrl+N）

3、保存（Ctrl+S），注意要保存为.html文件

4、Ctrl+加号键，Ctrl+减号键，可以放大缩小视图

5、生成页面骨架结构：

输入！按下Tab键。

6、利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击“Open In Default Browser”。