1.30 表单相关的标签和属性
HTML5可以直接在表单控件中通过required,pattern 等属性来指定客户端的校验规则。
1.表单及表单控件
①label定义标签
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
实例代码:
②botton按钮
button标签用于定义一个按钮，在button标签的内部可以包含普通文本，文本格式化标签，图像等内容，这正是和input 的按钮不同之处。
< button> 控件 与 < input type=“button”> 相比，提供了更为强大的功能和更丰富的内容。
< button> 与 < /button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
- html5新增的表单属性
①autofocus属性
当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获取焦点。由于打开页面时只能有一个控件获的焦点，因此整个页面最多只能有一个表单控件可设置该属性。
②list属性
< datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
为了保证List属性具有较好的、一致性的行为，使用datalist定义下拉菜单时，可以让每个option元素的文本与value属性值完全相同。
实例代码：
③autocomplemete属性
该属性用于设置表单是否支持自动完成功能，如果启用自动完成功能，浏览器会根据用户上次提交的数据生成列表框供用户选择，或提示自动完成。
autocomplemete = on 开启
off关闭。效果不明显
实例代码：
3. html5新增的表单元素
①meter
该标签用来表示一个已知最大值和最小值的计数仪表，比如电池的剩余电量、速度表等。
实例代码：
high number 定义度量的值位于哪个点，被界定为高的值。
low number 定义度量的值位于哪个点，被界定为低的值。
max number 定义最大值。默认值是 1。
min number 定义最小值。默认值是 0。optimum number 定义什么样的度量值是最佳的值。
value number 定义度量的值。
如果该值高于 "high" 属性，则意味着值越高越好。
如果该值低于 "low" 属性的值，则意味着值越低越好。②progress
用于表示一个进度条
max：指定进度条完成时的值
value:指定进度条当前完成的进度值
实例代码：
③客户端校验
required:该属性指定该表单控件必须填写。该属性值是required 或完全省略
pattern: 该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一
个合法的正则表达式。
min、max、step,这三个属性只对数值类型、日期类型的<input/>元素有效，这个属性
控制该表单控件的值必须在min~max之间，并且符合步长。- 绘画
①canvas
html5新增了一个canvas元素，该元素专门用于绘制图形，但实际上，canvas本身并不绘制图形，它只是相当于一张空白画布。
如果想绘制图形必须使用javascript脚本进行绘制。
width：画布的宽度
height：画的高度②绘制几何图形
实例代码：
③点线模式
绘制线段或边框默认总是使用实线，如果想使用点线控制，则可通过设置CanvasRenderingContext2D的setLineDash方法和lineDashOffset属性来实现
setLineDash方法需要一个类型为 sequence的值，每个double值依次控制电线的实线长度、间距.
[2,3] ：代表长为 2的实线，间距为3的间距 这种电线模式
[2,3,1]:代表长为2的实线，距离为3的间距，长为1的实线，距离为2的间距。长为3的
实战，距离为1的间距
[5,3,1,2]代表长为5的实线，距离为3的间距、长为1的实线、距离为2的间距实例代码：
④绘制字符串
CanvasRenderingContext2D为绘制文字提供了如下两个方法：
fillText() :填充字符串
strokeText() 绘制字符串边框
⑤设置阴影
shadowBlur:设置阴影模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度越大
shadowColor:设置阴影颜色
shadowOffsetX:设置阴影在X方向的偏移
shadowOffsetY:设置阴影在y方向的偏移实例代码：
⑥使用路径
beginPath()开始路径
closePath()关闭路径
fill()或stroke()来填充路径或绘制路径边框
arc 向 Canvas的当前路径上添加一段弧
arcTo 向Canvas的当前路径上添加一段弧，定义的方式不同
bezierCurveTo()添加一段曲线
lineTo()把canvas的当前路径从当前结束点连接到x,y对应的点
moveTo()把canvas的当前路径的结束点移动到x,y对应的点
quadraticCurveTo()向canvas的当前路径上添加一段二次曲线
rect向canvas 的当前路径上添加一个矩形。实例代码：
⑦绘制渐变
