五个HTML5新特性

特性一:正则表达式

通过使用HTML5的pattern属性,代码如下:

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

特性二:数据列表元素

使用一些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-Prefetching[https://github.com/h5bp/html5-boilerplate/wiki/DNS-Prefetching]

<link rel="dns-prefetch" href="//www.gbin2.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">

或者

<meta http-equiv="x-dns-prefetch-control" content="on" />

特性五:链接网页的预先加载处理

HTML5的prefetch属性对指定的地址预加载页面或者页面中的特定资源,这样用户点击的时候,会发现页面加载速度提高了。

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

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

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

你可能感兴趣的:(五个HTML5新特性)