02 HTML语法规范及基本结构标签（狗子前端系列之HTML5）

本文链接：https://blog.csdn.net/qq_38650754/article/details/109616248

本文介绍HTML的基本语法规范、结构标签及其使用方法。包括文档类型声明、基本结构标签如<html>、<head>、<title>、<body>等的作用及写法，并涉及开发工具VSCode的简单使用。

摘要由CSDN通过智能技术生成

02 HTML语法规范及基本结构标签

1 HTML语法规范

1.1 基本语法规范概述

HTML 标签是由尖括号包围的关键词，例如 <html>。
标签分类
1. 双标签：HTML标签通常成对出现，例如 <html> 和 </html> ，由开始标签和结束标签构成
2. 单标签：有些特殊的标签必须是单个标签（极少情况），例如<br />

1.2 标签关系

双标签关系分为两类

包含关系
```
<head>
    <title> </title>
</head>
```
并列关系
```
<head> </head>
<body> </body>
```

2 HTML 基本结构标签

2.1 基本结构标签

每个网页都会有一个基本结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	head标签中必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主题	元素包含文档的所有内容，页面内容基本都是放到body里面的

<!DOCTYPE html>
<html lang="en">
<html>根控制标记（头）
    <head> 头控制标记（头）
    	<meta charset="UTF-8">
        <title>标题</title> 标题标记
    </head> 头控制标记（尾）
    <body>
        网页显示区域（一般要实现的代码都在这里写）
    </body>
</html>根控制标记（尾）

2.2 文档类型声明标签

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
<!DOCTYPE>不是一个 HTML 标签，它就是文档类型声明标签。
<!DOCTYPE html> 表示当前页面采取HTML5版本来显示网页

2.3 <html>标签的lang属性

用来定义当前文档显示的语言。
1. en定义语言为英语
2. zh-CN定义语言为中文

2.4 head区的meta标签

meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。
标签的属性定义了与文档相关联的名称/值对。
meta元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
字符集
1. 字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
2. 在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
```
<meta charset="UTF-8" />
```