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

From : http://www.oschina.net/news/41995/good-html5-features?from&＃61;20130707

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

在今天这篇技术分享文章中&＃xff0c;我们将介绍几个HTML5的重要特性&＃xff0c;能够帮助你提高整个web应用的使用体验和开发效率&＃xff0c;相信大家会感兴趣的&＃xff01;

特性一&＃xff1a;正则表达式

相信大家都会非常喜欢这个特性&＃xff0c;无须服务器端的检测&＃xff0c;使用浏览器的本地功能就可以帮助你判断电子邮件的格式&＃xff0c;URL&＃xff0c;或者是电话格式&＃xff0c;防止用户输入错误的信息&＃xff0c;通过使用HTML5的pattern属性&＃xff0c;我们可以很方便的整合这个功能&＃xff0c;代码如下&＃xff1a;

运行如下&＃xff1a;

如果在Firefox浏览器中运行&＃xff0c;并且输入错误的email地址&＃xff0c;会看到如下&＃xff1a;

GBdebug在线调试地址&＃xff1a;http://www.gbin1.com/gb/debug/3465707b-8071-40fa-a159-4356a0a17a52.htm

特性二&＃xff1a;数据列表元素

在没有HTML5的日子里&＃xff0c;我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能&＃xff0c;而在HTML5中&＃xff0c;我们可以直接使用datalist元素&＃xff0c;如下&＃xff1a;

运行代码&＃xff1a;

如果你输入字母“j"&＃xff0c;可以看到如下的自动补齐效果&＃xff1a;

GBdebug在线调试地址&＃xff1a;http://www.gbin1.com/gb/debug/0c8a7fea-4a30-4cc4-9282-1921e1251726.htm

特性三&＃xff1a;下载属性

HTML5的下载属性可以允许开发者强制下载一个页面&＃xff0c;而非加载那个页面&＃xff0c;这样的话&＃xff0c;你不需要实现服务器端的一些功能来达到同样的效果&＃xff0c;是不是非常贴心&＃xff1f;

特性四&＃xff1a;DNS的预先加载处理

要知道DNS的的解析成本很高滴&＃xff0c;往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式&＃xff0c;它将域名缓存后&＃xff0c;当用户点击其它页面地址后自动的获取。

如果你希望预先获取NDS&＃xff0c;你可以控制你的浏览器来解析域名&＃xff0c;例如&＃xff1a;

特性五&＃xff1a;链接网页的预先加载处理

要知道链接能够在也页面中帮助用户导航&＃xff0c;但是页面加载的速度快慢决定了用户体验的好与坏&＃xff0c;使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源&＃xff0c;这样用户点击的时候&＃xff0c;会发现页面加载速度提高了。

或者可以使用prerender属性&＃xff0c;这个属性能够帮助你提前加载整个页面&＃xff0c;如下&＃xff1a;

通过设置这个属性&＃xff0c;登录极客社区后&＃xff0c;极客搜索页面已经加载了&＃xff0c;这样如果你需要搜索&＃xff0c;页面会立刻加载&＃xff0c;相信你的用户肯定喜欢访问这样的网站&＃xff01;

以上就是我们今天分享的五个实用的HTML5特性&＃xff0c;希望大家喜欢&＃xff0c;如果你也有其它的好的技巧和特性分享&＃xff0c;请发布到我们的极客标签社区。感谢阅读&＃xff01;