一、基本认知
在进行HTML5学习之前，需要先了解一下Web标准，所谓Web标准是由于当前使用的浏览器颇多，而不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异。为了缩小差异，提高浏览器兼容性，进而统一出的一个网页开发标准。
1.1 Web标准组成
Web标准不是某一个标准，而是一系列标准的集合，主要包含以下三部分：
| 构成 | 语言 | 说明 |
| 结构 | HTML | 对页面元素和内容进行整理和分类 |
| 表现 | CSS | 对网页元素的外观和位置等页面样式进行设置（颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义和页面交互 |
HTML就是其中之一，主要负责对页面元素和内容进行整理和分类。而HTML5是HTML的第五个版本，它对HTML进行了许多改进和扩展，使得网页开发更加丰富和便利。
1.2 HTML初识
HTML译为：超文本标记语言。专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
以下是HTML5的骨架，也是我们编写HTML5程序的第一步，先创建一个HTML5骨架，在vscode中可通过shift+!+Tab一键创建。其中<html><head><body>等均是标签，而不同的标签也代指不同的含义（标签的组成和关系可参考2.1）。需注意，本文所有语法程序全都应用在<body></body>这一组标签下。
<!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>二、HTML5基本语法
2.1 标签组成和关系
2.1.1 标签的组成
标签由<、>、/、英文单词或字母组成。并把标签中<>包括起来的英文单词或字母称为标签名。
常见的标签由两部分组成，我们称之为双标签，前部分叫开始标签，后部分叫结束标签，两部分之间包裹的内容便是此标签所应用的内容。列如骨架里的<title>标签，此标签的含义是网页的标题，而<title></title>之间的Document就是网页的标题。同理，html标签之间的就是网页的整体，而head标签之间的就是网页的头部，而body标签之间的则是网页的身体。在下面的程序示例里，我们使用strong标签，该标签代表着加粗，所以其中的123会被加粗显示。
当然，也有一些标签仅由一部分组成，我们称之为单标签。此类标签自成一体，无法包裹内容。如<br>标签，此标签意味着换行，例如下面的程序示例里，123<br>45则表示在3之后的位置进行换行，所以45要另起一行显示。
<body>
<strong>123</strong>
123<br>45
</body>注：此处程序只显示body标签内的程序，因为本文程序在不做说明的情况下，全都应用在body标签下，所以省略了其他HTML骨架标签。实际编写时应包含整个骨架。这是本文第一次出现，所以在此阐述，之后便不再赘述。
2.1.2 标签间的关系
标签之间的关系可分为两种关系：父子关系（嵌套关系）和兄弟关系（并列关系）。以下两种演示第一种为父子关系，第二种则是兄弟关系。
<head>
<title></title>
</head><head></head>
<body></body>2.2 标题和段落
2.2.1 标题标签
代码：h系列标签
标题标签代码为h系列标签，分别是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，代表1~6级6种标题，重要程度依次递减。标题标签一般用于凸显主题。下面是程序演示。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>2.2.2 段落标签
代码：<p></p>
段落标签代码为p标签，主要用于网页中的分段显示。下面是程序演示。
<body>
<p>段落1</p>
<p>段落2</p>
</body>2.3 换行和水平线
2.3.1 换行标签
代码：<br>
换行标签主要用于让网页文字强制换行显示。下面是程序演示。
<body>
换行<br>标签
</body>2.3.2 水平线标签
代码：<hr>
水平线标签主要用于分割不同主题内容。下面是程序演示。
<body>
水平线<hr>标签
</body>2.4 文本格式化
代码：
| 标签 | 说明 | 标签 | 说明 |
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
文本格式化标签主要用于让文字加粗、下划线、倾斜、删除线等效果。上述表格里第一列与第三列标签是同一含义，但是第三列标签比第一列标签表示强调的语义更为强烈。
2.5 图片
2.5.1 图片标签
代码：<img src=" " alt=" ">
图片标签是单标签，主要用来在网页中显示图片。另外img标签如果需要展示对应的效果，需要借助标签的属性进行设置。
这里提到标签属性一词，在这里解释一下，所谓标签属性，就是用来对标签进行各种效果展示的设置。一般以 属性名="属性值" 的形式出现。上述img标签里的 src=" " 就是标签属性，src是属性名，而 " " 里就是属性值。
此外，对于属性我们需要注意以下5点：
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
2.5.2 图片标签的src属性
属性名：src
src属性的属性值是目标图片的路径，主要用来在网页显示目标路径的图片。如果当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可，包括后缀名。（路径相关知识可参考2.6）
2.5.3 图片标签的alt属性
属性名：alt
alt属性名主要用来替换文本，当网页图片加载失败时，就会显示alt文本内容，文本内容所显示的就是alt标签的属性值。
2.5.4 图片标签的title属性
属性名：title
title属性主要用来做提示文本，当鼠标悬停在图片时，会显示出title文本内容。
2.5.5 图片标签的width和height属性
属性名：width、height
width和height属性是用来设置图片的宽度和高度的。如果只设置width和height中的一个，另一个没设置的会自动等比例缩放；如果同时设置了width和height两个，若设置不当此时图片可能会变形。
2.5.6 图片标签程序示例
<body>
<img src="5.png" alt="替换文本" title="提示文本" width="100">
</body>2.6 路径
网页加载图片和视频等内容时，需要通过路径去寻找。而路径又分为绝对路径和相对路径。
2.6.1 绝对路径
所谓绝对路径就是指目录下的绝对位置，可直接到达目标位置，通常是从盘符开始的路径。
例如：C:\Windows\1.png
2.6.2 相对路径
相对路径一般是从当前文件开始出发寻找对应目标文件的过程。相对路径也是我们常用的一种路径寻找方式。相对路径又分为三类：同级目录、下级目录、上级目录。
2.6.2.1 同级目录
同级目录：当前文件和目标文件在同一目录中。一般在程序里直接写目标文件名即可。
有两种代码书写方式：
方法一：<img src="目标图片.png">
方法二：<img src="./目标图片.png">
2.6.2.2 下级目录
下级目录：目标文件在下级目录中。一般在程序里先进入下级目录文件夹再写目标文件名。
代码书写方式：<img src="windows/目标图片.png">
2.6.2.3 上级目录
上级目录：目标文件在上级目录中。写程序时先用 “../” 回到上级文件夹，再写目标文件。
代码书写方式：<img src="../目标图片.png">
2.6.3 路径的总结
<body>
<!-- 绝对路径 -->
<img src="C:\Windows\5.png">
<!-- 相对路径-同级目录 -->
<img src="5.png"> <img src="./5.png">
<!-- 相对路径-下级目录 -->
<img src="文件/6.png">
<!-- 相对路径-上级目录 -->
<img src="../4.png">
</body>2.7 音频
代码：<audio src=" "> </audio>
音频标签主要用来在页面中插入音频。
常见的音频标签属性：
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
程序示例：
<body>
<audio src="./音乐.mp3" controls autoplay loop></audio>
</body>2.8 视频
代码：<video src=" "> </video>
视频标签主要用来在页面中插入视频。需注意视频标签仅支持MP4、WebM、Ogg三种格式。
常见的视频标签属性：
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
程序示例：
<body>
<video src="./视频.mp4" controls autoplay loop></video>
</body>2.9 超链接
2.9.1 超链接标签
代码：<a href=" "> </a>
超链接用来从一个页面跳转到另一个页面。一般在双标签间写上超链接名称，在href属性值里写跳转的网页地址。
程序示例：跳转csdn主页面
<body>
<a href="https://www.csdn.net/">csdn</a>
</body>2.9.2 超链接标签的target属性
属性名：target
target属性是用来确定目标网页的打开形式，其属性值不同决定打开方式不同。
| 取值 | 效果 |
| _sef | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
程序示例：
<body>
<a href="https://www.csdn.net/" target="_blank">csdn</a>
<a href="https://www.csdn.net/" target="_self">csdn</a>
</body>2.10 列表
列表在网页中用来按照行展示关联性的内容。比如排行榜、账单等。而列表又分为无序列表、有序列表和自定义列表三类。
2.10.1 无序列表
无序列表用来在网页中表示一组无顺序之分的列表，如：新闻列表。
无序列表的标签不再是单独一个标签，而是由两个标签组成：
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
显示特点：无序列表显示时，列表的每一项前默认显示圆点标识。
程序示例（ul中只允许嵌套li标签，li标签中可以嵌套任意内容）：
<body>
<ul>
<li>苹果</li>
<li>西瓜</li>
</ul>
</body>2.10.2 有序列表
有序列表用来在网页中表示一组有顺序之分的列表，如：排行榜。
有序列表的标签同样是由两个标签组成：
| 标签名 | 说明 |
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
显示特点 ：有序列表显示时，列表的每一项前默认显示序号标识。
程序示例（ol中只允许嵌套li标签，li标签中可以嵌套任意内容）：
<body>
<ol>
<li>第一名</li>
<li>第二名</li>
</ol>
</body>2.10.3 自定义列表
自定义列表一般用在网页底部导航处。
自定义列表由标签由三个标签组成：
| 标签名 | 说明 |
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前会默认显示缩进效果。
程序示例：
<body>
<dl>
<dt>订单</dt>
<dd>时间</dd>
<dd>购买人</dd>
</dl>
</body>2.11 表格
2.11.1 表格标签
表格用来在网页中以行+列的单元格的方式整齐展示数据。如：个人成绩单等。
表格标签：
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
程序示例：
<body>
<table>
<tr>
<td>科目</td>
<td>成绩</td>
</tr>
<tr>
<td>体育</td>
<td>100分</td>
</tr>
</table>
</body>2.11.2 表格属性
表格属性用来设置表格基本展示效果，实际开发多用CSS设置，这里不过多阐释。 但需注意，表格的属性要写在<table>开始标签内。
常见表格相关属性：
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
2.11.3 表格标题和表头单元格
表格标题和表头单元格分别用来表示整体大标题和一列小标题。
标签组成：
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意点：caption标签写在tablet标签内部。th标签写在tr标签内部用于替换td标签。
程序示例：
<body>
<table border="1">
<caption>成绩单</caption>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>体育</td>
<td>100分</td>
</tr>
</table>
</body>2.11.4 表格的结构标签
表格结构标签主要用来对表格内容结构进行分组，突出表格的不同部分（头部、主体、底部）。同时，在程序里书写表格结构标签也方便其他程序员理解与开发。
结构标签：
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主题 |
| tfoot | 表格底部 |
程序示例：
<body>
<table border="1">
<caption>成绩单</caption>
<thead>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>体育</td>
<td>100分</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>优秀</td>
</tr>
</tfoot>
</table>
</body>2.11.5 合并单元格
合并单元格用于将表格的水平或垂直的多个单元格合并成一个单元格。
合并单元格遵循左上原则，如果上下合并，则保留最上的单元格，删除其它的单元格（包括表格内数据）；如果左右合并，则保留最左的单元格，删除其它的单元格（同样包括表格数据）。
单元格合并两种属性：跨行合并和跨列合并。
| 属性名 | 属性值 | 说明 |
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意：只有同一个结果标签中的单元格才能合并，不能跨结果标签合并。
程序示例：
<body>
<table border="1">
<caption>成绩单</caption>
<thead>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>体育</td>
<td rowspan="2">100分</td>
</tr>
<tr>
<td>编程</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">优秀</td>
</tr>
</tfoot>
</table>
</body>2.12 表单
表单一般应用于登录界面、注册界面和搜索栏的搭建。
表单包含5大类标签，分别是input系列标签、button按钮标签、select下拉菜单标签、textarea文本域标签和label标签。
2.12.1 input标签
代码：<input type=" ">
input标签在网页中多用于显示收集用户信息的表单效果，如：登录页、注册页等。除此以外，input标签还可以通过type属性值的不同，展示不同效果。
type属性值：
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
2.12.1.1 input系列标签--文本框和密码框
type属性值：text、password
text和password标签主要用于网页中显示输入单行文本和密码的表单控件。
常用属性：
| 属性名 | 说明 |
| placeholder | 占位符。提示用户输入内容的文本 |
程序示例：
<body>
<input type="text" placeholder="账号">
<input type="password" placeholder="密码">
</body>2.12.1.2 input系列标签--单选框
type属性值：radio
radio主要用于网页中显示多选一的单选表单控件。例如：注册页面的性别一栏。
常用属性：
| 属性名 | 说明 |
| name | 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
程序示例：
<body>
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</body>多选框的用法与单选框一致，此处就省略不写了。
2.12.1.3 input系列标签--上传文件
type属性值：file
file主要用于网页中显示文件选择的表单控件。
常用属性：
| 属性名 | 说明 |
| multiple | 多文件选择 |
程序示例：
<body>
<input type="file" multiple>
</body>2.12.1.4 input系列标签--按钮
type属性值：submit、reset、button
| 标签名 | type属性值 | 说明 |
| input | submit | 提交按钮。点击之后提交数据给后端服务器 |
| input | reset | 重置按钮。点击之后恢复表单默认值 |
| input | button | 普通按钮。默认无功能，之后配合js添加功能 |
注意：想要实现以上按钮功能，需要配合form标签使用。将form标签作为表单域的父级，将submit和reset包含进去，，提交和重置按钮才能有效·。
补充：value属性，配合button按钮使用，value的属性值表示button按钮名。
程序示例：
<body>
<form>
用户名：<input type="text">
<br>
密码：<input type="password">
<br>
<!-- 按钮 -->
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>2.12.2 button按钮标签
代码：<button></button>
button标签主要用于网页中显示用户点击的按钮。
type属性值（同input）：
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮。点击之后提交数据给后端服务器 |
| button | reset | 重置按钮。点击之后恢复表单默认值 |
| button | button | 普通按钮。默认无功能，之后配合js添加功能 |
注意：
button标签在谷歌浏览器中默认为提交按钮。
button标签是双标签，更便于包裹内容，也是我们最常用的标签之一。
程序示例：
<body>
<button>按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
</body>2.12.3 select下拉菜单标签
代码： <select> </select>
select下拉菜单标签多用于在网页中提供多个选择项的下拉菜单表单控件。
标签组成：
| 标签名 | 说明 |
| select | 下拉菜单的整体 |
| option | 下拉菜单的每一项 |
常见属性：selected（下拉菜单的默认选中）
程序示例：
<body>
<select>
<option>星期一</option>
<option>星期二</option>
<option>星期三</option>
</select>
</body>2.12.4 textarea文本域标签
代码： <textarea cols=" " rows=" "></textarea>
textarea文本域标签多用于在网页中提供可输入多行文本的表单控件。
常见属性：
| 属性名 | 说明 |
| cols | 规定了文本域内可见宽度 |
| rows | 规定了文本域内可见行数 |
程序示例：
<body>
<textarea cols="30" rows="10"></textarea>
</body>2.12.5 label标签
代码：<label for=" "> </label>
label标签常用于绑定内容与表单标签的关系。
label标签由两种使用方法：
第一种：使用label标签把内容包裹起来，然后在表单上添加id属性，再在label标签的for属性中设置对应的id属性值。
第二种：直接使用label标签把内容和表单标签一起包裹起来，label标签的for属性删除即可。
程序示例：
<body>
性别：
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label><input type="radio" name="sex">女</label>
</body>2.13 语义化标签
2.13.1 没有语义的布局标签
标签名：div和span
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
注意，在开发网页时，这两个标签我们会大量且频繁的使用。
程序示例：
<body>
<div>div标签</div>
<span>span标签</span>
</body>2.13.2 有语义的布局标签（了解）
在HTML5新版本中，也推出了一些有语义的布局标签供开发者使用。
标签：
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
程序示例：
<body>
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
</body>2.14 字符实体
结构：&英文;
字符实体就是在网页中展示特殊符号效果时，需要用字符实体代替。
常见的字符实体：
| 显示结果 | 描述 | 实体名称 |
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和 | & |
| " | 引号 | " |
注意：字符实体在使用时，想要在网页中显示几个字符，就要写几个字符实体。
