Html5已經火了一段時間了，相信作為web相關開發工程師，肯定或多或少的了解和嘗試過一些Html5的特性和編程。還記得以前我們介紹過的Html5新標簽。 作為未來前端開發技術的潮流和風向標，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的的解析成本很高滴，往往導致了網站加載速度慢。現在浏覽器針對這個問題開發了更智能的處理方式，它將域名緩存後，當用戶點擊其它頁面地址後自動的獲取。
如果你希望預先獲取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="/School/UploadFiles_7810/201603/20160308225337933.jpg" />
或者可以使用prerender屬性，這個屬性能夠幫助你提前加載整個頁面，如下：
<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />
通過設置這個屬性，登錄極客社區後，極客搜索頁面已經加載了，這樣如果你需要搜索，頁面會立刻加載，相信你的用戶肯定喜歡訪問這樣的網站！