一、HTML语法规则
HTML 标签是由尖括号包围的关键词，例如<html>。
- 围堵标签（双标签）： 有开始标签和结束标签。如
<html> </html> - 自闭合标签（单标签）： 开始标签和结束标签在一起。如
<br/>
标签的关系
双标签关系可以分为两类：包含关系和并列关系
包含关系：
<head>
<title> </title>
</head>
并列关系：
<head> </head>
<body> </body>
需要正确嵌套，不能你中有我，我中有你
- 错误：
<a><b></a></b> - 正确：
<a><b></b></a>
在开始标签中可以定义属性。
属性是由键值对构成，值需要用引号(单双都可)引起来。
html的标签不区分大小写，但是建议使用小写。
文字和文字之间的多个空格、换行会被折叠成一个空格，标签“内壁”和文字之间的空格会被忽略。
常用转义字符：
| 转义字符 | 描述 |
|---|---|
< |
小于号 |
> |
大于号 |
|
空格（不会被折叠） |
© |
版权符号© |
二、HTML注释
为代码书写清晰的注释是非常重要的，可以使日后再阅读代码或者他人阅读代码提供提示
HTML的注释语法如下，可以在VScode编辑器中使用ctrl+/键输入
<!-- -->
三、文档类型声明DTD
HTML文件第一行必须是DTD（Document Type Definition，文档类型声明），不写DTD会引发浏览器的一些兼容问题，不同版本的HTML有不同的DTD写法。
HTML5：
<!DOCTYPE html>
HTML4.01严格版：
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01过渡版：
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01框架版：
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
四、HTML基本结构标签
4.1 <html>标签
HTML标签是页面中最大的标签，一般称为根标签lang属性用来定义当前文档显示的语言。zh表示中文，不改也行。
lang 语言种类：
- en定义语言为英语
- zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为 zh-CN 就是中文网页。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
4.2 <head>和<body>标签
<head></head>标签是网页的配置，不要认为是网页的头部。<body></body>标签对儿中书写网页的内容，包括网页的头部、主要内容、页脚等各个部分。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
五、字符集
字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定 HTML 文档应该使用哪种字符编码。
| 标签 | 描述 |
|---|---|
<meta> |
表示网页的基础配置 |
<meta>标签属性 |
描述 |
|---|---|
charset |
字符集 |
UTF-8 |
charset的值 charset 常用的值： GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符 |
<!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>
| 字符集 | 涵盖字符 | 1个汉字字节数 | 适用场景 |
|---|---|---|---|
| UTF-8 | 涵盖全球所有国家、民族的文字和大量图形字符 | 3 | 制作有非汉字文字的网页 |
| gb2312 (gbk) | 收录所有汉字字符（包括简体、繁体）和英语、少量韩文、日语和少量图形字符 | 2 | 制作只有汉语和英语的网页，由于1个汉字仅占2字节，网页文件尺寸明显减少 |
无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签：
<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">
注意：
<meta charset=" UTF-8">是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8" 。
Live Server插件不支持gb2312（gbk）字符集，只支持UTF-8字符集
六、标题标签<title>
<title> 标签用来设置网页的标题，文字会显示在浏览器的标签栏上，title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的。
放在<head>标签中。
<title>我的第一个网页</title>
七、网页关键词和页面描述
SEO（Search Engine Optimization，搜索引擎优化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益合理设置网页的网页的关键词和页面描述，也是SEO的重要手段。
使用<meta>标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能
- name的值为
Keywords时，意思是关键词 - name的值为
Description时，意思是描述
<meta name="Keywords" content="北京，beijing，首都">
<meta name="Description" content="北京是我国首都">
八、标题标签 <h1> ~ <h6>
h系列标签表示“标题”语义，h是headline的意思，搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容放到<h1></h1>中，比如网页的logo等。<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊。
<h1>北京简介</h1>
<h2>北京历史</h2>
<h3>建国前历史</h3>
<h3>建国后历史</h3>
<h2>北京旅游</h2>
<h3>五A级景点</h3>
<h3>四A级景点</h3>
九、段落标签 <p>
<p></p>标签表示段落标签，p是英语paragraph的意思，任何段落都要放到<p></p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到<p></p>中。<p></p>标签中不能嵌套h系列标签和其他p标签。
特点： 文本在一个段落中会根据浏览器窗口的大小自动换行。 段落和段落之间保有空隙。
<p>1949年之后，对北京城池进行了大规模的拆除工作。朝鲜战争期间，为便于疏散民众，在内城城墙上增开了东四十条、小街、新街口等豁口。</p>
<p>北京城池遗存的只有正阳门城楼、箭楼，德胜门箭楼，东南角楼，内城护城河北段，以及北京站和西便门两处城墙残余，另外永定门被重建。</p>
十、换行标签
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>
<br/>是个单标签，只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
