在开始之前,先来了解一下HTML5的声明,<doctype html>,通过HTML的声明,体现W3C故意弱化HTML的版本,但是小标要说明下版本不更新,不等于内容不更新,而是W3C希望HTML5是融合版本。关于HTML的发展历史, HTML的规范不严格一直以来就是前端开发人员头疼的地方, 元素定义大小写不敏感。
直到XHTML 1.0的出现 - 前端开发人员拥抱,因为此时的HTML只允许小写
XHTML 2.0版本出现后 - 前端开发人员重新回到HTML, 推翻了之前很多习惯
HTML 4版本出现之后 - 比较好的版本
HTML 5版本出现 - 经历8年后,终于在2014年10月底发布
HTML5的特点:移动端浏览器相比PC端浏览器对H5的支持更好,这要感谢苹果公司 - 乔布斯
小编提醒大家:目前网上所谓的H5,并不是指现在所学HTML5技术,HTML5的新特性内容不多,与JS(难)配合使用
那么实际工作中使用多不多?其实实际上来说,相对并不多
其实就是在为将来学习 - HTML5将来一定是主流。
*******华丽分割线*******
接下来开始学习,HTML5必学知识点—新表单,主要从4个方面入手:新类型、新元素、新属性、新验证
首先是INPUT新类型,新增了以下类型:
1.email类型 - 判断字符串中是否包含"@"符号,注意的是不能以"@"开始、不能以"@"结束
2.搜索类型 - search
3.URL类型 - 判断字符串中是否包含"http:",注意的是以"http:"开始,验证通过,以"http:"结束,验证通过
4.电话号码类型 - tel,注意的是只有在手机端浏览器访问时有效果
5.数字类型 - number,需要注意的是允许输入非数字内容,但是不允许提交,在设置min和max时,允许输入范围外的值,不允许提交;这个类型有一些属性: min - 设置数字的小值;max - 设置数字的大值;step - 设置步长,每次增加或减小的量值
6.范围类型 - range,效果就是滑动条,属性:min - 小值、max - 大值、step - 步长、value - 当前值
7.颜色类型 - color
8.日期类型 - date,日期格式 - yyyy/MM/dd
9周、月份类型 (实际很少使用)
10周 - week(实际很少使用)
11月份 - month(实际很少使用)
第二部分是表单新元素
1.<datalist>元素,用法:需要配合input元素使用,在input元素中定义list属性(值为datalist元素的id值),好处就是数据与结构的分离
2.<progress>元素,就是实现一个进度条,属性有:max - 设置进度条的大值、value - 设置进度条当前的值
3. <meter>元素,用法和<progress>元素类似,作用 - 刻度,属性包括:min和max - 设置小值和大值、 value - 表示当前值,high和low - 设置预警值(举个常见的例子,当你手机的电量小于10%时候,一般会显示红色的一小段进度)
4.<output>元素,和输入框正好相反,是输出框,属性:for指定要输出的元素进行关联(实际开发中,很少使用)
第三部分是表单新属性
1.placeholder属性:就是实现input输入框的默认提示信息,相比value属性值更好用。这个在实际开发过程中非常常见
2.autofocus属性:就是自动获取焦点、用法有点不同,它不是key=vlaue的形式,而是直接只定义属性名(没有属性值)
3.multiple属性:就是允许输入框输入多个值,用法和autofocus一样只定义属性名(没有属性值)
4.form属性(实际开发中用到不多):就是表单元素定义在表单之外,用法 - 值是相关表单的id属性值
第四部分是表单新验证(这是一个难点,也是重点)
1.验证属性:
required属性即:验证是否为空?返回false,表示当前元素值为空, 返回true,表示当前元素值不为空
pattern属性即:验证正则表达式,定义正则表达式时,不能添加"//", 正则表达式不能验证是否为空
min和max属性即:验证小值和大值 ,只和number类型的input元素配置使用
minlength和maxlength属性即:验证小长度和大长度,minlength - 验证小长度,maxlength - 限制大长度(输入内容的长度不能大于maxlength的值)
validity属性即:HTML5提供表单验证的接口,通过该属性得到validityState对象,该对象提供一系列的有效状态, 有效状态可用于表单验证,得到validatyState对象,elem.validaty - 得到该对象
2.有效状态
valid - 返回Boolean,表示验证是否通过,true - 表示验证通过, false - 表示验证失败,
valueMissing - 表示值是否为空,返回值true - 表示元素值为空(错误)、false - 表示元素值不为空(正确) 注意该状态配合required属性使用
typeMismatch - 表示元素类型是否匹配,返回值true - 表示元素类型不匹配、false - 表示元素类型匹配、 该状态配合email、url、number等使用
patternMismatch - 表示正则表达式是否匹配、返回值true - 表示正则表达式不匹配、false - 表示正则表达式匹配,该状态配合pattern属性使用
tooLong - 表示元素内容长度是否过长,返回值true - 表示元素内容长度过长,false - 表示元素内容长度不长,该状态配合maxlength属性使用
maxlength属性 - 限制属性,tooLong可能不会出现(完整性)
rangeUnderflow - 表示元素值是否小于min值,返回值true - 表示元素值小于min的值,false - 表示元素值不小于min的值 该状态配合min属性使用
stepMismatch - 表示元素值与step值是否不符,返回值true - 表示元素值与step值不符,false - 表示元素值与step值相符 该状态配合step属性使用
customError - 自定义错误,配合setCustomValidity()方法使用,作用就是替换之前的判断表达式,自定义错误提示信息setCustomValidity(自定义错误信息),一旦调用该方法,默认认为就是错的,上述所有的有效状态返回错误值 验证正确时,调用该方法,将错误信息置为空
热点新闻
前端开发技术库