一、正则表达式:

相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,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 五大特性的更多相关文章

  1. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  2. 前端开发攻城师绝对不可忽视的五个HTML5新特性

    HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程.还记得以前我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标,HTML ...

  3. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  4. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  5. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  6. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  7. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  8. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  9. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

随机推荐

  1. 密码分析:使用 Ettercap 和 它的 ARP 毒化功能来嗅探流量

    vim /etc/etterconf 将 ec_uid 和 ec_gid 改为 0 需要取消下面的 IPTABLES 行的注释.它在靠近文件末尾的 LINUX 一节 ettercap -G Shift ...

  2. polymer技巧

    1.添加一个div元素 我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" <script> var Poly ...

  3. 在改变某一项目的svn的地址,relocate

    不要忘记删除原有.svn文件.

  4. Java对象和XML转换

    有时候,我们需要把Java对象转换成XML文件.这时可以用JAXB来实现.(JDK1.6及以后的版本无需导入依赖包,因为已经包含在JDK里了) 假如某个公司有许多部门,每个部门有许多职员,我们可以这样 ...

  5. Spring IOC 和 AOP概述

    IoC(控制反转,(Inversion of Control):本来是由应用程序管理的对象之间的依赖关系,现在交给了容器管理,这就叫控制反转,即交给了IoC容器,Spring的IoC容器主要使用DI方 ...

  6. devexpress停靠菜单

    dxDockSite1.Width := 27; dxDockPanel1.DockTo(dxDockSite1, dtLeft, 0); dxDockPanel2.DockTo(dxDockPane ...

  7. mysql快速插入大数据

    说的是插入数据,这个倒像是载入数据. 上一篇,是按照插入数据来写的,就是insert into,当时插入一万条实在是太慢了,大概是286734毫秒. insert into table values, ...

  8. 自己从0开始学习Unity的笔记 IV (C#循环练习-数字猜谜游戏)

    想起来现在基础的已经学了不少了,那么这次试一下用while写一个数字猜谜的. Random roll = new Random(); //建立一个骰子 , ); //让骰子在1-100内随机一个数 ; ...

  9. 自己从0开始学习Unity的笔记 II (C#条件语句基础练习)

    首先,自己用了下三目表达式,来做了一个闰年的判断,也就是能被400整除,或者是能够被4整除,但是不能被100整除的年份. int year; //输入的年 bool fourHunderd; //能被 ...

  10. 深入了解java虚拟机(JVM) 第八章 常见的jvm调优策略

    一般来说,jvm的调优策略是没有一种固定的方法,只有依靠我们的知识和经验来对项目中出现的问题进行分析,正如吉德林法则那样当你已经把问题清楚写出来,就已经解决了一半.虽然JVM调优中没有固定的策略,但是 ...