博客大纲
HTML概述
HTML时一门标记语言，用于描述网页的形态，是一切网页开发的基础课程。
其内容量并不大，甚至有人玩笑到：”上午看的HTML，下午就能在简历中写精通HTML。“
本博客就讲述HTML中的大部分重要的知识。
标签的分类
HTML的代码是由各类标签构成的，而标签是由尖括号包围的关键词，例如<body>。
在HTML中，标签被分为两类，分别是双标签与单标签。
双标签：
双标签是指由一对标签组成，一个标签代表标签的开始，另一个标签表示标签的结束。例如
<p></p>，在后续我们会讲到，<p>标签表示一个段落，当一个段落结束，就需要在段落的末尾加上</p>，来表示当前段落的结束。单标签：
单标签是指只需要一个标签就可以完成其功能，单独出现的标签。此类标签一般无需标明其作用的范围，所以无需两个标签来限制范围。比如
<img>标签，此标签表示插入一张图片。
标签之间的关系
标签主要有两种关系，分别是嵌套关系与并列关系：
嵌套关系：
<head> <title> </title> </head>
嵌套关系就是，一个标签的整体在另一个标签中。
并列关系：
<head></head> <body></body>
而并列关系则是，两个标签之间没有发生包含，独立存在。
HTML基本结构
每个网页都会有一个基本的结构标签（也称为骨架标签），以下是HTML网页的基本结构：
<html> <head> <title>这是网页的标题</title> </head> <body> 这是网页的内容 </body> </html>
接下来我们解释以下标签：
| 标签 | 定义 | 作用 |
<html> </html> |
HTML标签 | 页面中最大的标签，也称为根标签 |
<head> </head> |
文档的头部 | 一个网页的开头，在head中必须有title标签，也可以承载后续的CSS样式 |
<title> </title> |
文档的标题 | 一个网页的标题 |
<body> </body> |
文档的主体 | 此标签内部包含网页的所有页面的内容 |
效果如下：
这四个标签是所有的网页文件都必须有的，在vscode中，可以使用Emmet语法，输入一个感叹号后按下Tab键位，就会自动为你生成HTML文件的骨架：
最终骨架：
<!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 html>表示：使用最新的html版本来解析代码。
注意：<!DOCTYPE>不是一个HTML标签，而是一个文档类型声明的标签，也因此它不放在<html>中。
<html lang="en"> 语言种类：
此处在html标签后的lang用于标识页面的语言种类。
en 表示页面的语言为语言
zh-CN 表示页面的语言为中文
不过在英文页面中也可以出现中文，中文页面中也可以出现英文。所以这个选项对页面效果作用不大，不过现在大部分浏览器都装载了翻译功能，此标签会影响翻译时浏览器对网页初始语言的判断。
<meta charset="UTF-8"> 字符集：
字符集指多个字符的集合，并且字符集会对其编码，以便计算机识别与储存文字。而世界上的字符集非常多，使用不同的字符集，网页呈现的效果也不同。为了让网页以正确的字符集解析我们的网页，所以要规定字符集。
此处我们使用的字符集UTF-8为万国码。这个字符集几乎包含了全世界所有国家需要用到的字符。
标题标签
为了区分标题与一般的段落，HTML提供了标题标签<h1></h1>，它可以加粗文字，使文字的字号变大。
h表示head，h后的数字表示标题的等级，HTML共提供了六个等级的标题：
可以看到，相比于一般的文字，并不是所有的标题都变大了，也有一些是变小的。但是这并不影响其为标题的性质。在此也不建议使用这个标签来调整字号，后续有专门用于调整字体的方法。
段落标签与换行标签
在文章中，会对文章进行分段，将其有条理地展示出来，网页中也是如此，所以HTML提供了段落标签<p> </p>。
此标签用于标识一个段落，在不同段落之间会自动换行。
提到换行，这就不得不说一下HTML的换行规则：
在HTML中，一个段落的文字会从左到右排列，知道浏览器窗口的右端，然后才会自动换行。
也就是说，文字的换行是要触碰到浏览器窗口的边界才会自动换行：
随着边界的移动，换行也就自动改变了。
那我们要如何在代码中强制对文本换行？
这里就要用到换行标签</br>了，此标签是一个单标签，用于对文本强制换行，在需要换行的地方，直接输入此标签即可。
上图中，由于换行标签存在，上方红色框处被强制换行了。
我们比较一下两个红框会发现，</br>造成的换行。文字之间的间隙比较小，而<p> </p>造成的换行，文字之间的间隙比较大。
注意：此处的</br>也可以写为<br>前面的斜杠可以省略，但是一般建议以带有斜杠的形式。
文本格式化标签
文本格式化标签，用于修饰文本，可做到加粗，倾斜，下划线等
| 标签 | 语义 |
<strong></strong>或 <b></b> |
加粗 |
<em></em> 或<i></i> |
倾斜 |
<del></del> 或 <s></s> |
删除线 |
<ins></ins> 或 <u></u> |
下划线 |
效果如下：
用于布局的标签
一个网页要有良好的布局才能使网页更加美观，而<div></div>与<span></span>标签，就是用于布局的，在web开发中，它们被称为“盒子”，用于存放其它元素。
在纯HTML环境下，<div></div>标签内部的元素会独占一行网页空间，而<span></span>内的元素会与其它元素共用一行。
在上图中，在第一段“这是一段文字”中，哪怕其后面还有空间，被div包含的文字也会另起一行，而就算div内容后面还有空间，div也会把这段空间占用，不允许其它内容使用。
而对于span内的内容，则会与其它内容共用同一行。
在没有CSS修饰的情况下，这两个标签的功能比较有限，在后续学习了盒子模型与CSS后，一个成熟的网站可能可以用到成百上千个<div></div>与<span></span>标签。
图像标签
在HTML中，<img>标签用于插入一个图像，img为image的缩写，表示图片。
其中src是<img>标签的必须属性，它用于指定图像的路径和文件名。如果没有路径，浏览器就不知道去什么地方找到指定图片了。
语法如下：
<img src="URL" />
此处的URL就是我们的路径，接下来我们简单讲解一下什么是路径：
路径
用户在寻找文件时，所历经的线路叫路径。在我们的img标签中可以使用到的路径有三种，分别是 网络路径，绝对路径，相对路径。
如果想更加深入了解路径，可以看一看这篇博客，虽然是Linux的操作系统，但是这方面与windows几乎是没有区别的：[Linux：家目录，根目录，隐藏文件，路径]。
网络路径：
网络路径就是指，一个图片在网络上的链接，在网页中，我们只需要右键就可以复制到一个图片的网络路径，直接放到我们的代码里就可以使用了：
可以看到，我们将复制到的csdn的标签链接，直接放到src内部，我们的网页就可以得到这张图片了，这就是网络路径。
相对路径：
相对路径，就是指两个文件的相对位置。
假设我们有的这样一个目录结构：
一个重要知识点：
.一个点表示当前目录
..两个点表示上一级目录每次跳转目录，都使用一个路径分隔符
/或\隔开比如从b.png开始跳转到c.png的相对路径就是：
./../../c.png备注：
/是Linux操作系统中的路径分隔符，而\是Windows的路径分隔符，此处使用两种都可以，甚至可以混合使用：
可以看到，上面的代码中，一个路径一次混合使用了两种分隔符，图片依然可以正常访问
但是我们建议使用
/
现在我们处在content.html这个目录中，要怎样访问到c.png文件？
此时如果使用相对路径，就是通过目录之间的相对位置来找到目标文件：
首先用.来表示从当前目录web出发，再使用..跳回到上级目录my_site，最后在my_site目录中访问c.png文件。
最后得到的相对路径就是：./../c.png。这里的./也可以省略得到：../c.png。
相对路径中..使用极为广泛，因为..标识的是上级目录，一旦目标文件不再当前目录下，就需要用到..。
绝对路径：
从根目录出发，访问文件经过的路径就是绝对路径。
我们将上图完整展示出来：
从根目录出发，那么c的绝对路径就是：e：/my_site/c.png
b的绝对路径：e:/my_site/web/image/b.png
说完了路径，我们继续讲解img标签。
除了src以外，img标签还有许多属性：
| 属性 | 说明 |
| src | 图片路径 |
| alt | 在图像显示错误时显示的文字 |
| title | 当鼠标放到文字上时显示的文字 |
| width | 设置图像的宽度 |
| height | 设置图像的高度 |
| border | 设置图像边框的粗细 |
alt与title
这两个属性，都是给图片添加文字的，但是两者有别：
title是当鼠标移动到图片上时显示的文字：
而alt是图片显示出错时显示的文字。
比如在src内部放一个错误的链接，浏览器无法正常打开图片：
注意：
1.图像的所有其他属性都应该放在src属性后
2.width和height两个属性，只需使用一个就好，当设置了图片高度时，其宽度也会等比缩放，而设置了图片宽度，其高度也会等比缩放,如下：
超链接标签
语法格式：
<a href="跳转目标" target="目标窗口的跳转方式" > 文本或图像</a>
a是单词anchor的缩写，含义为锚。
超链接标签<a> </a>的两个属性：
| 属性 | 作用 |
| href | 用于指定链接的URL地址 |
| target | 用于指定链接页面的打开方式，_self为默认值表示在当前窗口打开，_blank表示在新窗口打开 |
_self和_blank的效果如下：
链接分类
外部链接：
也就是一个网页的网址，直接放入href中即可，上方的百度页面打开，就是直接将百度官网的网址放入了href中。
内部链接：
一个网站可以有多个网页，在同一网站的网页间跳转，直接在href中放入页面名称即可，假设我们有一个test.html网页，一个index.html网页我们想在test中打开index，只需要<a href="index.html"></a>即可：
空链接：
当还没有确定链接的目标是，可以在href中放一个#，来表示这是一个空链接。
下载链接：
如果href中的地址是一个文件或者压缩包，点击链接则会下载这个压缩包。
锚点链接：
锚点链接用于一个页面内部的跳转，点击锚点链接后，就会跳转到固定位置。
使用方法：
在目标位置的标签中添加一个id属性，并为id指定一个名字：id = “name”。
在链接文本的href中输入href = "#name"，也就是在对应的id名称前加上#。
特殊字符
在HTML页面中，一些特殊符号不方便使用，比如< > &等等，它们本身就具有特殊含义，对编译器有误导作用。所以在此HTML提供了这些字符的代码替代写法：
| 特殊字符 | 描述 | 代码 |
| 空格 | |
|
| < | 大于号 | < |
| > | 小于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 度 | ° |
| ± | 正负号 | ± |
| ✖ | 乘号 | × |
| ➗ | 除号 | ÷ |
| ² | 平方上标 | ² |
| ³ | 立方上标 | ³ |
在此着重记忆前三个就好，它们最常用，注意不要漏掉最后的分号。
表格标签
表格主要用于展示数据，让数据非常直观的展示出来，比如上方的特殊字符表格。
表格语法：
<table> <tr> <th></th> </tr> <tr> <td></td> </tr> </table>
表格主要有四种标签：
<table></table>用于定义一块表格。
<tr></tr>用于定义表格的行，必须嵌套在table中
<th></th>用于定义表格的表头，必须嵌套在tr中
<td><td>用于定义一个单元格，必须嵌套在tr中
我们用代码解释：
在黄色区域中，每对<tr></tr>标签管理着一整行。
红色区域与绿色区域相比<th></th>作为表头标签，其内部的标签会更粗，着重强调。
在蓝色区域中，每对<td><td>标签控制着一个单元格。
表格属性：
| 属性 | 描述 |
| align | 规定整个表格相对周围元素的位置 |
| border | 规定表格是否有边框，默认值为“ ”，没有边框 |
| cellpadding | 规定单元格内容与单元格的内边距 |
| cellspacing | 规定单元格之间的外边距 |
| width | 规定表格的宽度 |
border：
当我们在表格中没有设置table，那么我们的表格就没有边框，只有设置了border，才有边框，此处的border的属性值只能为整数。
要注意border控制的是外边框，当属性值设置过大，对内部结构是没有影响的：
cellpadding与cellspacing：
cellpadding属性值用于控制单元格的内容与边框的距离，而cellspacing控制单元格之间的距离：
效果如下：
表格结构标签
表格主要分为表格的标题，表头，主体。它们都有对应的标签：
| 标题 | 表头 | 主体 |
<caption></caption> |
<thead></thead> |
<tbody></tbody> |
当使用标题标签时，就是给这个表格加上了标题，此时标题会在表格上方居中显示。
而后两个标签，本身没有修饰作用，主要用来区分结构，让结构更明确。在后续学习了css们可以利用这两个标签来整体修饰表头与主体。
综合效果：
合并单元格
通过上述知识，我们只能做出每个单元格大小都一致的表格，局限性非常大。于是HTML提供了用于合并单元格的属性，这些属性一般放在th与td中，当其属性值为多少，就说明从当前单元格开始，合并多少个单元格：
colspan跨列合并
rowspan跨行合并
效果如下：
列表
表格常用于显示数据，而列表则多用于布局，其整洁有序。
列表分为三大类：无序列表，有序列表和自定义列表。
无序列表
无序列表，就是不为列表项排序的列表，其由<ul> </ul>控制，相当于告诉浏览器，在这个<ul> </ul>内部，是一个无序列表。而每一个列表项，由<li></li>控制
语法：
<ul> <li></li> <li></li> <li></li> </ul>
无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul> </ul>中只能嵌套<li></li>，放入其它标签或者文字是非法的
<li></li>与<div></div>类似，可以用于承载其它标签，比如图片，段落等
效果如下：
绿色框是利用列表对文字排序，红色框则是利用列表对图片排序。
有序列表
有序列表就是有顺序的列表，其实顺序在我们写代码时就已经确定了，此列表只是为每个列表项标号显示。
有序列表与无序列表十分相似，其只是将<ul> </ul>改为了<ol> </ol>，其它性质一致。
语法：
<ol> <li></li> <li></li> <li></li> </ol>
效果如下：
自定义列表
自定义列表与前两者的差比就比较大了，此类列表通常是多个列表项对一个内容的拓展修饰，比如这个小米的网页：
这里的“帮助中心”就是一个自定义列表，其列表的后三个项目“账户管理”，“购物指南”，“订单操作”都是对“帮助中心”的拓展，或者说：帮助中心可以提供这三项帮助。
基本语法：
<dl> <dt></dt> <dd></dd> <dd></dd> </dl>
这里<dl></dl>用来控制一块自定义列表区域，<dt></dt>则是这个自定义列表的主体，后续的多个<dd></dd>都围绕其展开。
效果如下：
可以看到，这个自定义列表的主体向前缩进了，以展示它的主体地位。
表单
表单用于收集用户的信息，在网页中，表单可以提供一定的交互性，比如在登录页面，需要用户提交账号密码，交友网站中，需要用户填写个人信息等等。
在HTML中，一个完整的表单由表单域，表单控件，提示信息三个部分构成。
在上图中，红色区域就是一个表单域，蓝色区域是表单控件，绿色区域则是提示信息。
表单域
表单域是一个彪悍表单元素的区域。
在HTML中，利用<form></form>标签来控制一个表单域。
在后续学习服务器相关知识时，才能理解表单域的提交，此处不展开说明。
我们只需要记得两点：
在写表单元素之前，需要一个表单域将它们包含
表单的标签是form
不过此处表单控件其实也可以独立于表单域单独存在，只是这样的话，用户填写的信息就无法提交。
input控件
input就是输入的意思，在此处input这个控件综合了非常多种类的功能，具体实现哪一种功能，取决于其属性值type：
| 属性值 | 描述 |
| button | 可以点击的按钮 |
| checkbox | 复选框 |
| file | 用于上传文件 |
| hidden | 隐藏的输入字段 |
| image | 图像的提交按钮 |
| password | 密码输入 |
| radio | 单选框 |
| reset | 重置表单数据 |
| sumit | 提交表单数据 |
| text | 供用户输入文字 |
我们挑出部分分析：
button：
当type属性值为button时，就会生成一个按钮，用户可以点击。如果想要这个按钮上有文字，则加上value属性。
button主要后续与js结合使用，此处用处并不大
radio：
radio控制单选框，选项以一个圆形按钮展示，点击即可选择。
我们尝试点击一下：
被点击后，相应的按钮就变成了蓝色，但是这明明是一个单选框，为什么可以同时选中两个按钮？
在定义单选框时，要保证对于同一个目标作用的选项。必须时有相同的name属性值，否则编译器就无法确定哪些单选框作用同一个目标。
此外，我们还可以对某些选项加上checke="checked"属性值，在打开页面时会默认选中其中某一项，综合展示：
可以看到，上述单选框中，一开始默认选中了高一一班，后续选择其它选项，都会保持只有一个选项可以选择。
checkbox：
此选项用于定义复选框，同样的，我们需要对作用与同一个目标的选项设置相同的name值。
password：
此属性用于输入密码，当用户输入密码时，页面不会展示文字，而是对密码加密。如下：
text：
text属性控制输入文本框，它与password属性非常相似，只是输入时，文字不会被加密：
以上就是input中比较重要的属性了。
<label>标签
<label>标签用于绑定一个表单元素，当点击 <label>标签内的元素时，浏览器的光标会动转到被绑定的控件上。
为了绑定表单控件，我们需要使用for属性，来表示此label作用对象。而被绑定对象，需要设置一个id属性，以配合for属性，示例：
<label for="man">男</label> <input type="radio" name="sex" id="man" />
比如在上述代码中，我们使用label选中了一个”男“字。
在下方的单选框中，我们为这个控件标记了id="man"，而上方的label标记了for="man"。这样一来，label就完成了绑定。
当我们点击男这个文字的时候，就会自动选中对应的选项，在label内部还能放置图片等等。
示例：
在红色框内，我们用label绑定了两张图片，对应其选项。这样我们只要点击图片，就可以选中选项了。
<select></select>控件
select用于控制下拉列表，当选项过多，不利于展示，就可以用这个控件。
语法：
<select> <option></option> <option></option> <option></option> </select>
一对<select></select>用于控制一个下拉列表的所有选项，每个<option></option>内部就是一个选项值。
<textarea></textarea>控件
此控件用于创造一块大量输入文本的区域。
博客制作不易，还请留下一个免费的赞！
有问题欢迎指出，博主非常喜欢讨论问题！
