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.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 Web Storage======================================

 

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中(tenfy: 当然不同的浏览器如何判断两个页面是否属于同一session也是不同的)的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

 

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的（一个网页的cookie本来也只有有限的4k空间），并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生

 

html5 web storage的浏览器支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码：

 

[javascript] view plaincopy

1. if(window.localStorage){  
2.     alert("浏览支持localStorage")  
3. }else{  
4.    alert("浏览暂不支持localStorage")  
5. }  
6. //或者  
7. if(typeof window.localStorage=='undefined'){  
8.          alert("浏览暂不支持localStorage")  
9. }  

 

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等