HTML5出現已經有一段時間了,它為移動和桌面程式新增加了很多新的令人興奮的JavaScript和HTML的API。所以在YJBYS小編分享的這篇文章中,你會發現一些HTML5功能將提高你的Web應用程式,並會為你節省大量時間。
DNS預提取
DNS主機名解析,是任何網站變慢的原因之一。現代瀏覽器開始變得很智慧,當涉及到DNS解析時,瀏覽器將會在使用者點選網頁上鍊接之前,嘗試解析域名並快取。
DNS預提取功能可以由你手動操作控制,告訴瀏覽器需要解析的域名:
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
連結預提取
連結預提取功能允許開發人員指定他們想要預載入的頁面和資源悄悄地載入一次,像載入搜尋結果的第一頁:
<link rel="prefetch" href="" />
<link rel="prefetch" href="http://daker.me/assets/images/avatar.png" />
您也可以使用預渲染功能,將讓你的網站變得更快,瀏覽器將獲取和渲染整個翻頁,只有當用戶點選連結時才顯現出來:
<link rel="prerender" href="" />
下載屬性
HTML5的下載屬性使開發人員能夠實現檔案強制下載,而不是去到特定的頁面,要做到這一點不再需要依賴於服務器端的程式碼。
<a href="download_ download="">Download PDF</a>
正則表示式
我知道你會愛上這個功能,如果使用者輸入的`是一個有效的電子郵件或URL地址,不必使用更多的js 或伺服器端的程式碼來檢查,你可以直接使用正則表示式的模式屬性:
<input type="email" pattern="[^ @]*@[^ @]*" value="">
datalist元素
datalist元素是一個重要的新增元素,使用者按鍵觸及資料庫時,結合伺服器端程式碼自動完成輸入,不需要使用jQuery外掛。
<form action="" method="post">
<input list="cars" name="cars" >
<datalist id="cars">
<option value="Volvo">
<option value="BMW">
<option value="Bugatti">
<option value="Cadillac">
<option value="Chevrolet">
<option value="Chrysler">
</datalist>
<input type="submit" />
</form>