文档章节

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

欢乐小金鱼
 欢乐小金鱼
发布于 2015/04/03 17:00
字数 856
阅读 14
收藏 0

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


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


特性一:正则表达式

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


<input type="email" pattern="[^ @]*@[^ @]*" value="">

运行如下:


如果在Firefox浏览器中运行,并且输入错误的email地址,会看到如下:


回到顶部


特性二:数据列表元素

在没有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>

运行代码:


如果你输入字母“j",可以看到如下的自动补齐效果:


特性三:下载属性

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


<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a> 

特性四:DNS的预先加载处理

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


如果你希望预先获取NDS,你可以控制你的浏览器来解析域名,例如:


<link rel="dns-prefetch" href="//www.baidu.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.baidu.com/gb/users.htm" />

<link rel="prefetch" href="http://www.baidu.com/gb/networks/themes/img/logo_small.jpg" />

或者可以使用prerender属性,这个属性能够帮助你提前加载整个页面,如下:


<link rel="prerender" href="http://www.baidu.com/gb/search.htm" />

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


本文转载自:http://www.open-open.com/news/view/102a2de

共有 人打赏支持
欢乐小金鱼
粉丝 9
博文 14
码字总数 6977
作品 0
海淀
程序员
私信 提问
前端开发攻城师不可忽视的五个HTML5新特性

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

gbin1
2013/07/03
6.2K
17
前端开发攻城师绝对不可忽视的五个HTML5新特性

特性一:正则表达式 相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTM...

大雄小熊
2014/01/21
0
0
Dabblet,简洁实用的 HTML 和 CSS 代码段在线测试工具

跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题。为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧。于是,jsF...

虫虫
2012/02/16
1K
3
2016iWeb峰会上海站开始报名

由国内最大HTML5社区梦工场举办的第五届HTML5峰会上海站全新来袭!活动将于6月4日在上海小南国花园酒店拉开序幕。把脉2016行业脉搏寻发展,问鼎2016前沿技术共进步。本次峰会全程免费,超过1...

HTML5梦工场
2016/05/10
608
2
2016第五届HTML5峰会“iWeb峰会”暨攻城狮嘉年华(北京站)

由中国最大的HTML5社区——HTML5梦工场主办的iWeb峰会暨HTML5峰会,已历经四届。2012年携手W3C主办的主题为“HTML5在路上”的峰会,HTML5行业的关注焦点还集中于工具、应用市场、浏览器与渠道...

H5梦工场
2016/07/19
1K
7

没有更多内容

加载失败,请刷新页面

加载更多

spring学习笔记(二)spring 事件的使用

spring 中的事件 spring事件通过订阅发布 可以解耦操作 可以同步 可以异步 步骤 编写事件 通过继承org.springframework.context.ApplicationEvent 来编写事件 public ApplicationEvent(Obj...

NotFound403
30分钟前
1
0
特斯拉车主成功破解了自己Model 3汽车

据汽车博客Electrek消息,一位特斯拉车主成功破解了自己Model 3汽车,还在此基础上运行了Ubuntu。 这位叫trsohmers的网友表示,“功劳大多要归到Ingineerix的头上,他花了数月才找到初始的那...

linuxCool
44分钟前
1
0
Gitbook : random errors when using gitbook plugin on running "gitbook serve"

在执行gitbook serve时,会有不定的失败错误 参考问题 :#1309 解决方案: 更新gitbook版本,这个问题似乎是3版本的问题 , 官方也不打算在这个版本解决了。 更新 到最新版本后, 不再出现问...

ol_O_O_lo
58分钟前
1
0
提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字

提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字: 作者:王健茜;断断续续一个多月才读完了《中国文化的深层结构》,这并不是一本难懂的书,之所以读得慢,源于对书中观点的思...

原创小博客
今天
1
0
高德地图-行政区域接口

1、获取全国各省信息 https://restapi.amap.com/v3/config/district?extensions=all&key=应用Key&s=rsv3&output=json 2、获取下级行政区域信息 https://restapi.amap.com/v3/config/distric......

voole
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部