特性一：正則表達(dá)式

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

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

運(yùn)行如下：

如果在Firefox瀏覽器中運(yùn)行，并且輸入錯(cuò)誤的email地址，就會(huì)用系統(tǒng)的ui提示錯(cuò)誤

特性二：數(shù)據(jù)列表元素

在沒(méi)有HTML5的日子里，我們會(huì)選擇使用一些JS或者知名的jQuery UI來(lái)實(shí)現(xiàn)自動(dòng)補(bǔ)齊的功能，而在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>

運(yùn)行代碼：

如果你輸入字母“j"，可以看到自動(dòng)補(bǔ)齊效果

特性三：下載屬性

HTML5的下載屬性可以允許開發(fā)者強(qiáng)制下載一個(gè)頁(yè)面，而非加載那個(gè)頁(yè)面，這樣的話，你不需要實(shí)現(xiàn)服務(wù)器端的一些功能來(lái)達(dá)到同樣的效果，是不是非常貼心？

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

特性四：DNS的預(yù)先加載處理

要知道DNS的的解析成本很高滴，往往導(dǎo)致了網(wǎng)站加載速度慢?，F(xiàn)在瀏覽器針對(duì)這個(gè)問(wèn)題開發(fā)了更智能的處理方式，它將域名緩存后，當(dāng)用戶點(diǎn)擊其它頁(yè)面地址后自動(dòng)的獲取。

如果你希望預(yù)先獲取DNS，你可以控制你的瀏覽器來(lái)解析域名，例如：

<link rel="dns-prefetch" href="//www.yidengxuetang.com">

<link rel="dns-prefetch" href="//www.yidengxuetang1.com">

<link rel="dns-prefetch" href="//m.yidengxuetang1.com">

<link rel="dns-prefetch" href="//s.yidengxuetang.com">

特性五：鏈接網(wǎng)頁(yè)的預(yù)先加載處理

要知道鏈接能夠在也頁(yè)面中幫助用戶導(dǎo)航，但是頁(yè)面加載的速度快慢決定了用戶體驗(yàn)的好與壞，使用如下HTML5的prefetch屬性可以幫助你針對(duì)指定的地址預(yù)加載頁(yè)面或者頁(yè)面中的特定資源，這樣用戶點(diǎn)擊的時(shí)候，會(huì)發(fā)現(xiàn)頁(yè)面加載速度提高了。

<link rel="prefetch" href="http://www.yidengxuetang.com/users.html" />

<link rel="prefetch" href="http://www.yidengxuetang.com/networks/themes/img/logo_small.jpg" />

或者可以使用prerender屬性，這個(gè)屬性能夠幫助你提前加載整個(gè)頁(yè)面，如下：

<link rel="prerender" href="http://www.yidengxuetang.com/search.html" />

通過(guò)設(shè)置這個(gè)屬性，登錄社區(qū)后，搜索頁(yè)面已經(jīng)加載了，這樣如果你需要搜索，頁(yè)面會(huì)立刻加載，相信你的用戶肯定喜歡訪問(wèn)這樣的網(wǎng)站！

轉(zhuǎn)載于:https://blog.51cto.com/7704223/2398284

總結(jié)

以上是生活随笔為你收集整理的五个你绝不可忽视的HTML5特性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。