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

luffyZh 發布于2019-08-02 11:42 / 3252人閱讀

摘要：是對標準的第五次修訂。新特性語義特性賦予網頁更好的意義和結構文件類型聲明僅有一型。新的屬性用于與用于用于。索引數據庫從本質上說，允許用戶在瀏覽器中保存大量的數據。

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

HTML5新特性 語義特性

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

文件類型聲明（）僅有一型：。

新的解析順序：不再基于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）、本地存儲、索引數據庫、文件接口

應用程序緩存

通過創建cache manifest文件，可以輕松的創建web應用的離線版本
其優勢在于：

離線瀏覽-用戶可在應用離線時使用它們

速度-已緩存靜態資源，使加載更快

減少服務器負載-瀏覽器將只存服務器下載更新過或修改過的資源

本地存儲

localStorage

sessionStorage

從名字上看就可以很清楚的辨認兩者的區別，前者是一直存在本地的，后者只是伴隨著session，窗口一旦關閉就沒了。

索引數據庫（indexed DB）

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

用戶可能會問：IndexedDB是和其他以前的存儲機制(如cookie,session)有什么不同？

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

再來看下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、訪問聯系人及事件、設備方向

地理位置

看這里https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation

媒體訪問

看這里https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

訪問聯系人及事件

看這里 https://blog.csdn.net/qq_27626333/article/details/51815229

設備方向

看這里 https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation

連接特性

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

網頁多媒體特性

HTML5支持原生的音視頻能力：Audio、video

三維、圖形及特效特性

大致包含SVG, Canvas, WebGL, 和 CSS3 3D，下面分別進行研究。

性能與集成特性

性能與集成特性主要包括兩個東西，Web Workers 和 XMLHttpRequest 2。

參考文章：

HTML5新特性淺談

HTML5新增內容

GPU云服務器云服務器 html5新特性 html5新特性webrtc html5新特性之webrtc 系列三

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53059.html

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

摘要：是對標準的第五次修訂。新特性語義特性賦予網頁更好的意義和結構文件類型聲明僅有一型。新的屬性用于與用于用于。索引數據庫從本質上說，允許用戶在瀏覽器中保存大量的數據。 HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，并同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向后兼容的。現在國內普遍說的 H5 是包括了 CSS3，Java...

spademan 2019-08-29 16:56 評論0 收藏0
前端進階系列(三):HTML5新特性

摘要：是對標準的第五次修訂。新特性語義特性賦予網頁更好的意義和結構文件類型聲明僅有一型。新的屬性用于與用于用于。索引數據庫從本質上說，允許用戶在瀏覽器中保存大量的數據。 HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，并同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向后兼容的。現在國內普遍說的 H5 是包括了 CSS3，Java...

lemon 2019-08-23 12:17 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0