HTML5 五大特性
一、正则表达式:
相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下:
<input type="email" pattern="[^ @]*@[^ @]*" value="">
二、数据列表元素:
在没有HTML5的日子里,我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能,而在HTML5中,我们可以直接使用datalist元素,如下:
<form action="/server" method="post">
<input list="jslib" name="jslib" >
<datalist id="jslib">
<option value="jQuery">
<option value="Dojo">
<option value="Prototype">
<option value="Augular">
</datalist>
<input type="submit" value="完成" />
</form>
三、下载属性:
HTML5的下载属性可以允许开发者强制下载一个页面,而非加载那个页面,这样的话,你不需要实现服务器端的一些功能来达到同样的效果,是不是非常贴心?
<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a>
四、DNS的预先加载处理
要知道DNS的的解析成本很高滴,往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式,它将域名缓存后,当用户点击其它页面地址后自动的获取。
如果你希望预先获取NDS,你可以控制你的浏览器来解析域名,例如:
<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">
五、链接网页的预先加载处理
要知道链接能够在也页面中帮助用户导航,但是页面加载的速度快慢决定了用户体验的好与坏,使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源,这样用户点击的时候,会发现页面加载速度提高了。
<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />
或者可以使用prerender属性,这个属性能够帮助你提前加载整个页面,如下:
<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />
通过设置这个属性,登录极客社区后,极客搜索页面已经加载了,这样如果你需要搜索,页面会立刻加载,相信你的用户肯定喜欢访问这样的网站!
HTML5 五大特性的更多相关文章
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- 前端开发攻城师绝对不可忽视的五个HTML5新特性
HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程.还记得以前我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标,HTML ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性:FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
随机推荐
- 苹果禁用UUID了,咋办?
By now you have probably heard that Apple is deprecating support for attaining a UDID from an iOS de ...
- 20155334 2016-2017-2 《Java程序设计》第六周学习总结
20155334 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章:输入/输出 InputStream与OutputStream java将输入/输出抽 ...
- [label][JavaScript][The Defined Guide of JavaScript] 如何声明变量
因为觉得我自己的JavaScript基础很不扎实,或者可以说根本就没有所谓基础,所以就最近一直在看<The Defined Guide of JavaScript> . 在一边看的同时,我 ...
- EBS SOA 修改Web Service参数
l 需求描述 当把PL/SQL声明Load到ISG,生成WSDL并部署完毕后,需要修改PL/SQL的包头声明部分.例如修改某个过程的参数类型,再重新Load,重新生成WSDL,重新部署.我们会发现PL ...
- ORACLE EBS中查看系统已经打过的补丁
SELECT COUNT (BUG_NUMBER) FROM AD_BUGS WHERE BUG_NUMBER LIKE '%7303031%' --对应 patch号 ; --TABLESAD_ ...
- TestNG(一)——起步
你可以从 http://testng.org/doc/documentation-main.html 获取信息. 一.简介 TestNG是test next generation的缩写,即下一代测试技 ...
- linux apache安装https证书
1.首先查看是否安装apache 命令:rpm -qa|grep httpd 如果存在,卸载命令:rpm -e XXXX 如果不存在,安装命令:yum install httpd 安装完apache之 ...
- 纸壳CMS列表Grid的配置
纸壳CMS(ZKEACMS)里的Grid是一个TagHelper,是对jQuery插件datatables的一个配置封装. Easy.Mvc.TagHelpers.GridTagHelper grid ...
- 关于.NET Core 2.0.2升级到2.1.1版本相关问题
之前,因日常任务管理比较混乱,所以自己开发了PTager任务管理系统. 当时用了.NET Core 2.0版本. 现在想修改相关功能,但.NET Core已发布到2.1.301了,也即2.1.1. 附 ...
- DS博客作业01-日期抽象数据类型的设计与实现
1.思维导图和学习体会 1.1绪论知识思维导图 1.2学习体会 通过这几节课数据结构的新学习,让我感到了难度,很多概念性的东西,不是很好理解,老师在讲内容的时候,很容易跟不上节奏,我发现这门课的学习一 ...