一、HTML5简介
2014年10月29日，HTML5标准规范制定完成，并公开发布。
二、HTML5页面结构
HTML5提供了新的语义元素来明确一个Web页面的不同部分。
<header>：定义文档的头部区域。
<nav>：定义导航链接的部分。
<section>：定义文档中的小节。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。
<article>：定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<aside>：定义页面主区域内容之外的内容（比如侧边栏）。
<figure>：标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>：定义 <figure> 元素的标题。
<footer>：定义页面底部区域
各标签在页面中的大体位置为
三、HTML5新表单
1、input新类型 （都比较简单，练一下就知道干什么的了）
email类型 -填写邮箱， 验证是否包含"@"，但是验证逻辑不完整
url类型 - 填写网址，验证是否包含"http://"，但是验证逻辑不完整
tel类型 - 只在移动端显示数字按键
number类型 - 数字类型 框中有上下键可改变数字，min为最小值，max为最大值，step为步长，默认为一
range类型 - 范围类型，手动滑动选择值，value为设置的默认值，<input type="range" min=0 max=10 step=1 value=5>
date类型 - 日期选择类型
color类型 - 颜色选择类型 search类型 - 搜索类型
2、表单新元素
① datalist元素 - 定义备选项（并不显示），效果与<select>下拉列表类似，实现列表内容与现实分离，列表内容可多次被引用
<datalist id="mylist">
<option>北京</option>
<option>天津</option>
</datalist>
<input type="text" list="mylist">
②progress元素 - 进度条属性，max设置进度条最大值，无min属性，最小值为0，value代表当前进度值
③meter元素 - 刻度值，min最小值，max最大值，value当前刻度值， low低预警值（设置的值在min与max之间），value低于low值时<meter>元素会变色，high高预警值（设置的值在min与max之间，并且比low大），value高于high值时<meter>元素会变色，颜色与low的颜色不同
④output元素 - 输出
3、表单新属性
* placeholder - 提供默认提示内容，设置提示文字，类似背景 ，常用 * autofocus - 自动获取焦点，如果为表单设置了这个属性，可以一进入页面就可以获得焦点
multiple - 允许输入多个值， 多个值之间使用","
form - 允许表单元素定义在表单之外，基本yong用不到
4、表单新验证
1） 验证属性
① required属性
验证当前元素值是否为空
② pattern属性
使用正则表达式验证当前元素值是否匹配， 注意 - 并不能验证当前元素值是否为空
<input type="text" pattern="^[a-zA-Z]{6,12}$">
③ min和max属性
验证当前元素值最小值或最大值，一般用于range或者number
④ minlength和maxlength属性
minlength - 验证当前元素值的最小长度，输入值时,允许输入小于指定值，提交表单时,验证元素值最小长度
minlength并不是HTML5新属性
maxlength - 验证当前元素值的最大长度， 输入值时,长度不能大于指定值
⑤validity属性
表单验证HTML5提供一种有效状态，有效状态通过validityState对象获取到
validityState对象可通过validity属性得到
2） 验证(有效)状态
validityState对象提供了一系列的有效状态，通过这些有效状态,进行判断
注意 所有验证状态必须配合上述的验证属性使用
作用 用来替换原本手工实现的逻辑
验证状态
① valid
作用 - 判断当前元素值是否正确
注意
该状态返回true,表示验证成功
该状态返回false,表示验证失败
②valueMissing
作用 - 判断当前元素值是否为空
用法 - 配合required属性使用
③typeMismatch
作用 - 判断当前元素值的类型是否匹配
用法 - 配合email、number、url等
④ patternMismatch
作用 - 判断当前元素值是否与指定正则表达式匹配
用法 - 配合pattern属性使用
⑤ tooLong
作用 - 判断当前元素值的长度是否正确
用法 - 配合maxlength属性
注意
使用maxlength属性后,实际不可能出现长度大于maxlength的值
tooLong很难出现这种情况
⑥ rangeUnderflow
作用 - 判断当前元素值是否小于min属性值
用法 - 配合min属性
注意 - 并不能与max属性值进行比较
⑦ stepMismatch
作用 - 判断当前元素值是否与step设置相符
用法 - 配合step使用
注意 - 并不能与min或max属性值进行比较
⑧customError
用法 - 配合setCustomValidity()方法
如果使用该方法,该状态返回true
⑨setCustomValidity()方法
作用 - 设置自定义的错误提示内容
问题 - 使用该方法设置错误信息
当输入正确时,调用该方法将信息设置为空("")
不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)