首頁 > 新聞中心 > 前端開發攻城師不可忽視的五個HTML5新特性
前端開發攻城師不可忽視的五個HTML5新特性
2013-07-10

HTML5已經火了一段時間了,相信作為web相關開發工程師,肯定或多或少的了解和嘗試過一些HTML5的特性和編程。還記得以前我們介紹過的HTML5新標簽。 作為未來前端開發技術的潮流和風向標,HTML5絕對不容忽視。


在今天這篇技術分享文章中,我們將介紹幾個HTML5的重要特性,能夠幫助你提高整個web應用的使用體驗和開發效率,相信大家會感興趣的!


特性一:正則表達式


相信大家都會非常喜歡這個特性,無須服務器端的檢測,使用瀏覽器的本地功能就可以幫助你判斷電子郵件的格式,URL,或者是電話格式,防止用戶輸入錯誤的信息,通過使用HTML5的pattern屬性,我們可以很方便的整合這個功能,代碼如下:

 

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

 

運行如下:


如果在Firefox瀏覽器中運行,并且輸入錯誤的email地址,會看到如下:


GBdebug在線調試地址:http://www.gbin1.com/gb/debug/3465707b-8071-40fa-a159-4356a0a17a52.htm


特性二:數據列表元素


在沒有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",可以看到如下的自動補齊效果:


GBdebug在線調試地址:http://www.gbin1.com/gb/debug/0c8a7fea-4a30-4cc4-9282-1921e1251726.htm


特性三:下載屬性


HTML5的下載屬性可以允許開發者強制下載一個頁面,而非加載那個頁面,這樣的話,你不需要實現服務器端的一些功能來達到同樣的效果,是不是非常貼心?


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


特性四:DNS的預先加載處理


要知道DNS的的解析成本很高滴,往往導致了網站加載速度慢。現在瀏覽器針對這個問題開發了更智能的處理方式,它將域名緩存后,當用戶點擊其它頁面地址后自動的獲取。


如果你希望預先獲取NDS,你可以控制你的瀏覽器來解析域名,例如:


<link rel="dns-prefetch" href="http://www.gbtags.com">
<link rel="dns-prefetch" href="http://www.gbin1.com">
<link rel="dns-prefetch" href="http://m.gbin1.com">
<link rel="dns-prefetch" href="http://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特性,希望大家喜歡,如果你也有其它的好的技巧和特性分享,請發布到我們的極客標簽社區。


精准一波中特 赌场流行的扑克玩法 陕西麻将版全版本 天津11选五5开奖结果一定牛 湖北快三软件下载 广东快乐十分彩乐乐 广东26选5 买平特一肖能赢吗 内蒙古十一选五走势图表 江西快3官 拖码胆码 981棋牌游戏大厅 北京11选五走势图一定牛 十一选五江苏一定牛 今天福建快3走势图 最准确的彩票预测 亲朋游戏手机版下载