照相機、留聲機誕生，解決了人們記錄影像、聲音的需求以來，人們就不斷地追求著在有限的條件下盡可能地提高這些記錄的品質(zhì)，而從模擬時代過渡到數(shù)字時代以后，這方面的追求有一部分變成了在盡可能小的空間中提供盡可能好的內(nèi)容質(zhì)量，這就催生出了一系列不斷演進著的媒體壓縮技術。

不過這期課堂的主題尚未來到媒體編碼的歷史，在講音視頻圖像的壓縮算法進化之路前，我們先來了解一下這些媒體內(nèi)容的載體——容器格式的進化歷程。

首先需要區(qū)分清楚的，就是容器格式與媒體編碼格式。

何為容器（Container）

對于數(shù)字媒體數(shù)據(jù)來說，容器就是一個可以將多媒體數(shù)據(jù)混在一起存放的東西，就像是一個包裝箱，它可以對音視頻數(shù)據(jù)進行打包裝箱，將原來的兩塊數(shù)據(jù)整合到一起，也可以單單只存放一種類型的媒體數(shù)據(jù)。它就像電影膠片一樣，中央是一幀一幀的圖像，而兩旁則印有對應的音軌。

舉個簡單的例子，常見的MP4就是一種媒體容器格式而不是編碼格式，它里面的視頻編碼可以是現(xiàn)在最常見的AVC/H.264，也可以是它的前任H.263或者下一任——HEVC，音頻編碼可以是常見的AAC也可以是AC-3。

另一個生僻點的例子：最常見的圖片格式——JPEG，它其實只是一種壓縮方式，而它的存放方式其實叫做JFIF（JPEG File Interchange Format），雖然在JPEG標準中定義了一種名為JIF（JPEG Interchange Format）的容器格式，但是因為其缺乏某些關鍵要素，造成了使用的不便而被后來第三方開發(fā)出來的JFIF容器給取代了，今天我們能夠看到的JPEG文件幾乎都是裝在JFIF容器中的。

雖然今天我們能夠直接拿到的MP4文件里面裝的幾乎都是AVC+AAC的組合，但還是不能混淆了兩者的概念，容器就是個容器，它沒得靈魂。

AVI： 老而彌堅

AVI可能是和筆者年齡相仿的朋友最早接觸的一個格式。確實，它推出的時間相對較早，也是許久以前最為常見的一種容器格式。它全稱叫做音頻視頻交錯（ Audio Video Interleave），顧名思義，它就是簡單地將視頻與音頻交錯在一起，幾幀視頻之后就是對應的音頻段，這樣重復，直到結束。

AVI文件的結構示意圖

它由三部分組成，頭部、主體以及位于文件尾部的索引。頭部中含有文件的元數(shù)據(jù)（metadata），比如視頻的分辨率、碼率總幀數(shù)等信息。主體部分是媒體數(shù)據(jù)的存放區(qū)，它使用了塊（chunk）的概念，將原本的視頻流和音頻流分成塊狀進行交錯放置，就是上面講的一段視頻一段音頻交錯放置，而尾部則是用來放置索引，它用來記錄每個數(shù)據(jù)塊在文件中的偏移位置。

紅框標注為對軌道的標識

講到AVI，還可以聯(lián)動一下WAV和蘋果那邊的AIFF，這些容器格式其實是同源的，來自于EA（對，就是現(xiàn)在那個做游戲的EA）為了讓不同公司開發(fā)出來的軟件之間進行數(shù)據(jù)交換而在1985年開發(fā)出來的IFF（Interchange File Format）格式。蘋果在IFF的基礎上開發(fā)出了AIFF，而微軟與IBM將IFF格式使用的大端序改成小端序就成了RIFF（Resource Interchange File Format），也就是AVI、WAV這兩個容器的基本原型。

AVI雖然老，但是因為它以幀為單位把數(shù)據(jù)切成塊來存放的特性，使得它幾乎支持市面上幾乎所有的音視頻編碼。而它的缺點也有很多，首先因為索引在文件尾部的關系，所以它并不適合用來流傳輸；另外在容器中也沒有時間戳，只能通過幀數(shù)和幀率信息來進行計算，在索引里面并沒有寫明時間戳—媒體位置的數(shù)據(jù)，所以要在播放AVI時進行快速跳轉還需要額外的技術手段；而媒體數(shù)據(jù)分塊存放也使得它對很多使用運動預測特性的視頻編碼的支持并不是太好，因為這些幀，比如P幀和B幀，都是通過I幀進行計算得到的，這就需要訪問當前幀以外的數(shù)據(jù)了。

MPEG-PS：VCD、DVD的功臣

用電腦播放過VCD的朋友一定還記得會在目錄里尋找那個最大的.DAT文件來播放，而DVD則是找那個最大的.VOB。其實這兩個格式都是MPEG-PS容器規(guī)范的一種，此PS非彼Photoshop，而是指Program Stream，是MPEG組織在1993年發(fā)布的一個容器標準，并且隨后寫入ISO/IEC國際標準，除了以上兩種后綴名之外，還有.mpg也用的是這個標準。

MPEG-PS標準中引入了包的概念，整個文件由一個個包組成，每個包的大小并不相等，包里面含有這個包的時間碼以及對應的音視頻數(shù)據(jù)。

MPEG-PS已經(jīng)隨著時代的進步被廢棄了，它只能存放MPEG-1、MPEG-2、MPEG-4這些出自同門的視頻編碼，限制性較大。但因為VCD和DVD的廣泛流行，實際上它還是被用的相當多的。

MPEG-TS：專為流傳輸而生

MPEG組織不僅僅為音視頻文件的存儲制定了容器標準，還早早地順應時代潮流，為它們的傳輸準備了相應的容器。我們的數(shù)字電視和IPTV用的就是MPEG組織在1995年制定的Transport Stream，也就是TS容器，當然它也并不限于這兩個場景，在現(xiàn)在的低延時直播系統(tǒng)中，MPEG-TS仍然占據(jù)了絕對主流的地位，原因就是它的整個結構就是為了流傳輸而設計的。

從IP層到TS包內(nèi)部的結構

一個TS文件中可以容納多個TS流，不同的流上面可以帶有不同的音視頻數(shù)據(jù)，這樣通過接收一個TS文件，用戶方面可以自由地在這個TS文件中的多個子TS流之間進行切換，非常適合用于傳輸電視節(jié)目。而它同時針對復雜的傳輸環(huán)境進行了針對性的優(yōu)化，TS流的基礎單位是一個個大小僅為188字節(jié)的包，每個包都有自己的獨立時基，并且由于采用了固定大小，所以在傳輸過程中即使遭遇丟包也很快就可以恢復正常播放。

發(fā)展到今天，TS仍然在網(wǎng)絡流傳輸時代中發(fā)揮著自己重要的作用，在蘋果主導的HLS（Http Live Streaming）協(xié)議中使用的就是TS流，它比MPEG-DASH更加通用，因為后者對于MP4文件進行了一定的修改，在老平臺上面支持不太好，而HLS使用的TS仍然是規(guī)范中的，可以被大多數(shù)設備兼容。

不過也因為TS分包較多的特性，會產(chǎn)生一些數(shù)據(jù)冗余，所以在存儲場景中一般不會使用TS作為容器。

M2TS：專為高清時代而生

M2TS多見于Blu-ray光盤和高清錄像（AVCHD）中，它由MPEG-TS修改而來，加入了對于高清時代新的音視頻編解碼支持。

一張Blu-ray視頻光盤中的M2TS

并且由于TS文件的特性，每一個小片上都有自己的獨立時間戳，這使得文件中一部分數(shù)據(jù)即使遭到破壞也不會影響到其他部分的正常播放，而且可以從中隨意的進行切片操作。

ASF：先進卻早夭

見過ASF格式視頻的朋友我想應該不會太多，但是見過WMV和WMA這兩個微軟以前主推的媒體編碼格式的朋友肯定有很多。其實WMV和WMA就是存放在ASF容器之中的，它全稱高級系統(tǒng)格式（Advanced Systems Format），微軟原本計劃是用它來作為AVI容器的后繼者的，它具有諸多先進的特性，比如說它可以包含視頻除了規(guī)格以外的元數(shù)據(jù)，如導演、電影名這些，它也可以提供數(shù)字版權管理（DRM），還有非常好的流傳輸支持——僅需要加載文件的最小部分即可開始播放，這點小編感受過一次。

ASF文件開頭會用這32個字節(jié)來標識自己是個ASF文件

ASF身上的這些特性在當時還算是比較先進的，但不過這于事無補，微軟建立它那套封閉媒體格式體系的做法并沒有得到太多廠商和用戶的支持，大家仍然更喜歡用其他更為開放一點的標準，比如MP3就是一個很好的例子。ASF容器也隨著微軟媒體格式的衰亡而漸漸消失了，我們今天已經(jīng)幾乎看不到WMV、WMA這兩個曾經(jīng)還很常見的格式的影子了。

RM：昔日王者，如今不見蹤影

與ASF差不多同時代流行的就是RM和RMVB了，在那個AVC尚未開始普及，DivX和XviD應用較少的年代中，RMVB在國內(nèi)的各大下載站中都占據(jù)了絕對主流的地位，很多視頻站也大多使用RM來提供“網(wǎng)絡視頻點播”的服務。

RM容器的內(nèi)部結構

不過RM容器本身并不出彩，索引仍然位于文件尾部，不過由于數(shù)據(jù)段里面有加入時間戳，所以在流傳輸時還是可以應付用戶的跳轉操作的。因為這個容器本身與RM編碼息息相關的原因，它本身也只能容納RM編碼的視頻流，所以在RM編碼沒落之后我們就很少再看到這些昔日王者了，一個容器格式想要長存，要么在設計上有其獨到之處，要么就是要開放，在眾多平臺上面提供支持。而RM兩個理由都不占，效果又比不過新興的AVC，所以它的沒落也是必然了。

FLV：前高清時代的寵兒

還記得十年前的土豆網(wǎng)嗎？彼時它還被稱為“國內(nèi)的Youtube”，當時視頻網(wǎng)站普遍都還在用Flash寫播放器實現(xiàn)流視頻播放，而自然而然地，Adobe制定的Flash Video格式就成了這些視頻網(wǎng)站主要使用的容器格式，也就是我們熟知的FLV。

FLV格式是在Flash Player 6中引入的，當時更多的是被存放在SWF文件的內(nèi)部，不過后來因為體積越來越大而直接獨立了出來，它的結構相對而言比較簡單，主要分為兩塊，位于文件頭部的元數(shù)據(jù)信息和后面的音視頻數(shù)據(jù)。不過在數(shù)據(jù)的存放上面，F(xiàn)LV是將數(shù)據(jù)分為多個標簽進行存儲的，每個標簽都帶有自己的時間戳，所以這就保證了流傳輸時的音畫同步。

由于FLV結構簡單但是功能足夠用，并且被Flash Player天然支持，所以在當時的視頻網(wǎng)站上面普遍都使用它作為容器，直到今天還有很多網(wǎng)站沒有放棄它，雖然其中的視頻編碼早已升級，它也有衍生出來的F4V作為后繼者，雖然后者的血統(tǒng)已經(jīng)不是Flash家族的了。

F4V：換了血的繼任者

小編還記得土豆網(wǎng)在2009、2010年左右在國內(nèi)率先開始使用H.264編碼，當時如果將清晰度切換到“高清”就會播放這些用H.264編碼的視頻。而用飛速土豆加速會緩存到一些.f4v擴展名的文件，乍一看還以為它就是FLV，但其實不然，F(xiàn)4V其實是MP4所在的ISO標準容器家族的，但也是Adobe搞出來的FLV的后繼者。關于后者的詳情，請往下看。

MOV：蘋果向業(yè)界作出的貢獻

MOV格式的正式名字叫QuickTime File Format。看到這個QuickTime第一反應肯定是“哦，這是蘋果的東西”。確實，QuickTime File Format是由蘋果在1998年推出的，它引入了原子（atom）的概念，在QTFF格式中，atom是基本的數(shù)據(jù)單元，它可以用來容納實際的音視頻數(shù)據(jù)，也可以放置元數(shù)據(jù)和字幕等文本信息，atom中所容納的數(shù)據(jù)類型和大小在每個atom的頭部進行描述，經(jīng)過一層層的嵌套之后，整個數(shù)據(jù)文件呈現(xiàn)了一種樹狀的結構，并且保留了強大的可擴展性。

MOV和MP4這些ISO標準容器格式的開頭都有一個ftyp用于標記格式

MOV作為蘋果QuickTime編碼的成員，在目前仍然被蘋果設備廣泛使用著，并且對于它的支持非常好。1998年推出QTFF的同時，蘋果將這個格式交給了ISO組織，后者將它標準化為國際通用容器格式，而基于這個標準衍生出來的容器，又可以叫做ISO/IEC base media file format，同時被MPEG組織采納，寫入MPEG-4 Part 12標準中。

ISO標準容器格式

ISO標準容器格式是一個規(guī)范，它代表符合這個規(guī)范的容器類型，而不是特指某個格式。它是由蘋果的QuickTime File Format發(fā)展而來的，在MPEG-4 Part 12中被最終確定并被ISO/IEC組織寫入標準。它雖然沒有具體實現(xiàn)，但是它定義了基于時間碼的多媒體文件的通用結構，并由此成為了MP4、3GP等格式的基礎。

3GP、MP4與ISO標準容器格式的關系

MP4：標準，泛用

MP4肯定是現(xiàn)在最通用最流行的媒體容器，甚至可以說沒有之一。但其實現(xiàn)在的MP4和早期的并不是同一個標準，目前常見的MP4標準是在2003年完整的的MPEG-4 Part 14規(guī)范中制定的，到今天為止也經(jīng)過了多次的修訂。它其實與MOV之間并沒有太大的區(qū)別，基本上就是把MOV的atom改了個名字，叫成box，然后加了一點別的佐料。

MP4的內(nèi)部結構

蘋果建立iTunes Store賣數(shù)字音樂的時候選擇了AAC-LC作為他們的音頻編碼格式，而容器格式上面他們并沒有選擇與AAC-LC處于同一時代（MPEG-2）的ADTS，而是選擇了比AAC-LC大一輩的MPEG-4標準容器，也就是MP4，不過因為它只含音頻所以我們看到的擴展名就是.m4a，iTunes Store還賣一種只有視頻沒有音頻的MV，它用的也是MP4，擴展名為.m4v，本質(zhì)上它們就是同一種東西。

目前很多視頻網(wǎng)站已經(jīng)從FLV切換到MP4上面了，而且還有一種新的MPEG-DASH格式就是借助于MP4可分割的特性實現(xiàn)的，它將一整段視頻切成許多段小塊，方便瀏覽器進行加載，減少HTTP長連接對服務器的壓力。

這里說一句題外話，當年某站剛上HTML5播放器的時候，因為他們原來的視頻幾乎全部都用的是FLV存儲的，而HTML5標準并不支持它，所以要進行一個容器轉換，某站當時一位非常年輕的程序員寫出了一個在瀏覽器內(nèi)實時將FLV文件轉成MP4并喂給瀏覽器的媒體播放器的腳本，名為flv.js，這個腳本可能給某站省下了非常大的格式轉換成本。不久之后這位程序員因為受不了某站的低薪而離職。這件事曾經(jīng)引起了很多社區(qū)的熱烈討論，因為今天是程序員日所以特地寫了這么一段。

3GP：精簡小巧，手機最愛

3GP是MP4的同族兄弟，一樣是基于ISO標準容器格式，用過3GP的兄弟肯定還記得這格式最多出現(xiàn)的地方是哪里——以諾基亞為代表的前智能手機時代，手機錄像出來的文件大多都是3GP格式的。

3GP這個容器格式標準其實不是由以往的MPEG啊這類專注于多媒體編碼的組織搞出來的，而是3GPP，對沒錯就是制定通信行業(yè)標準的那個組織制定的。它在容器支持的格式上進行了精簡，只面向于手機可以進行的編碼，比如MPEG-4 Visual、H.263這些比較老的視頻編碼和AMR、AAC這兩種前智能手機時代使用較多的音頻編碼。

因為前智能手機時代的手機性能并不強大，一般也不需要支持很多種格式，不用像MP4那么全面，所以3GP最終成為了一種被廣泛支持的格式，不過也因為它支持的格式過于有限，最終在智能手機時代被同門大哥MP4給取代了。

MPEG-DASH

面對時下流行的流媒體，MPEG組織對MP4文件進行了魔改，由于MP4天生可以進行無損切割的特性，DASH方式將原本媒體文件中完整的文件頭的元數(shù)據(jù)信息和片段Box中的信息抽取出來單獨寫在一個文件（MPD）中，同時還包含了片段的URL等信息，播放器可以自適應選擇需要的片段進行播放，在自適應程度上面比HLS更強一些。（其實MPEG-DASH也可以用TS作為容器，但用MP4更多一些）

目前MPEG-DASH已經(jīng)成為了一項國際標準，人們比較熟悉的應用平臺就是Youtube和Netflix，在這些平臺上面你會發(fā)現(xiàn)瀏覽器在不斷地加載一些小的視頻文件，但是視頻的播放是連續(xù)的。

MKV：強大無需多言，免費讓它受愛

說到MKV，喜歡收藏高清電影的朋友肯定不會陌生，這種容器格式大概是和高清時代一起發(fā)展起來的，但其實它在2002年底就已經(jīng)完成制定了，不過推廣的很緩慢，到了高清時代和UHD時代人們才開始發(fā)現(xiàn)這種容器的強大，并用的越來越多，連微軟都在Windows 10的初始版本中加入了對它的支持。

MKV的內(nèi)部結構

MKV全名Matroska，它身上最大的特點就是開放標準、免費使用，而且它可能是目前地球上最強大的數(shù)字媒體容器格式，一個文件中可以放音頻、視頻、字幕、字體還有章節(jié)信息等等等等，前面東西都是不限數(shù)量任你放多少都可以吃得下的，而且它是目前唯一一個支持封裝ASS字幕的格式。

值得一提的是，這玩意兒是俄羅斯組織матрёшка搞出來的，其實本身是用于盜版的，俄羅斯的網(wǎng)絡情況跟我們挺像的，網(wǎng)絡上盜版橫行，而MKV也幫助了文件的傳播，目前來看，MKV可能是眾多容器格式里面最好用的，無論是編輯元數(shù)據(jù)還是抽取軌道重新封裝都有GUI工具支持，不過可惜的是眾多視頻編輯剪輯軟件還是沒有提供對它的支持。

總結

其實讀到最后你會發(fā)現(xiàn)，這些容器格式內(nèi)部對于音視頻數(shù)據(jù)的處理都是大同小異的，區(qū)別點其實并不大。更多的差距在于它們對于不同編碼格式的支持程度、元數(shù)據(jù)的詳細程度以及對于是否能夠支持音視頻以外的數(shù)據(jù)。

而發(fā)展到至今，MP4仍然夠用，在互聯(lián)網(wǎng)時代扮演著非常重要的角色；MKV在下載黨那里被奉為圭臬；而TS格式仍然在數(shù)字電視系統(tǒng)中被廣泛使用。但在他們之前的格式也不是說非常弱或者不好，只不過可能是他們支持的那些格式?jīng)]落了順帶著把它們也帶沒了，真正像AVI那樣確實在技術規(guī)格上落伍的容器并不多。

而對于各種容器之間無損互轉的事情，小編這里推薦mp4box、mkvtoolnix和強大的ffmpeg這些工具。下一篇系列課堂，我們會轉向在如今多媒體領域中扮演無可替代角色的視頻編碼的變遷史，并且會看一看未來的AV1和VVC這兩種對于大眾來說還很陌生的下一代視頻編碼。

TML5 是第五個且是當前的 HTML 版本，它是用于在萬維網(wǎng)上構建和呈現(xiàn)內(nèi)容的標記語言。本文將幫助讀者了解它。 -- Palak Shah

本文導航

• -新標簽和元素 …… 08%

• -HTML5 的高級功能 …… 16%

• -地理位置 …… 16%

• -網(wǎng)絡存儲 …… 33%

• -應用緩存（AppCache） …… 44%

• -視頻 …… 50%

• -音頻 …… 61%

• -畫布（Canvas） …… 71%

• -HTML5 工具 …… 78%

編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

譯者： geekpi

HTML5 是第五個且是當前的 HTML 版本，它是用于在萬維網(wǎng)上構建和呈現(xiàn)內(nèi)容的標記語言。本文將幫助讀者了解它。

HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態(tài)。它是為所有人提供更好的 Web 體驗而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動態(tài)和交互。

HTML5 的新功能是：

• 新標簽，如 <header> 和 <section>

• 用于 2D 繪圖的 <canvas> 元素

• 本地存儲

• 新的表單控件，如日歷、日期和時間

• 新媒體功能

• 地理位置

HTML5 還不是正式標準（LCTT 譯注：HTML5 已于 2014 年成為“推薦標準”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。

新標簽和元素

• 語義化元素： 圖 1 展示了一些有用的語義化元素。

• 表單元素： HTML5 中的表單元素如圖 2 所示。

• 圖形元素： HTML5 中的圖形元素如圖 3 所示。

• 媒體元素： HTML5 中的新媒體元素如圖 4 所示。

圖 1：語義化元素

圖 2：表單元素

圖 3：圖形元素

圖 4：媒體元素

HTML5 的高級功能

地理位置

這是一個 HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

• 公共交通網(wǎng)站

• 出租車及其他運輸網(wǎng)站

• 電子商務網(wǎng)站計算運費

• 旅行社網(wǎng)站

• 房地產(chǎn)網(wǎng)站

• 在附近播放的電影的電影院網(wǎng)站

• 在線游戲

• 網(wǎng)站首頁提供本地標題和天氣

• 工作職位可以自動計算通勤時間

工作原理： 地理位置通過掃描位置信息的常見源進行工作，其中包括以下：

• 全球定位系統(tǒng)（GPS）是最準確的

• 網(wǎng)絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址

• GSM/CDMA 蜂窩 ID

• 用戶輸入

該 API 提供了非常方便的函數(shù)來檢測瀏覽器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。

語法是：

getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation：定義了檢索位置信息的回調(diào)方法。

• ErrorHandler（可選）：定義了在處理異步調(diào)用時發(fā)生錯誤時調(diào)用的回調(diào)方法。

• options （可選）： 定義了一組用于檢索位置信息的選項。

我們可以通過兩種方式向用戶提供位置信息：測地和民用。

1. 描述位置的測地方式直接指向緯度和經(jīng)度。

2. 位置信息的民用表示法是人類可讀的且容易理解。

如下表 1 所示，每個屬性/參數(shù)都具有測地和民用表示。

圖 5 包含了一個位置對象返回的屬性集。

圖5：位置對象屬性

網(wǎng)絡存儲

在 HTML 中，為了在本機存儲用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲，網(wǎng)站利用它在本機上存儲用戶數(shù)據(jù)。

與 Cookie 相比，Web 存儲的優(yōu)點是：

• 更安全

• 更快

• 存儲更多的數(shù)據(jù)

• 存儲的數(shù)據(jù)不會隨每個服務器請求一起發(fā)送。只有在被要求時才包括在內(nèi)。這是 HTML5 Web 存儲超過 Cookie 的一大優(yōu)勢。

有兩種類型的 Web 存儲對象：

1. 本地 - 存儲沒有到期日期的數(shù)據(jù)。

2. 會話 - 僅存儲一個會話的數(shù)據(jù)。

如何工作： localStorage 和 sessionStorage 對象創(chuàng)建一個 key=value 對。比如： key="Name"， value="Palak"。

這些存儲為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進行轉換。

下面給出了使用 Web 存儲對象的語法：

• 存儲一個值：

• localStorage.setItem("key1", "value1");

• localStorage["key1"] = "value1";

• 得到一個值：

• alert(localStorage.getItem("key1"));

• alert(localStorage["key1"]);

• 刪除一個值： -removeItem("key1");

• 刪除所有值：

• localStorage.clear();

應用緩存（AppCache）

使用 HTML5 AppCache，我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時）。

應用緩存的優(yōu)點是：

• 網(wǎng)頁瀏覽可以脫機

• 頁面加載速度更快

• 服務器負載更小

cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中，如下所示：

<html manifest="test.appcache">

...

</html>

它應該在你要緩存的所有頁面上。

緩存的應用程序頁面將一直保留，除非：

1. 用戶清除它們

2. manifest 被修改

3. 緩存更新

視頻

在 HTML5 發(fā)布之前，沒有統(tǒng)一的標準來顯示網(wǎng)頁上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁上顯示視頻的標準方式。

目前，video 元素支持三種視頻格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個 MPEG4 和 WebM 文件。

video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式，如下所示：

<video width="320" height="240" controls="controls">

<source src="vdeo.ogg" type="video/ogg" />

<source src=" vdeo.mp4" type="video/mp4" />

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

圖6：Canvas 的輸出

音頻

對于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁上播放音頻沒有統(tǒng)一的標準。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。

目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>

<html>

<body>

<audio src=" song.ogg" controls="controls">

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個 MP3 和 Wav 文件。

audio 元素允許多個 source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式，如下所示：

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

This browser does not support the audio element.

</audio>

畫布（Canvas）

要在網(wǎng)頁上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現(xiàn)繪制。所有繪畫應在 JavaScript 中。

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上腳本的輸出如圖 6 所示。

你可以繪制許多對象，如弧、圓、線/垂直梯度等。

HTML5 工具

為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設計人員都應該使用 HTML5 工具，當需要設置工作流/網(wǎng)站或執(zhí)行重復任務時，這些工具非常有幫助。它們提高了網(wǎng)頁設計的可用性。

以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。

• HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動畫等。

• Liveweave： 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發(fā)和測試更快更容易。

• Font dragr： 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。

• HTML5 Please： 可以讓我們找到與 HTML5 相關的任何內(nèi)容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表，語法，以及如何使用元素的一般建議等。

• Modernizr： 這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應的腳本。

• Adobe Edge Animate： 這是必須處理交互式 HTML 動畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡和廣告領域。此工具允許用戶創(chuàng)建無瑕疵的動畫，可以跨多個設備運行。

• Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應該使用此工具。它使視頻看起來不錯，并且是網(wǎng)站的一部分。

• The W3 Validator： W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標記的有效性。要測試任何網(wǎng)站的標記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。

• HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個良好的網(wǎng)絡體驗。

Palak Shah

作者是高級軟件工程師。她喜歡探索新技術，學習創(chuàng)新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯(lián)系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 譯者：geekpi 校對：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽推出

點擊“了解更多”可訪問文內(nèi)鏈接