HTML5
摘要 在本文的学习中，我们会讲述HTML5新增的特性。HTML5并不是一种新的语言，而是HTML语言的第五次重大修改版本。现如今很多主流浏览器都支持H5如chrome、firefox、safari。IE9及以上支持h5，IE8以下则不支持。
H5改变了用户与文档的交互方式。在以前的传统的HTML中，我们使用的是flash来插入多媒体。但在H5中，它兼收了flash的一些特性。
相对于H4来说，H5抛弃了许多不合理的标记和属性，新增了一些标记和属性。还增加了许多新的语义使得代码的可读性更好。其他的如二维三维变化、特效、本地存储特效等特性，我们在下面的学习中慢慢讨论。
声明：在使用本文的代码时，为了避免文章冗长，我只附上了body标签内的代码供演示，如有需要详细代码可以前往代码仓库获取
作者：来自ArimaMisaki创作
[TOC]
1.1 HTML概述
1.1.1 网页
- 网页是指在因特网上按照一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
- 网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。
- 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常常为以.htm或.html后缀结尾的文件，故俗称HTML文件。
1.1.2 HTML
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言，通过标签的控制来书写内容。如果你学过XML你或许能理解。
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给客户的
1.1.3 Web标准
我们在潜移默化中已经形成了一套标准，一个网页的组成可以分为结构、表现和行为。其中结构由HTML控制，即网页的内容；表现由CSS控制，即网页元素的位置和美化；行为由JavaScript控制，即网页模型的定义和交互。以上的标准我们最好各司其职，不要逾越。
1.1.4 一些术语
元素节点（元素）：通常指的是HTML某个标签及其内容，如\<h1>\</h1>表示标题。
样式：通常指的是美化及位置控制，如标题应该放在网页的中间还是左边，应该是绿色还是红色。
1.2 HTML基本页面
1.2.1 标签
说明：HTML标签是由尖括号包围的关键词，例如\<h1>。h1标签通常是成对出现的，例如\<h1>和\</h1>我们称其为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
HTML标签并不全是双标签，比如单标签\<br>，它通常被用作换行。标签中还可以指定内容的属性，写法采用键值对方式key = "value"。属性包含了元素的额外信息。其中==值的引号可写可不写==，但是习惯上大家还是会写上。==元素可以同时存在多个属性==，属性之间以空格的方式隔开，标签名与属性之间也是，属性之间是无序的。
1.2.2 标签关系
说明：双标签关系可以分为两类：包含关系和并列关系。
1.2.3 注释
注释格式：\<!-- 注释内容 -->
提示：如果是使用VScode，那么你只需要选中注释内容，然后ctrl+/。
1.2.4 基本骨架
说明：每个网页都会有一个基本结构标签，我们称之为骨架标签。页面的内容也是在这些基本标签上书写。如果我们想要使用VsCode编译器来快速生成一个基本页面，可以敲下!然后回车，或者敲下html:5然后回车。下面演示一个基本页面：
<!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>第一个程序</title>
</head>
<body>
<!-- 网页中显示的内容 -->
你好
</body>
</html>我们对基本页面中的标签做一下解释：
| 标签名 | 定义 | 说明 |
|---|---|---|
| \<html>\</html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| \<head>\</head>> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| \<title>\</title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| \<body>\</body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本上是放到body里面的 |
对其余的符号做一下解释：
| 其余符号 | 作用 |
|---|---|
| \<!DOCTYPE html> | 表明HTML网页版本 |
| lang(意味language) | 定义当前文档显示的语言，一般是en(English)或者zh-CN(中文)，除此之外还有fr(法语)等。 |
| charset(Character Set,字符集) | 多个字符的集合，以便计算机能够识别和存储各种文字，在head标签内可以使用\<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。常用UTF-8、GBK、GB2312 |
1.3 文本标签
1.3.1 排版标签
| 排版标签 | 说明 |
|---|---|
| 标题标签 | 双标签\<h1>\</h1>，其中可选h1到h6。意为最多支持六级标题 |
| 段落标签 | 双标签\<p>文字内容\</p>，其中段落文字写于标签之中 |
| 换行标签 | 单标签\<br/>或\</br>，意为重新开始一行 |
| 水平线标签 | 单标签\<hr>，意为生成一条水平线，常用于分割不同主题内容 |
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落</p>
<br>
<hr>
</body>1.3.2 文本格式化标签
说明：格式化并不是清空的意思，而是让文本具有某种格式的意思。通过文本格式化标签，我们可以对特定的文字施加各种效果。
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| strong | 加粗 |
| u | 下划线 |
| ins | 下划线 |
| i | 倾斜 |
| em | 倾斜 |
| s | 删除线 |
| del | 删除线 |
<body>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
</body>1.4 语义标签
1.4.1 无语义标签
div标签：双标签\<div>文字内容\</div>，div标签相当于一个盒子，可用于存放多个内容，多次声明div标签可创造不同的盒子且==位于不同行==。
span标签：双标签\<span>文字内容\</span>，span相当于一个盒子，与div不同的是，不管你使用几次标签，填写的内容都会位于同一行。
<body>
<div>普通文字</div>
<div>普通文字</div>
<span>普通文字1</span>
<span>普通文字1</span>
</body>1.4.2 语义标签
说明：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。这些标签多用于手机端网页开发。
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| aticle | 网页内容 |
| main | 文档主要内容 |
1.5 多媒体标签
1.5.1 图像标签
格式：\<img src="" alt="" title="" width="" height="" border="">
属性说明：
| 属性 | 说明 |
|---|---|
| alt = "" | 当图片加载失败时，显示alt指定的文本 |
| title = "" | 当鼠标悬停在图片上时显示的提示信息 |
| width和height | 用于设置图片宽度和高度，但是一般只设置其中一个，另一个则会根据设置等比例放大缩小，若两个都设置如果没有等比例缩小或放大则图片会扭曲。 |
| border | 设置图像的边框粗细 |
<body>
<img src="./0.jpg" alt="图片加载失败" title="图片来自ArimaMisaki" width="400px" border="2px">
</body>1.5.2 音频标签
单标签格式：\<audio src="" controls="" autoplay="" loop="">
双标签格式：\<audio>\<source src="" type="">\</audio>
说明：由于音频标签目前只支持三种格式：MP3、Wav、Ogg，如果我们轻易换掉视频源，则会导致audio单标签可能无法播放，为此我们提出了双标签。在音频中可以指定多个source，不同的source中存放的是不同格式的同个音频，这样方便浏览器选择可用的播放源
属性说明：
| 属性名 | 功能 |
|---|---|
| src | 音频路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
1.5.3 视频标签
说明：
- 将音频标签的audio改为video即可。
- 使用embed也可以直接插入视频文件，它的本质是调用本机上已经安装的文件，具有兼容性。
- 可以使用flash，但是会增加使用成本，且该方法已经被淘汰。
- 视频标签目前只支持三种格式：MP4、WebM、Ogg。
- 当设置视频宽高时，HTML5为了保持原视频比例，设置的宽高中只会生效一个参数。故平时设置视频组件时只会设置宽高中的其中一个参数。==这种做法不仅仅是对于视频比例，图片比例也是一样==。
属性说明：
| 属性名 | 功能名 |
|---|---|
| src | 音频路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（谷歌浏览器要自动播放需要加上muted） |
| loop | 循环播放 |
| width | 组件宽度 |
| height | 组件高度 |
| poster | 还未播放前视频的封面，默认是视频的第一帧，可指定路径 |
| preload | auto或none，规定是否预先加载视频，如果有了autoplay，就忽略该属性 |
| muted | 静音播放 |
<body>
<video type="mp4" width="300px" controls autoplay loop poster muted>
<source src="./TestAudio.mp4">
</video>
</body>1.6 超链接
说明：超链接就是点链接就能跑到其他地方的玩意。
格式：\<a href = "目标网页">超链接名字\</a>
链接中的target属性：
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转 |
| _blank | 在新窗口中跳转（保留原网页） |
链接分类：
- 外部链接：\<a href = "http://www.baidu.com">百度\</a>
- 内部链接：\<a href ="index.html">首页\</a>
- 空链接：\<a href =#>首页\</a>
- 下载链接：如果href的地址是一个文件或者压缩包，点击则会下载这个文件
- 网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频都可以添加超链接
- 锚点链接：在a标签的href属性中设置属性值为#id值，然后在目标位置标签添加id属性，并设置id值即可
<body>
<a href="http://www.baidu.com">百度链接</a>
<a href="./1_5_3.视频标签.html">内部链接</a>
<a href="#">空链接</a>
</body>1.7 列表
1.7.1 列表种类
有序列表：每条内容前都有序号
无序列表：每条内容前都有符号
自定义列表：自己定制的列表
1.7.2 无序列表
| 标签名 | 说明 |
|---|---|
| ul(Unordered list) | 表示无序列表的整体，用于包裹li标签 |
| li(list) | 表示无序列表的每一项，用于包含每一行的内容 |
1.7.3 有序列表
| 标签名 | 说明 |
|---|---|
| ol(Ordered list) | 表示有序列表的整体，用于包裹li标签 |
| li(list) | 表示有序列表的每一项，用于包含每一行的内容 |
1.7.4 自定义列表
| 标签名 | 说明 |
|---|---|
| dl(defined list) | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt(defined title) | 表示自定义列表的标题 |
| dd(defined data) | 表示自定义列表的针对主题的每一项内容 |
1.7.5 列表演示
<body>
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<dl>
<dt>标题</dt>
<dd>第一行</dd>
<dd>第二行</dd>
<dd>第三行</dd>
</dl>
</body>1.8 表格
1.8.1 表格标签
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr(table row) | 表格每行，可用于包裹td |
| td(table data) | 单元格内容 |
| caption | 表格大标题，写于table标签内部。表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th(table header) | 表头单元格，写于tr标签内部。表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
1.8.2 表格标签属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
1.8.3 合并单元格
说明：合并单元格分为跨行合并和跨列合并，只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并 |
| colspan | 合并单元格的个数 | 跨列合并 |
1.8.4 表格演示
<body>
<table border="2" cellspacing="0" cellpadding="">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>成绩不错</td>
</tr>
<tbody>
<tfoot>
<tr>
<th>总结</th>
<th colspan="3">品质兼优 德才兼备</th>
</tr>
</tfoot>
</table>
</body>1.9 表单标签
1.9.1 表单标签汇总
表单标签说明：
| 标签 | 描述 |
|---|---|
| \<form> | 定义供用户输入的表单 |
| \<input> | 定义输入域 |
| \<label> | 绑定内容和表单标签的关系 |
| \<textarea> | 定义文本域 (一个多行的输入控件) |
| \<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| \<legend> | 定义了 \<fieldset> 元素的标题 |
| \<select> | 定义了下拉选项列表 |
| \<optgroup> | 定义选项组 |
| \<option> | 定义下拉列表中的选项 |
| \<button> | 定义一个点击按钮 |
| \<datalist> | 和select下拉菜单标签类似，搭配text文本框可以输入文字 |
| \<keygen> | 密钥对生成器 |
| \<output> | 用于放置输出内容 |
<body>
<h1>账号注册</h1>
<br>
<form action = "">
<form action="">
<!-- 文本框 -->
账号：<input type="text" placeholder="邮箱/手机号码/ID">
<br>
<!-- 密码框 -->
密码：<input type = "password" placeholder="密码">
<br>
<input type="reset" value="重置按钮">
</form>
<!-- 单选框+label标签 -->
<input type="radio" name = "sex" id = "nan"><label for="nan">男</label>
<input type="radio" name = "sex" id = "nv"><label for="nv">女</label>
<br>
<!-- 下拉菜单 -->
所在地：<select>
<option>意大利</option>
<option>美国</option>
<option selected>中国</option>
</select>
<br>
<!-- 多选框 -->
是否单身：<input type = checkbox>
<!-- 提交按钮 -->
<input type = submit value = "注册账号">
</form>
<br>
<!-- 文件选择框 -->
提交头像：<input type = file multiple>
<br>
<!-- 文本域 -->
<Textarea cols = 12 rows = 3></Textarea>
<br>
<!-- 普通按钮 -->
<input type = button value = "测试按钮1">
<!-- 按钮标签 -->
<button type = button>测试按钮2</button>
<form action="" method="post">
<fieldset>
<legend>请选择你的爱好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="运动">
<option value="羽毛球">篮球</option>
<option value="乒乓球">足球</option>
</optgroup>
<optgroup label="娱乐">
<option value="看电影">看电影</option>
<option value="看小说">看电视</option>
</optgroup>
</select>
</fieldset>
</form>
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>1.9.2 Input标签
说明：input属于单向标签，其必须指定属性type使其具有不同的功能。
搭配：对于按钮表单标签来说，如果在没有添加==预标签form==的情况下，是无法实现其功能的。如果想要使功能和对应的组件相结合，就需要把实现功能的组件和该按钮放在同一个地方，用form括起来即可。
type属性说明：
| type属性值 | 说明 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件选择 |
| submit | 提交按钮，点击之后提交数据给后台服务器 |
| reset | 重置按钮，点击之后恢复表单默认值 |
| button | 普通按钮，默认无功能，配合js可以添加功能 |
| 邮箱框，提供了邮箱格式的完整验证 | |
| tel | 电话框，==可以在移动端提供数字键盘== |
| url | 网址框，提供合法网址的输入 |
| number | 数量框，提供单位数量控制以及控制数字输入 |
| search | 查找框，可以清空输入框的内容 |
| range | 滑动条，可用于调解音量 |
| time | 时间选择框，支持时分秒 |
| date | 日期选择框，支持年月日 |
| datetime | 只有safari和edge支持，等价于datetime-local |
| datetime-local | 日期选择框，支持年月日时分秒 |
| month | 设置月份 |
| week | 设置周 |
input标签的其他属性说明：
| 附加属性 | 说明 |
|---|---|
| value | 用于指定按钮上的文字，submit和reset按钮默认有文字；指定数量框的默认值；指定滑动条的默认值 |
| multiple | 用于一次性上传多个文件 |
| placeholder | 文本框中出现提示内容 |
| name | 用于单选框和多选框分组，同个组中只能有一个选项被选中 |
| checked | 用于单选框和多选框，指定默认选中的选项 |
| autocomplete | 用于任何类型文本框，提示已经提交过的数据，只有两个值on或off |
| max | 指定数量框的最大值；指定滑动条的最大值 |
| min | 指定数量框的最小值；指定滑动条的最小值 |
| autocomplete | 用于任何类型文本框，自动获取焦点 |
| required | 用于文本框，指定该文本框必须输入，否则无法提交 |
| pattern | 用于文本框，可用正则表达式限定文本框输入内容 |
1.9.3 按钮标签
格式：\<button type = "">按钮文本\</button>
type属性说明：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后台服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，配合js可以添加功能 |
1.9.4 下拉菜单标签
标签说明：
| 标签 | 说明 |
|---|---|
| select | 单标签，下拉菜单的整体 |
| option | 单标签或双标签，下拉菜单的每一项 |
option属性说明：
| 属性 | 说明 |
|---|---|
| selected | 可以指定默认选项 |
| label | 在每个选项后面显示提示文字 |
1.9.5 文本域标签
文本域标签的属性：
| 属性 | 说明 |
|---|---|
| col | 指定几列 |
| rows | 指定几行 |
1.9.6 label标签
使用场景：可以扩展表单的范围
食用方法一：
- 使用label标签把内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
食用方法二：
- 直接使用label标签把内容和表单标签一直包裹起来
- 把label标签的for属性删除即可
<body>
<label>
<form action="">
<input type="text">
<label>
<button type="reset">按钮</button>
<p>点到我也可以点到按钮</p>
</label>
</form>
</label>
</body>1.9.7 datalist标签
说明：
- datalist是双标签，和select标签相同，里面可以嵌套option作为选项；
- 使用datalist标签需要指定label属性的值为text标签的id属性的值，否则无法关联生效；
- 如果datalist关联的并非是input的text类型，而是url类型，则要求选项option中的每一项都是网址格式，否则无法显示；
- datalist不太实用，因为不同浏览器对这个标签的支持程度不同；
1.9.8 keygen（了解）
说明：keygen元素是密钥生成器。当提交表单时，会生成两个键，私钥存储于客户端，公钥则被发送到服务器；公钥可用于之后验证用户的客户端证书，即实现非对称加密。目前很少有浏览器支持该标签。
1.9.9 output（了解）
说明：属于语义标签，用于放置输出的内容，但是不能自动计算结果，需搭配js方式来动态修改结果。
1.10 框架标签
格式：\frameLabelStart--frameLabelEnd
说明：iframe标签用于网页内显示网页
scrolling取值说明：
| 属性值 | 说明 |
|---|---|
| auto | 默认值，整个表格在浏览器页面中左对齐 |
| yes | 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留 |
| no | 在任何情况下都不显示滚动条 |
<body>
<b>我们准备演示一个框架</b>
<br>
frameLabelStart--frameLabelEnd
</body>1.11 头部标签
| 标签 | 描述 |
|---|---|
| \<head> | 定义了文档的信息。 |
| \<title> | 定义了文档的标题。 |
| \<base> | 定义了页面链接标签的默认链接地址。 |
| \<link> | 定义了一个文档和外部资源之间的关系。用于导入CSS文件 |
| \<meta> | 定义了HTML文档中的元数据。 |
| \<script> | 定义了客户端的脚本文件。 |
| \<style> | 定义了HTML文档的样式文件。 |
1.12 字符实体
说明：文字中如果要显示多个空格，就需要用到字符实体。如果你在html中写入无数个空格，其渲染后也只会显示一个空格。
建议：对于字符实体不只有表示空格的，但是我们用的最多的是空格，其他的需要再查即可。
分类：
<body>
我们坚持学习 才能走向成功
</body>1.13 Emmet语法
说明：Emmet语法的前身是ZenCoding，用于提高html和css的书写速度，在VSCode已经集成了该语法。
快速生成HTML结构语法：
- 生成标签只需输入标签名然后按tab即可。
- 如果想要生成多个标签，只需输入标签名*数字即可。
- 如果有父子级标签，可以用>。
- 如果有兄弟级标签，可以用+。
- 如果想生成一个带有类别的标签，可以使用==标签名.类名==然后按tab；如果想生成一个带有id的标签，可以使用==标签名#id==然后按tab。
- 如果想要生成有序类别的div盒子，可以使用==.类名$*数量==。
- 如果想要生成的标签里有初始内容，可以输入==标签{}==然后按tab。
快速生成CSS语法：只需采取简写即可，如width:200只需输入w200然后按tab即可。
1.14 进度条标签
格式：\<progress max = "" value = "">\</progress>
提示：绝大部分进度条还是使用div和CSS搭配制作
<body>
<progress value="20" max="100"></progress>
</body>1.15 度量条标签
格式：\<meter hign="" low="" max="" min="" value="">\</meter>
应用场景：常用于表示注册账号输入密码时的安全级别阶段
属性说明：
| 属性 | 说明 |
|---|---|
| hign | 规定较高的值 |
| low | 规定较低的值 |
| max | 最大值 |
| min | 最小值 |
| value | 默认度量值 |
<body>
<meter low="30" hign="60" max="100" min="0" value="30"></meter>
<meter low="30" hign="60" max="100" min="0" value="50"></meter>
<meter low="30" hign="60" max="100" min="0" value="70"></meter>
</body>1.16 画布标签
说明：是在HTML5中新增的标签，用于在网页中生成图像，可以操作图像内容，还可以使用JavaScript操作的位图
格式：\<canvas id='canvas' width="" height="">\</canvas>
提示：知道有这个东西即可，在HTML5中不做过多讲解。
