关于html5新增的属性:

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 属性规定当页面加载时按钮应当自动地获得焦点。)

这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了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新增的属性的更多相关文章

  1. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  2. HTML5 新增通用属性

    一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了.   <table>  :用于表格定义.    cellpadding: 单元格内容和单元格边框距离    ...

  3. 全栈JavaScript之路(十七)HTML5 新增字符集属性

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  4. HTML5新增常用属性

    一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段 ...

  5. HTML5新增标签属性

    ----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" ...

  6. html5新增全局属性

    data-* 如:data-type,data-role等 hidden  <div hidden></div> 隐藏该div spellcheck <textarea ...

  7. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  8. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  9. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. C#绘制传感器代码

    //以下代码添加到任一窗口下即可        private int 旋转角度 = 0;        private int 边长 = 10;        protected override ...

  2. 读《JavaScript DOM编程艺术》

    国庆假期花了三四天看了这本书,书很薄,因为是入门书,干货也不是很多. 4. childNodes nodeType nodeValue firstChild lastChild childNodes返 ...

  3. Nginx ssl证书部署

    查看当前安装的OpenSSL版本所支持的密码列表,可以使用下列命令:openssl ciphers 苹果ATS检测:https://www.qcloud.com/product/ssl 刚开始&quo ...

  4. adb无法使用,提示error: unknown host service的解决办法

    此时,需要辨别电脑的5037端口被哪个应用程序占用的方法:(使用adb时需要5037端口是空闲的) 1. 打开命令行,输入命令:netstat -ano |findstr "5037&quo ...

  5. touches, targetTouches, changedTouches 区别

    1. touches: A list of information for every finger currently touching the screen2. targetTouches: Li ...

  6. 记一次项目中的css样式复用

    本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...

  7. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  8. js中自己实现each方法来遍历多维数组

  9. Device eth0 does not seem to be present, delaying initialization. 问题

    今天在复制vmware的时候 出现网卡无法启动 报错显示 Device eth0 does not seem to be present, delaying initialization. 这个错误原 ...

  10. Java abstract class 和 interface 的区别

    Java abstract class 和 interface 的区别 1. abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制 2. 以Door的抽象概 ...