=================================================================
表单是一个容器，用来收集客户端要提交到服务端的信息。本节中，我们将来学习 HTML5 的表单的特性，包括表单元素、表单属性以及表单输入类型等。
知识点
-
HTML5 表单元素
-
HTML5 表单属性
-
HTML5 输入类型
HTML5 的表单新增了许多特性，如表单的输入类型限定、表单的字段属性、表单的组织方式等，多加练习，合理运用它们，你页面的表单部分会变得更加合理化。
datalist 元素
datalist 元素用于为文本框提供一个可供选择的列表，使用 datalist 元素来为表单小部件提供建议的、自动完成的值，并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。
一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。
例子：
What's your favorite color?
black blue green red white yellow也可以写成下面这样：
What's your favorite color?
运行效果为：
autocomplete 属性
autocomplete 属性规定表单是否应该启用自动完成功能：自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
例子：
Name:
E-mail:
运行效果为：
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。
例子：
Name：
运行效果为：
注：大家可以把上面代码中 autofocus 属性删掉对比看看效果。
form 属性
form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id。
例子：
First name:
下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把
first name 和 last name的值都提交。
Last name:
运行效果为：
注：如需引用一个以上的表单，请使用空格分隔的列表。
multiple 属性
multiple 属性规定输入域中可选择多个值，适用于以下类型的 <input> 标签：email 和 file。
例子：
选择文件:
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
例子：
E-mail:
pattern 属性
pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
例子：
Name:
运行效果为：
注：想要了解更多正则表达式的语法，请访问正则表达式手册。
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。
例子：
实例：
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
例子：
运行效果为：
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
例子：
E-mail:
运行效果为：
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
例子：
Url:
运行效果为：
Input 类型 - number
number 类型用于应该包含数值的输入域。属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。
例子：
number：<input
type="number"
name="points"
min="0"
max="10"
step="2"
value="2"
/>
运行效果为：
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。
例子：
range:
<input
type="range"
name="points"
min="1"
max="10"
value="2"
step="2"
/>
运行效果为：
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
-
date - 选取日、月、年
-
month - 选取月、年
-
week - 选取周和年
-
time - 选取时间（小时和分钟）
-
datetime - 选取时间、日、月、年（UTC 时间）注意：此类型已被弃用，目前大多数浏览器都不再支持。
-
datetime-local - 选取时间、日、月、年（本地时间）
例子：
Date:
Month:
运行效果为：
Input 类型 - color
color 类型用于选择颜色。
例子：
运行效果为：
=========================================================================
HTML5 Canvas 是现代浏览器都支持的 HTML5 非插件绘图的功能，Canvas 就是一个画布，主要用于图形表示、图表绘制、游戏制作等。本小节我们将会学习如何一步一步使用 canvas 绘制图形。
知识点
-
Canvas 元素
-
绘制简单图形
-
直线绘制
-
矩形绘制
-
圆和椭圆的绘制
-
填充和渐变
-
文字绘制
-
图片绘制
Canvas 是 HTML5 网页图形表示、图表绘制、游戏制作的基础，需要多次练习加以熟练掌握，只有这样在操作 HTML5 图形图表时才能得心应手。
canvas 元素的外观和 img 元素相似，但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性和 height 属性用来设置画布的宽和高，单位是 px。默认的画布的高度是 150px，宽度是 300px。
<canvas
id="myCanvas"
width="200"
height="100"
style="border:2px solid #000000;"
注意: 默认情况下 <canvas> 元素没有边框和内容，标签通常需要指定一个 id 属性 (脚本中经常引用)。
canvas 元素本身并不能实现图形绘制，所有的绘制工作必须要和 JavaScript 脚本结合起来。首先，给 canvas 元素添加一个 id 属性，这样能够让我们在 JavaScript 脚本中通过 id 属性找到对应的 canvas 元素。
<canvas
id="myCanvas"
width="200"
height="100"
style="border:2px solid #000000;"
添加了 id 属性后，找到对应的 canvas 元素：
var myCanvas = document.getElementById('myCanvas');
// 通过document.getElementById来找到id为myCanvas的元素
然后通过 canvas 元素的 getContext()方法获取上下文，即创建 Context 对象，以获取允许进行绘制的 2D 环境。
var ctx = myCanvas.getContext('2d');
最后通过 Context 对象的相关方法完成绘制，比如：fillStyle()等。
ctx.fillStyle = 'red';
//设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
ctx.fillRect(0, 0, 100, 100);
整体的代码：
对不起，你的浏览器不支持canvas
注意：
进行绘制时，需要指定确定的坐标位置，坐标原点(0,0)位于 canvas 的左上角，x 轴水平方向向右延伸，y 轴垂直向下延伸，如图：
-
strokeStyle：设置或返回笔的颜色、渐变或模式。默认值为：#000000。
-
lineWidth：设置或返回当前的线条宽度 ，以像素计。
-
beginPath()：起始一条路径，或重置当前路径。
-
closePath()：创建从当前点回到起始点的路径。
-
moveTo()：把路径移动到画布中的指定点，不创建线条。
-
lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。
-
stroke()：绘制已定义的路径。
绘制一条直线例子：
对不起，你的浏览器不支持canvas
运行效果为：
绘制三角形例子：
对不起，你的浏览器不支持canvas
运行效果为：
rect() 方法介绍
使用 rect() 方法创建矩形。语法为：
ctx.rect(x,y,width,height);
参数说明：
-
x 表示矩形左上角的 x 坐标。
-
y 表示矩形左上角的 y 坐标。
-
width 表示矩形的宽度，以像素计。
-
height 表示矩形的高度，以像素计。
注：使用
stroke()或fill()方法在画布上实际地绘制矩形。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
strokeRect() 方法介绍
使用 strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。语法为：
ctx.strokeRect(x, y, width, height);
注：参数与
rect()方法一致，唯一的区别是这里不需要再加一句stroke()或fill()方法。无法填色。
前面绘制矩形的例子也可以这样写：
对不起，你的浏览器不支持canvas
fillRect() 方法介绍
使用 fillRect() 方法创建实心矩形。语法为：
ctx.fillRect(x, y, width, height);
注：参数说明与前面一致，默认的填充颜色为黑色，可以使用
fillStyle属性来设置用于填充绘图的颜色、渐变或模式。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
clearRect() 方法介绍
使用 clearRect() 方法清空给定矩形内的指定像素。语法为：
ctx.clearRect(x, y, width, height);
注：参数说明与前面一致。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
使用 arc() 方法绘制圆或者椭圆。语法为：
ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
参数说明：
-
x 表示圆的中心的 x 坐标。
-
y 表示圆的中心的 y 坐标。
-
r 表示圆的半径。
-
sAngle 表示起始角，以弧度计（特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度）。
-
eAngle 表示结束角，以弧度计。
-
counterclockwise 表示绘制圆的方向，值为 false 表示顺时针，为 true 表示逆时针。是一个可选值，默认值是 false。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
当然绘制扇形也很简单，只需要给定角度值小于 2 * Math.PI 再闭合一下就可以了，来看看例子。
对不起，你的浏览器不支持canvas
运行效果为：
填充
使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：
ctx.fillStyle = color | gradient | pattern;
参数说明：
-
color 表示绘图填充的颜色。默认值是
#000000。 -
gradient 表示用于填充绘图的渐变对象（线性或放射性）。
-
pattern 表示用于填充绘图的 pattern 对象。
例子：
绘制实心矩形，填充颜色为红色。
对不起，你的浏览器不支持canvas
运行效果为：
渐变
使用 createLinearGradient() 方法创建线性渐变。语法为：
ctx.createLinearGradient(x0, y0, x1, y1);
参数说明：
-
x0 表示渐变开始点的 x 坐标。
-
y0 表示渐变开始点的 y 坐标。
-
x1 表示渐变结束点的 x 坐标。
-
y1 表示渐变结束点的 y 坐标。
使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：
gradient.addColorStop(stop, color);
参数说明：
-
stop 表示渐变中开始与结束之间的位置。是介于
0.0与1.0之间的值。 -
color 表示在结束位置显示的 CSS 颜色值。
注：
addColorStop()方法与createLinearGradient()或createRadialGradient()一起使用。我们可以多次调用addColorStop()方法来改变渐变。如果我们不对gradient对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数说明：
-
x0 表示渐变的开始圆的 x 坐标。
-
y0 表示渐变的开始圆的 y 坐标。
-
r0 表示开始圆的半径。
-
x1 表示渐变的结束圆的 x 坐标。
-
y1 表示渐变的结束圆的 y 坐标。
-
r1 表示结束圆的半径。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
fill() 方法
使用 fill() 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。
语法为：
ctx.fill();
注：如果路径未关闭，那么
fill()方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
fillText() 方法
使用 fillText() 方法在在画布上绘制实心文本。语法为：
ctx.fillText(text, x, y, maxWidth);
参数说明：
-
text 规定在画布上输出的文本。
-
x 表示开始绘制文本的 x 坐标位置（相对于画布）。
-
y 表示开始绘制文本的 y 坐标位置（相对于画布）。
-
maxWidth 表示允许的最大文本宽度，以像素计。可选。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
strokeText() 方法
使用 strokeText() 方法在画布上绘制空心文本。语法为：
ctx.strokeText(text, x, y, maxWidth);
注：参数说明与
fillText()方法一致。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
font 属性
使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。
textAlign 属性
使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为：
ctx.textAlign = 'center|end|left|right|start';
参数说明：
-
start 默认值，表示文本在指定的位置开始。
-
center 表示文本的中心被放置在指定的位置。
-
end 表示文本在指定的位置结束。
-
left 表示文本左对齐。
-
right 表示文本右对齐。
注：使用
fillText()或strokeText()方法在实际地在画布上绘制并定位文本。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
textBaseline 属性
textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为：
ctx.textBaseline = 'alphabetic|top|hanging|middle|ideographic|bottom';
参数说明：
-
alphabetic 表示文本基线是普通的字母基线。默认值。
-
top 表示文本基线是
em方框的顶端。 -
hanging 表示文本基线是悬挂基线。
-
middle 表示文本基线是
em方框的正中。 -
ideographic 表示文本基线是表意基线。
-
bottom 表示文本基线是
em方框的底端。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
在 Terminal 输入以下命令获取图片绘制用到的图片：
wget labfile.oss.aliyuncs.com/courses/124…
使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。
canvas 绘制图片的基本格式为：
//创建一个图片对象
var image = new Image();
//设置图片的路径
image.src = 'xxx';
//当图片加载完成后
image.onload = function () {
//绘制图片
ctx.drawImage();
};
语法 1，在画布上定位图像：
ctx.drawImage(img, x, y);
语法 2，在画布上定位图像，并规定图像的宽度和高度：
ctx.drawImage(img, x, y, width, height);
语法 3，剪切图像，并在画布上定位被剪切的部分：
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
参数说明：
-
img 规定要使用的图像、画布或视频。
-
sx 表示开始剪切的 x 坐标位置。可选值。
-
sy 表示开始剪切的 y 坐标位置。可选值。
-
swidth 表示被剪切图像的宽度。可选值。
-
sheight 表示被剪切图像的高度。可选值。
-
x 表示在画布上放置图像的 x 坐标位置。
-
y 表示在画布上放置图像的 y 坐标位置。
-
width 表示要使用的图像的宽度（伸展或缩小图像）。可选值。
-
height 表示要使用的图像的高度，（伸展或缩小图像）。可选值。
例子 1，在画布上定位图像并作出一个立体的效果：
对不起，你的浏览器不支持canvas
运行效果为：
例子 2，在画布上定位图像，并规定图像的宽度和高度：
对不起，你的浏览器不支持canvas
运行效果为：
例子 3，剪切图像，并在画布上定位被剪切的部分：
对不起，你的浏览器不支持canvas
运行效果为：
======================================================================
在 HTML5 问世之前，如果我们想要在网页上面展示视频音频，经常会使用到的就是 Adobe Flash 这样的插件，很多人可能和我一样遇到过 Flash 插件崩溃的问题，让人相当烦躁，而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观，在这个实验中，我们将为大家介绍如何在网页中播放我们的视频音频文件。同时，我们也会学习 HTML5 对元素的拖放操作。
下面给大家一个在线的音频视频转换网站：cn.office-converter.com/
知识点
-
HTML5 视频介绍
-
HTML5 音频介绍
-
HTML5 拖放概述
-
HTML5 拖放使用
拖放操作可以很好的实现与用户的交互，拖放操作会带给用户全新的浏览体验，用户不再是只能对着网页滑动鼠标滚轮，而是可以根据设计，操作网页中的某些元素了。
标准
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式和浏览器支持如下所示：
例子：
<source
src="labfile.oss.aliyuncs.com/courses/124…"
type="video/ogg"
/>
<source
src="labfile.oss.aliyuncs.com/courses/124…"
type="video/mp4"
/>
你的浏览器不支持video元素
注：
<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的。video元素允许多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
引入单个文件也可以这样写：
<video
src="labfile.oss.aliyuncs.com/courses/124…"
width="320"
height="240"
controls="controls"
你的浏览器不支持video元素
video 标签的属性如下所示：
这些属性设置都很简单，大家可以自行尝试体验一番。
字幕的简单使用
使用常用的 WebVtt 字幕格式，在 <video> 中使用 <track> 元素引入字幕。例如：
src="labfile.oss.aliyuncs.com/courses/124…"
srclang="zh"
kind="subtitles"
label="中文"
default
/>
src="labfile.oss.aliyuncs.com/courses/124…"
srclang="en"
kind="subtitles"
label="English"
/>
track 元素属性说明：
-
src：指定资源
url。 -
srclang：资源的语言，例如：中文
zh，英文en。 -
kind：默认值是
subtitles字幕，captions标题、音效及其他音频信息，descriptions视频的文本描述，chapters章节导航，metadata元数据。 -
label：选择字幕时候出现的文字。
-
default：
default指的是默认会显示的字幕。例如两个<track>元素，如果都没有default属性，那都不显示，需要用户手动调出。另外，default只能出现在一个<track>元素上。
例子：
首先我们在终端中分别输入以下命令，获取所需字幕文件：
wget labfile.oss.aliyuncs.com/courses/124…
wget labfile.oss.aliyuncs.com/courses/124…
<video
src="labfile.oss.aliyuncs.com/courses/124…"
width="320"
height="240"
controls="controls"
你的浏览器不支持video元素
src="video_ch.vtt"
srclang="en"
kind="subtitles"
label="中文"
default
/>
video_ch.vtt 中的内容为：
WEBVTT 00:00:01.000 --> 00:00:04.000 不准在课堂上打游戏 00:00:05.000 -->
00:00:09.000 好好学习，天天向上！
video_en.vtt 中的内容为：
WEBVTT 00:00:01.000 --> 00:00:04.000 Don't play games in class！ 00:00:05.000
--> 00:00:09.000 Study hard and make progress every day！
运行效果如下所示：
通过上面的案例，我们了解了简单的视频制作以及为视频添加字幕和切换字幕。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
音频格式和浏览器支持如下所示：
例子：
<source
src="labfile.oss.aliyuncs.com/courses/124…"
type="audio/ogg"
/>
<source
src="labfile.oss.aliyuncs.com/courses/124…"
type="audio/mpeg"
/>
你的浏览器不支持audio元素
注：
<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的。audio元素允许多个source元素，source元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。
引入单个文件也可以这样写：
<audio
src="labfile.oss.aliyuncs.com/courses/124…"
controls="controls"
你的浏览器不支持video元素
audio 标签的属性如下所示：
拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。
注：
img元素和a元素（必须指定href）默认允许拖放。
在 Terminal 中输入以下命令获取本节使用到的图片：
wget labfile.oss.aliyuncs.com/courses/124…
图片的下载位置，请注意在后续 html 文件所在同目录下。
浏览器支持：
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
**注释：**在 Safari 5.1.2 中不支持拖放。
#div1 { width: 200px; height: 100px; padding: 10px; border: 1px solid red; }
请把图片拖放到矩形中：
<img
id="drag1"
src="drag-image.png"
draggable="true"
ondragstart="drag(event)"
/>
运行效果为：
下面将为大家一一介绍拖放是如何实现的。
确定是可拖动的
为了使元素可拖放，首先把 draggable 属性设置为 true，再加上全局事件处理函数 ondragstart，如下所示：
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
