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

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

特性一：正則表示式

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

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

特性二：資料列表元素

在沒有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> 

注意這裡href地址是實際要下載的檔案的路徑，而download是定義下載後的檔名字，即重新命名！

特性四：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" />

通過設定這個屬性，登入極客社群後，極客搜尋頁面已經載入了，這樣如果你需要搜尋，頁面會立刻載入，相信你的使用者肯定喜歡訪問這樣的網站！