HTML5新特性

特性一：正则表达式

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

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

特性二：数据列表元素

在没有HTML5的日子里，我们会选择使用一些JS或者知名的jQueryUI来实现自动补齐的功能，而在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" />

特性六：占位符(Placeholders)

Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失；失去焦点时如果内容为空，提示文字又出现。按照以往的做法，我们需要使用一点JavaScript代码实现占位符效果，例如我之前的“文本框/域文字提示自动显示隐藏jQuery小插件”一文所展示的。当然，你需要设定一个初始的默认的value值，然后根据输入内容进行判断，从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性，一切就轻松了。

<label for="email">邮箱:</label> <input id="email" type="email" placeholder="[email protected]" size="26" />

特性七：本地存储(LocalStorage)

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

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

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

localStorage.setItem('savePwd',"122323");
localStorage.removeItem('savePwd');
localStorage.getItem('savePwd');
window.sessionStorage.setItem("aaa","aaa");
window.sessionStorage.getItem("aaa");
window.sessionStorage.removeItem("aaa");

还有其它一些操作，不一一举例。

特性八：Audio支持、Video支持、视频预载(PreloadVideos)、显示控制条

<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio>

<video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video>

特性九：data属性(TheDataAttribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

<h1id=someIdcustomAttribute=value>小样，胆儿挺肥的呢</h1>…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div>检索自定义属性的价值
var theDiv = document.getElementById('myDiv'); var attr = theDiv.getAttribute('data-custom-attr'); alert(attr);

特性十：必要的属性(RequiredAttribute)

<form action="" method="get"> <label for="name">姓名:</label> <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" /> <button type="submit">提交</button> </form>

如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果

特性十一：Autofocus属性

如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>

有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。

特性十二：内容可编辑

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>