国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热

News新聞

業(yè)界新聞動態(tài)、技術(shù)前沿
Who are we?

您的位置:首頁      DIV+CSS      HTML5 新特性解析

HTML5 新特性解析

標(biāo)簽: 發(fā)布日期:2014-03-05 00:00:00 1208

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

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

 

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

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

 

特性二:數(shù)據(jù)列表元素在沒有HTML5的日子里,我們會選擇使用一些JS或者知名的jQuery UI來實現(xiàn)自動補齊的功能,而在HTML5中,我們可以直接使用datalist元素,如下:

<span style="font-family:arial, simsun;"><form action="index.php" method="post">
   <input list="websites" name="websites" >
   <datalist id="</span><span style="font-family: arial, simsun;">websites</span><span style="font-family: arial, simsun;">"></span><span style="font-family:arial, simsun;">
       <option value="websites1">
       <option value="websites2">
       <option value="websites3">
       <option value="websites4">
   </datalist>
   <input type="submit" value="確定" />
</form></span>

運行代碼:

如果你輸入字母“j",可以看到如下的自動補齊效果

 

特性三:下載屬性HTML5的下載屬性可以允許開發(fā)者強制下載一個頁面,而非加載那個頁面,這樣的話,你不需要實現(xiàn)服務(wù)器端的一些功能來達(dá)到同樣的效果,是不是非常貼心?

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

 

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

如果你希望預(yù)先獲取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">

 

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

<link rel="prefetch" href="http://blog.sina.com.cn/s/articlelist_2129618781_0_1.html" />

<link rel="prefetch" href="http://phper.yxsss.com/" />或者可以使用prerender屬性,這個屬性能夠幫助你提前加載整個頁面,如下:

<link rel="prerender" href="http://blog.csdn.net/websites/" />通過設(shè)置這個屬性,登錄極客社區(qū)后,極客搜索頁面已經(jīng)加載了,這樣如果你需要搜索,頁面會立刻加載,相信你的用戶肯定喜歡訪問這樣的網(wǎng)站!