脚本宝典收集整理的这篇文章主要介绍了html5教程-事半功倍：你应该知道的HTML5五大特性，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

HTML5技术中有这样5个特性，它们能够让你实现事半功倍的开发效果，它们分别是：DNS Prefetching、Link Prefetching、Download属性、Regular Expressions以及Datalist元素。 HTML5的诞生为Web App以及移动App开发带来了许多新鲜有趣的JavaScript与HTML API。本文将介绍5个能够让你事半功倍的HTML5特性。

 

1. DNS Prefetching

DNS主机名解析有时会出现拖慢网站速度的问题。现代浏览器当遇到DNS解析时已经十分聪明——用户在跟随某个链接之前，浏览器先尝试解析域名再将其进行缓存。

DNS Prefetching特性允许开发者手动控制，告诉浏览器需要解析哪个域名。代码如下：

[html] <link rel="dns-prefetch" href="//fonts.googleapis.com"> 
<link rel="dns-prefetch" href="//google-analytics.com"> 
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//platform.twitter.com"> 

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//platform.twitter.com">
2. Link Prefetching

Link Prefetching特性允许开发者在页面加载的时候预先加载他们希望指定的页面或元素。代码如下：

[html] <link rel="prefetch" href="http://daker.me/2013/05/hello-world.html" /> 
<link rel="prefetch" href=http://up.2cto.com/2013/0528/20130528035105279.png" /> 

<link rel="prefetch" href="http://daker.me/2013/05/hello-world.html" />
<link rel="prefetch" href=http://up.2cto.com/2013/0528/20130528035105279.png" />你也能够使用prerendering特性令你的网站速度更快，浏览器能够在后台获取并渲染整个页面，用户点击相应链接时再为用户展示该页面。代码如下：
[html] view plaincopyprint?<link rel="prerender" href="http://daker.me/2013/05/hello-world.html" /> 

<link rel="prerender" href="http://daker.me/2013/05/hello-world.html" />
3. Download属性

凭借HTML5的Download属性，开发者可以不必到特定页面下载文件，而是直接进行下载。这一操作不必依赖服务器端代码便能够执行。代码如下：

[html]  <a href="download_pdf.php?id=15" download="myfile.pdf">Download PDF</a> 

<a href="download_pdf.php?id=15" download="myfile.pdf">Download PDF</a>
4. Regular Expressions

一旦用户输入一个有效的email或URL地址，pattern属性可以令你直接使用regular expressions而无需检查JS或服务器端代码。代码如下：

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

<input type="email" pattern="[^ @]*@[^ @]*" value="">
5. Datalist元素

若使用jQuery插件执行自动填充输入操作，则用户每敲击一次键盘都要访问服务器端代码以及数据库。但有了Datalist元素，开发者不必再使用jQuery插件便可完成该操作。代码如下：

[html]  <form action="form.php" method="post"> 
    <input list="cars" name="cars" > 
    <datalist id="cars"> 
        <option value="Volvo"> 
        <option value="BMW"> 
        <option value="Bugatti"> 
        <option value="Cadillac"> 
        <option value="Chevrolet"> 
        <option value="Chrysler"> 
    </datalist> 
    <input type="submit" /> 
</form> 

<form action="form.php" method="post">
    <input list="cars" name="cars" >
    <datalist id="cars">
        <option value="Volvo">
        <option value="BMW">
        <option value="Bugatti">
        <option value="Cadillac">
        <option value="Chevrolet">
        <option value="Chrysler">
    </datalist>
    <input type="submit" />
</form>

 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-事半功倍：你应该知道的HTML5五大特性全部内容，希望文章能够帮你解决html5教程-事半功倍：你应该知道的HTML5五大特性所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。