一、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)