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 Backgrounds属性相关介绍
May 11 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python+django实现简单的文件上传
2016/08/17 Python
Python中的默认参数实例分析
2018/01/29 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
劳资专员岗位职责
2013/12/27 职场文书
新领导上任欢迎词
2014/01/13 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
少先队活动总结
2014/08/29 职场文书
2014年采购部工作总结
2014/11/20 职场文书
员工离职通知函
2015/04/25 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android