HTML5的新特性--基础知识（1）
HTML5表单元素：
input类型：电子邮件类型、搜索类型、URL类型、电话号码类型、数字类型、范围类型、颜色类型、日期类型、周类型、月类型、日期与时间类型、本地日期与时间类型
在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码。上述的不足，都已经在HTML5中被克服了。HTML5在以上的基础上增加了新的标签和属性。
电子邮件类型：
语法：
自动进行验证，如果不通过则会显示错误提示。
搜索类型：
输入关键字操作的文本框，基本上和文本框一样，但是能快速实现文本的删除切换
语法：
URL类型：
输入web站点地址的文本框,严格要求输入的网址必须以http:\\开头
语法：
例：
| 名称 | 控件 | 说明 |
|---|---|---|
| Email类型 |
|
要求用户输入Email类型数据，提交表单时，会自动验证 |
| Search类型 |
|
搜索文本框，与text相似，特点是数据允许被快速删除 |
| URL类型 |
|
对用户输入的数据进行URL检测，如果不符合规范，给出提示，阻止表单提交 |
HTML5是支持移动终端的
电话号码类型：主要针对电话号码的输入，能够指示浏览器根据不同的设备进行调整。
注意：只对移动终端有效，会显示出拨号键盘，通过该键盘接收用户录入的数据。可以在笔记本上架一个服务器，然后用手机访问笔记本上的这个网页
数字类型：只能接收数字值
语法：
属性：min:当前域能够接收的最小值
max:当前域能接收的最大值
step:决定了域所接收值递增或递减的步长，默认为1
例：
范围类型：
value:设定初始值
例：
2
颜色类型：
预定义的颜色拾取控件：
语法：
例：
自定义调色器：
通过三个范围选择控件表示R、G、B，并且默认为0，最大为255
练习1：通过三个滑块选取颜色值，并且显示在div的背景上
step1：由于获取处理的数值都是0~255,赋值方式rgb(255,255,255)
div.style.backgroundColoe=rgb(255,255,255)
step 2 : 让三个滑块执行同一事件 ， 事件中，获取三个滑块的值，构建成 rgb(v1,v2,v3)
css颜色组成:
1、red
2、#112233
3、rgb(0-255,0-255,0-255) 通过rgb来指定颜色
4、rgba(0-255,0-255,0-255,0-1) 通过rgb以及alpha指定颜色
R:0
G:0
B:0
日期类型：创建一个日期输入域
语法：
例：
周类型：与date类型相似，但是只能选择周
语法：
例：
月份类型：与date类型相似，但是只能选择一个月份
语法：
通过箭头选取日期时间（Safari）
弹出一个日历控件，允许选择年月日，通过按钮选取时间
表单属性
Placeholder属性：常用于search输入类型，也可用在文本域，可用于提示用户输入正确的内容。
value一般不做用户提示，用placeholder来提示好点
required属性：防止表单为空的提示效果
语法:
required属性只要出现在表单元素中就行，无论后面写的是false、true，想做非空，不写就行
multiple属性：可以用在一些输入类型中，从而支持在一个域中输入多个值，但是所插入的值必须用逗号隔开。
语法：
Autofocus属性：在网页加载时自动让域获得焦点，方便快捷的定位元素
pattern属性：作用是实现元素的验证，它支持正则，用于快速实现自定义表达式验证,pattern等号后面写正则表达式，提交表单时会自动进行验证
语法：
例：
| 名称 | 控件 | 说明 |
|---|---|---|
| Email类型 |
|
要求用户输入Email类型数据，提交表单时，会自动验证 |
| Search类型 |
|
搜索文本框，与text相似，特点：数据允许被快速删除
|
| URL类型 |
|
对用户输入的数据进行Url检测，如果不符合规范，给出提示，阻止表单提交
|
| tel类型 |
|
注意：指对移动终端有效，会显示出拨号键盘,通过该键盘接收用户录入的数据
|
| 数字类型 |
|
只能接收数字，min表示数字范围下限值，max表示数字范围上限值，step表示步长
|
| 范围类型 |
|
提供一个滑块工具给用户去选择指定范围内的数值
|
| 颜色类型 |
|
弹出一个调色板提供给用户选取颜色
|
| 日期类型 |
|
弹出日历框供用户选择，用户可以精确选择到某一天
|
| 周类型 |
|
弹出一个日历控件，用户能够选取一个星期的时间
|
| 月类型 |
|
弹出一个日历控件，允许用户选择一个月
|
| 日期与时间 |
|
通过箭头选取日期时间(Safari)
|
| 本地日期与时间类型 |
|
弹出一个日历控件，允许用户选择年月日，通过按钮选取时间
|
| Placeholder |
|
默认显示一段文字在表单元素上
|
| Required |
|
要求当前元素必须录入值，否则表单不允许提交
|
| Multiple |
|
允许用户输入多段数据，但必须使用',' 进行分割
|
| Autofocus |
|
网页加载时，让控件自动获取焦点
|
| Pattern |
|
自定义正则表达式验证当前控件中的值，如果值不满足验证规则，表单则无法提交
|
表单属性是可以组合使用的
Form属性，可用于在from标签之外声明表单元素
语法：
例：
用户名称：
新用户名称：
新表单元素：
detalist元素,progress元素,meter元素,output元素
detalist元素：可以创建一组列表项，相当于select属性，但是需要放在输入框上才能使用，用户看的是label的值，但是选的时候是value值
detalist元素写完后自己本身是没有什么效果的，他是提交给其他控件使用的
progress元素：表示一个任务的当前完成进度，而且通常这些任务都在表单中启动和处理。
属性：value（任务执行的进度），max（声明任务完成后达到的值）
Meter元素：用于显示刻度，而非进度
属性：min、max：设置范围便捷
value：确定测量的值
low、high、optimum：将范围划分为不同的部分和设置最佳位置
output元素：通常用于显示表单元素处理的结果值，显示表单控件与表单控价的处理结果
属性：for，将output元素与参与计算的源元素相关联，目的为了提高代码可读性
例：
滚动条:
刻度表:
0