HTML5新增加的功能详解


Posted in HTML / CSS onSeptember 05, 2016

HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能。

绘画CANVAS;

用于播放媒体的video和audio元素;

本地离线存储localstorage长期存储数据,浏览器关闭后数据不丢失;sessionstorage的数据在浏览器关闭后自动删除;

语义化更好的内容元素如:article、footer、header、nav、section;

表单控件,type属性有calendar、date、time、email、URL、search;

移除的元素有:纯表现的元素:basefont,big,center,font,s,strike,tt,u;对可用应产生负面影响的元素:frame,frameset,noframes;

支持HTML5新标签:ie8/ie7/ie6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持html5新标签,浏览器支持新标签后,还需要添加标签默认的样式。

其中input标签增加了许多新属性,我来列举一下:

对input、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效,当输入框获取焦点时,提示字符消失。

这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即可直接输入。

对input的datepickers,number,range增加了max,min,step属性。max属性规定输入域所允许的最大值。

min属性规定输入域允许的最小值。

step属性为输入域规定合法的数字间隔。(假如 step="3",则合法数字应该是 -3、0、3、6,以此类推)step 属性可以与 max以及 min 属性配合使用,以创建合法值的范围。

pattern属性

pattern属性用于验证输入字段的模式,其实就是正则表达式,不用再写js绑定正则验证了,非常方便。

pattern属性适用于input的text,search,url,telephone,email,password。

举例:给输入框定义了 Pattern 为“[A-z]{3}”,也就是包含三个字母的正则表达式约束,如果输入不合法,我们会看到如下效果。

multiple属性

multiple属性规定输入域中可选择多个值。

multiple属性适用于input的email,file。允许上传时一次上传多个文件。

以上这些就是我所知道的关于html5的新标签和功能。

关于这篇HTML5新增加的功能详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 #HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 #HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 #HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 #HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 #HTML / CSS
Html5元素及基本语法详解
Aug 02 #HTML / CSS
Html5 web本地存储实例详解
Jul 28 #HTML / CSS
You might like
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Node.js学习入门
2017/01/03 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
新闻学毕业生自荐信
2013/11/15 职场文书
教师实习自我鉴定
2013/12/18 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
五水共治一句话承诺
2014/05/30 职场文书
创先争优标语
2014/06/27 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
储备店长岗位职责
2015/04/14 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS