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

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

特性一：正則表達式

相信大家都會非常喜歡這個特性。無須server端的檢測，使用瀏覽器的本地功能就能夠幫助你推斷電子郵件的格式，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的下載屬性能夠同意開發人員強制下載一個頁面。而非載入那個頁面。這種話，你不須要實現server端的一些功能來達到相同的效果。是不是非常貼心？

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

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

通過設置這個屬性。登錄極客社區後。極客搜索頁面已經載入了，這樣假設你須要搜索。頁面會立馬載入。相信你的用戶肯定喜歡訪問這種站點！

html5 5個重要特性