前端進階系列(三):HTML5新特性

時間 2019-12-10

標籤前端進階系列 html5 html 特性欄目 HTML5 简体版

原文原文鏈接

HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，並同時提供更好地支持各類媒體的嵌入。HTML5 的語法是向後兼容的。如今國內廣泛說的 H5 是包括了 CSS3，JavaScript 的說法（嚴格意義上說，這麼叫並不合適，可是已經這麼叫開了，就將錯就錯了）。css

HTML5新特性

語義特性

HTML5賦予網頁更好的意義和結構html

文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
新的解析順序：再也不基於SGML。
新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
input元素的新類型：date, email, url等等。
新的屬性：ping（用於a與area）, charset（用於meta）, async（用於script）。
全域屬性：id, tabindex, repeat。
新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

本地存儲特性

HTML5離線存儲包含：應用程序緩存（Application Cache）、本地存儲、索引數據庫、文件接口html5

應用程序緩存

經過建立cache manifest文件，能夠輕鬆的建立web應用的離線版本
其優點在於：git

離線瀏覽-用戶可在應用離線時使用它們
速度-已緩存靜態資源，使加載更快
減小服務器負載-瀏覽器將只存服務器下載更新過或修改過的資源

本地存儲

localStorage
sessionStorage

從名字上看就能夠很清楚的辨認二者的區別，前者是一直存在本地的，後者只是伴隨着session，窗口一旦關閉就沒了。web

索引數據庫（indexed DB）

從本質上說，IndexedDB容許用戶在瀏覽器中保存大量的數據。任何須要發送大量數據的應用均可以得益於這個特性，能夠把數據存儲在用戶的瀏覽器端。當前這只是IndexedDB的其中一項功能，IndexedDB也提供了強大的基於索引的搜索api功能以得到用戶所須要的數據。數據庫

用戶可能會問：IndexedDB是和其餘之前的存儲機制(如cookie,session)有什麼不一樣？canvas

Cookies是最經常使用的瀏覽器端保存數據的機制,但其保存數據的大小有限制而且有隱私問題。Cookies而且會在每一個請求中來回發送數據，徹底沒辦法發揮客戶端數據存儲的優點。api

再來看下Local Storage本地存儲機制的特色。Local Storage在HTML 5中有不錯的支持，但就總的存儲量而言依然是有所限制的。Local Storage並不提供真正的「檢索API」,本地存儲的數據只是經過鍵值對去訪問。Local Storage對於一些特定的須要存儲數據的場景是很適合的，例如，用戶的喜愛習慣，而IndexedDB則更適合存儲如廣告等數據（它更象一個真正的數據庫）。瀏覽器

通常來講,有兩種不一樣類型的數據庫:關係型和文檔型(也稱爲NoSQL或對象)。關係數據庫如SQL Server,MySQL,Oracle的數據存儲在表中。文檔數據庫如MongoDB,CouchDB,Redis將數據集做爲個體對象存儲。IndexedDB是一個文檔數據庫，它在徹底內置於瀏覽器中的一個沙盒環境中(強制依照（瀏覽器）同源策略)。緩存

對數據庫的每次操做，描述爲經過一個請求打開數據庫,訪問一個object store，再繼續。

IndexedDB是否適合應用程序的幾個關鍵點

你的用戶經過瀏覽器訪問您的應用程序,（瀏覽器）支持IndexedDB API嗎 ?
你須要存儲大量的數據在客戶端?
你須要在一個大型的數據集合中快速定位單個數據點?
你的架構在客戶端須要事務支持嗎?

若是你對其中的任何問題回答了「是的」,頗有可能,IndexedDB是你的應用程序的一個很好的候選。

文件接口

看這裏http://www.cnblogs.com/zichi/p/html5-file-api.html

設備訪問特性

包括地理位置API、媒體訪問API、訪問聯繫人及事件、設備方向

鏈接特性

HTTP是無鏈接的，一次請求，一次響應。想要實現微信網頁版掃一掃登陸，網頁版微信聊天的功能，須要使用輪詢的方式達到長鏈接的效果，輪詢的大部分時間是在作無用功，浪費網絡，浪費資源。如今HTML5爲咱們帶來了更高效的鏈接方案 Web Sockets 和Server-Sent Events。