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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
详解CSS不受控制的position fixed
May 25 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
js有关元素内容操作小结
2011/12/20 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
会计自荐书
2013/12/02 职场文书
大学社团计划书
2014/05/01 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
自我检讨书范文
2015/01/28 职场文书
小学校长个人总结
2015/03/03 职场文书
债务纠纷起诉书
2015/05/20 职场文书
初中家长意见
2015/06/03 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python