配套課件-基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁(yè)設(shè)計(jì)進(jìn)階教程

1、第1章 HTML5的重要使命1.1 Web時(shí)代的變遷1.2 HTML5的目標(biāo)1.3 HTML5的新功能1.1 Web時(shí)代的變遷Web(World Wide Web)即全球廣域網(wǎng)，也稱為萬(wàn)維網(wǎng)，它和我們經(jīng)常說(shuō)的“互聯(lián)網(wǎng)”是兩個(gè)聯(lián)系極其緊密但卻不盡相同的概念。互聯(lián)網(wǎng)是通過一組通用協(xié)議互相連接在一起的計(jì)算機(jī)網(wǎng)絡(luò)，而Web是運(yùn)行在互聯(lián)網(wǎng)上的一個(gè)超大規(guī)模的分布式系統(tǒng)。Web的設(shè)計(jì)初衷是一個(gè)靜態(tài)信息資源發(fā)布媒介，通過超文本標(biāo)記語(yǔ)言(HTML)描述信息資源，統(tǒng)一資源標(biāo)識(shí)符(URI)定位信息資源，超文本轉(zhuǎn)移協(xié)議(HTTP)請(qǐng)求信息資源。HTML、URL和HTTP三個(gè)規(guī)范構(gòu)成了Web的核心體系結(jié)構(gòu)，是支撐Web

2、運(yùn)行的基石。Web是人類偉大的發(fā)明之一，也是計(jì)算機(jī)影響人類的表現(xiàn)之一。1.1.1 Web1.0Web1.0的主題是信息共享。Web設(shè)計(jì)的初衷是用于科學(xué)家之間共享和傳遞信息，后來(lái)被一些大公司看到了其中所蘊(yùn)含的巨大商業(yè)價(jià)值，他們開始將自己的商品及聯(lián)系方式放到Web上進(jìn)行展示，并取得了巨大的成功。隨后，各種公司蜂擁進(jìn)入Web宣傳、推廣自己的產(chǎn)品，Web用戶進(jìn)入一個(gè)快速增長(zhǎng)期。隨著進(jìn)入Web的商家越來(lái)越多，Web也開始逐步走向商業(yè)化的道路。Web1.0是Web技術(shù)發(fā)展的第一個(gè)階段，局限于當(dāng)時(shí)的硬件條件及網(wǎng)絡(luò)環(huán)境，網(wǎng)站主要以靜態(tài)頁(yè)面技術(shù)為主。大部分網(wǎng)站以純HTML語(yǔ)言編寫，由文字和圖片組成，制作形式以表

3、格為主，內(nèi)容以網(wǎng)站編輯為主導(dǎo)，用戶能夠看到的內(nèi)容是網(wǎng)站編輯處理后的。這個(gè)過程是網(wǎng)站向用戶單向傳遞信息，網(wǎng)站負(fù)責(zé)展示信息，用戶負(fù)責(zé)瀏覽信息，因此也有人將Web1.0時(shí)代稱為“只讀的時(shí)代”。1.1.2 Web2.0Web2.0的主題是信息共建。Web1.0只解決了人對(duì)信息搜索、聚合的需求，而沒有解決人與人之間溝通、互動(dòng)和參與的需求。因此，為了滿足廣大網(wǎng)民的需求，Web2.0應(yīng)運(yùn)而生。Web2.0的代表應(yīng)用有以新浪微博為代表的博客網(wǎng)站、以土豆優(yōu)酷為代表的視頻網(wǎng)站、以QQ空間為代表的個(gè)人空間網(wǎng)站、以豆瓣為代表的評(píng)論網(wǎng)站等。打開這些網(wǎng)站，你會(huì)發(fā)現(xiàn)它們都有以下一些共同的特點(diǎn)： 內(nèi)容大多都是由用戶自主創(chuàng)造的

4、，突出個(gè)人觀點(diǎn)及個(gè)性化。 重視網(wǎng)站用戶體驗(yàn)，網(wǎng)站具有漂亮的外觀、簡(jiǎn)易的操作性及快速的響應(yīng)速度。 突出用戶參與度，可讀可寫。Web2.0相比Web1.0的最大改變是，加強(qiáng)了網(wǎng)站與用戶之間的互動(dòng)，網(wǎng)站內(nèi)容主要由用戶提供，網(wǎng)站的諸多功能也由用戶參與建設(shè)，實(shí)現(xiàn)了網(wǎng)站與用戶的雙向互動(dòng)交流。1.1.3 Web3.0目前，Web3.0還只是一個(gè)業(yè)內(nèi)人士之間的概念詞語(yǔ)。業(yè)內(nèi)對(duì)Web3.0的解釋有很多，其中最常見的一種解釋是用戶可以在Web上擁有自己的數(shù)據(jù)，并且在多家網(wǎng)站中使用這些數(shù)據(jù)，完全基于Web，用瀏覽器即可實(shí)現(xiàn)復(fù)雜系統(tǒng)程序才能實(shí)現(xiàn)的系統(tǒng)功能，用戶數(shù)據(jù)在被審計(jì)后，同步于網(wǎng)絡(luò)數(shù)據(jù)。也就是說(shuō)，在Web3.0時(shí)

5、代，用戶在Web上將擁有自己的身份，使用這個(gè)身份信息，可以登錄各種不同的網(wǎng)站；用戶也將不再是在某個(gè)網(wǎng)站上傳自己的作品，而是將這些作品上傳到Web中，再給某個(gè)網(wǎng)站授權(quán)，以達(dá)到在該網(wǎng)站發(fā)布作品的目的。另外，用戶參與互聯(lián)網(wǎng)的創(chuàng)作其實(shí)也算是一種勞動(dòng)，這種勞動(dòng)在Web2.0時(shí)代是無(wú)法直接帶給用戶經(jīng)濟(jì)利益的，只有當(dāng)用戶的創(chuàng)作獲得了一定的認(rèn)可度后才能通過其他方式獲得勞動(dòng)報(bào)酬。這種現(xiàn)象在Web3.0時(shí)代將會(huì)有所改變，人們參與到互聯(lián)網(wǎng)的勞動(dòng)中，特別是在內(nèi)容上的創(chuàng)造，將會(huì)獲得更多的榮譽(yù)、認(rèn)同，包括財(cái)富和地位。其實(shí)，這些在現(xiàn)在的Web中已經(jīng)有所體現(xiàn)，只不過很少有人關(guān)注。現(xiàn)在的很多網(wǎng)站，用戶可以不用注冊(cè)而通過其他網(wǎng)站

6、的賬號(hào)，如QQ號(hào)、支付寶賬號(hào)等直接登錄；發(fā)布于某個(gè)網(wǎng)站的內(nèi)容，可以通過轉(zhuǎn)載或引用等方式直接發(fā)布到另外的網(wǎng)站上；某些網(wǎng)站提供積分、虛擬幣等方式，當(dāng)用戶的積分或虛擬幣達(dá)到一定數(shù)量后可以兌換成人民幣等。這些新出現(xiàn)的Web模式已經(jīng)有了Web3.0的特征，當(dāng)條件達(dá)到一定支持度時(shí)，Web3.0將會(huì)不知不覺地來(lái)到我們的身邊。當(dāng)然，Web3.0的這些特征都還處在概念階段，至于真正到來(lái)的Web3.0具有哪些特征，只有當(dāng)我們真正處于那個(gè)時(shí)代時(shí)才能進(jìn)行總結(jié)、歸納。但不論如何，Web發(fā)展的腳步是不會(huì)停下的，新的時(shí)代必將會(huì)來(lái)臨。1.2 HTML5的目標(biāo)1.2.1 HTML的發(fā)展歷程1993年6月，互聯(lián)網(wǎng)工程工作小組(I

7、ETF)發(fā)布了一份工作草案“超文本標(biāo)記語(yǔ)言(第一版)”，這被認(rèn)為是HTML的第一個(gè)版本，但它并不是一個(gè)成型的標(biāo)準(zhǔn)，因?yàn)楫?dāng)時(shí)有很多不同的版本。2007年，W3C從WHATWG接手相關(guān)工作，重新開始發(fā)展HTML5，而此時(shí)的W3C同時(shí)進(jìn)行著兩套規(guī)范的制定工作：XHTML2和HTML5。直到2009年，W3C宣布終止XHTML2的相關(guān)工作，HTML5開始逐漸進(jìn)入廣大開發(fā)者的視野中。2014年10月29日，W3C宣布，經(jīng)過近8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成了，并已公開發(fā)布。1.2.2 HTML5要解決的問題HTML5將取代HTML4.01、XHTML1.0標(biāo)準(zhǔn)，在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的今

8、天，使網(wǎng)絡(luò)標(biāo)準(zhǔn)符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺(tái)帶來(lái)無(wú)縫銜接的豐富內(nèi)容。它將成為開放Web平臺(tái)(Open Web Platform)的基石，進(jìn)一步推動(dòng)更深入的跨平臺(tái)Web應(yīng)用的發(fā)展。同時(shí)，HTML5還解決了HTML歷史遺留的幾個(gè)大問題。HTML4.01沒有考慮到Web的發(fā)展如此迅猛，在標(biāo)準(zhǔn)中沒有提供對(duì)視頻、動(dòng)畫和聲音的支持，而Web這方面的需求被瀏覽器插件補(bǔ)充了。想要在網(wǎng)頁(yè)中播放視頻或者聲音，只能通過第三方插件實(shí)現(xiàn)，而其中最為著名的是Adobe公司提供的第三方插件“Adobe Flash Player”，久而久之，這個(gè)部署在億萬(wàn)瀏覽器里的商業(yè)插件儼然成為了HTML中的另外一個(gè)標(biāo)準(zhǔn)。除了Fla

9、sh這個(gè)商業(yè)產(chǎn)品成為事實(shí)標(biāo)準(zhǔn)，HTML4.01標(biāo)準(zhǔn)還面臨一個(gè)問題，那就是另一個(gè)擴(kuò)展標(biāo)準(zhǔn)的制定者IE。當(dāng)時(shí)的IE在瀏覽器市場(chǎng)中占有絕對(duì)的統(tǒng)治地位，并且擴(kuò)展了大量的僅IE支持的“IE Only”語(yǔ)法，比如IE默認(rèn)的腳本語(yǔ)言是JScript，它跟標(biāo)準(zhǔn)腳本語(yǔ)言JavaScript在功能和語(yǔ)法雖然大致相同，但在細(xì)節(jié)上還是有著一些差別，這就導(dǎo)致Web程序員不得不痛苦地為IE及其他瀏覽器編寫兩種腳本。瀏覽器不兼容現(xiàn)象由此而來(lái)，很多網(wǎng)站甚至只能使用IE進(jìn)行瀏覽。就這樣，整個(gè)Web世界被兩大IT巨頭微軟和Adobe綁架了。Web企業(yè)每年不得不向IE和Adobe繳納巨額的費(fèi)用來(lái)使用它們的產(chǎn)品。最終，IT巨頭們都坐

10、不住了，既然HTML4.01無(wú)法解決這個(gè)問題，那么就用新的標(biāo)準(zhǔn)來(lái)解決吧，而這個(gè)新的標(biāo)準(zhǔn)就是HTML5。HTML5就這樣誕生了。1.3 HTML5的新功能1.3.1 無(wú)插件范式過去，很多功能只能通過插件或者復(fù)雜的hack(針對(duì)原程序文件的直接修改)來(lái)實(shí)現(xiàn)，但在HTML5中，提供了對(duì)這些功能的原生支持。比如過去只能通過Flash播放視頻和聲音，而現(xiàn)在HTML5提供了video和audio元素來(lái)對(duì)視頻和聲音進(jìn)行支持；再比如過去想在頁(yè)面中畫出某些圖形是非常困難的，而現(xiàn)在有了canvas元素就能很輕易地實(shí)現(xiàn)了?，F(xiàn)在的Web開發(fā)人員不需要再依賴插件就能制作出效果絢麗、功能強(qiáng)大的頁(yè)面了。1.3.2 新的DO

11、CTYPE和字符集HTML5對(duì)HTML代碼規(guī)范進(jìn)行了大量的簡(jiǎn)化操作，使得Web頁(yè)面的代碼更加精簡(jiǎn)、高效。如Web頁(yè)面的DOCTYPE就被極大地簡(jiǎn)化了。以前的DOCTYPE有很多的版本，以下列舉幾個(gè)常見的DOCTYPE： HTML 4.01 Strict這些誰(shuí)能夠記得住？一般來(lái)說(shuō)，在新建頁(yè)面時(shí)，開發(fā)工具會(huì)直接為頁(yè)面添加默認(rèn)的DOCTYPE，而開發(fā)人員如果需要用到其他類型的DOCTYPE，則需要通過復(fù)制、粘貼來(lái)進(jìn)行更換，這無(wú)疑又給開發(fā)人員增加了工作量和工作難度。HTML5干凈利落地解決了這一問題：現(xiàn)在的DOCTYPE非常簡(jiǎn)單，相信你讀兩三遍就能背下它。跟DOCTYPE一樣，字符集的聲明也被簡(jiǎn)化了。

12、過去，設(shè)置字符集為UTF-8是這樣寫的：現(xiàn)在的寫法是：1.3.3 新的HTML元素HTML5不僅僅是把現(xiàn)有的標(biāo)記進(jìn)行了簡(jiǎn)化，使它們更加簡(jiǎn)短，它還定義了一批新的元素，擴(kuò)展出了許多新的功能。表1-1列舉了幾個(gè)比較常用的新元素。1.3.4 新的輸入類型和屬性HTML5不僅定義了一批新的元素，還為input元素提供了許多新的輸入類型。比如在過去，我們想要?jiǎng)?chuàng)建一個(gè)優(yōu)秀的時(shí)間選擇輸入框，需要寫非常多的代碼或者使用第三方提供的插件，但在HTML5中，我們只需一條命令就能實(shí)現(xiàn)：表1-2列舉出了HTML5新增的輸入類型。同時(shí)，HTML5還添加了許多input元素的屬性，提供更多便利功能，如表1-3所示。1.3.

13、5 簡(jiǎn)化頁(yè)面元素查找方式HTML5在document對(duì)象中引入了一種新的頁(yè)面元素查找方式，使用這種方式，可以更加精確地獲取想要獲取的頁(yè)面元素而不必再使用標(biāo)準(zhǔn)DOM獲取所有元素再遍歷查找。我們來(lái)對(duì)比一下HTML5出現(xiàn)前后頁(yè)面元素查找方法的區(qū)別，如表1-4和表1-5所示。例1-1 頁(yè)面中有一個(gè)表格，鼠標(biāo)點(diǎn)擊某個(gè)單元格時(shí)改變單元格背景顏色為紅色。改變點(diǎn)擊單元格背景顏色的代碼如下：從上面的代碼可以看出，核心代碼是：通過一行代碼即可找到點(diǎn)擊表格時(shí)鼠標(biāo)所懸停的單元格，這在以前是不可想象的。相比HTML4.01，HTML5的新功能實(shí)在太多了，我們很難一一列舉出來(lái)，那么接下來(lái)請(qǐng)你跟隨我們的腳步開始HTML5新

14、功能的探索旅程吧。第2章 HTML5的多媒體2.1 容器格式和編/解碼格式2.2 瀏覽器支持特性檢測(cè)2.3 視頻、音頻的腳本控制2.4 HTML5中的音頻2.5 HTML5中的視頻2.1 容器格式和編/解碼格式2.1.1 視頻、音頻的容器我們常見的視頻文件的擴(kuò)展名有mkv、avi、mp4等，音頻文件的擴(kuò)展名有mp3、wav等，其實(shí)這些僅僅只是容器的格式，它們類似于壓縮了一組文件的壓縮包文件。對(duì)于一個(gè)視頻文件(視頻容器)，一般包含了視頻軌道、音頻軌道及其他一些元數(shù)據(jù)，如圖2-1所示。圖2-1 視頻容器目前，視頻文件(視頻容器)種類有很多，此處只列舉一些最常見的： Audio Video Inte

15、ractive(.avi) Flash Video(.flv) MPEG-4(.mp4) Matroska(.mkv) Ogg(.ogv) WebM(.webm)2.1.2 視頻、音頻的編/解碼器視頻、音頻的編/解碼器其實(shí)就是一組算法，用來(lái)對(duì)視頻或音頻進(jìn)行編碼和解碼。對(duì)視頻和音頻進(jìn)行編碼，是為了它們能夠快速地傳播。需要注意的是，不同容器格式對(duì)應(yīng)的編/解碼器是不同的。常見的音頻編/解碼器如下： ACC MPEG-3 Ogg Vorbis常見的視頻編/解碼器如下： H.264 VP8 Ogg Theora有些編/解碼器是免費(fèi)的，有些則受專利保護(hù)，需要付費(fèi)，雖然HTML5很想統(tǒng)一指定編/解碼器，但實(shí)

16、施起來(lái)卻困難重重，最后不得不放棄對(duì)編/解碼器的要求。因此而引發(fā)的問題就是各種不同的瀏覽器對(duì)視頻格式的支持是有區(qū)別的，后面我們將會(huì)詳細(xì)講解。Web開發(fā)人員只能熟悉各種瀏覽器對(duì)視頻和音頻編/解碼器的支持情況，并針對(duì)不同的瀏覽器環(huán)境嵌入不同的源文件。相信隨著HTML5的發(fā)展，HTML5對(duì)不同編/解碼器的支持程度會(huì)越來(lái)越高，最終支持任何格式的視頻文件。2.2 瀏覽器支持特性檢測(cè)video和audio元素是HTML5的新元素，它們的可用性被有意地設(shè)計(jì)為不需要任何腳本來(lái)進(jìn)行檢測(cè)。你可以設(shè)置多個(gè)源文件，支持HTML5新特性的瀏覽器會(huì)自動(dòng)選擇一個(gè)它所支持的視頻格式來(lái)進(jìn)行播放，而不支持HTML5新特性的瀏覽器(

17、目前除了IE8及之前的版本，其余都支持HTML5)會(huì)完全忽略掉這兩個(gè)元素。根據(jù)這一特點(diǎn)，我們?cè)谝话沩?yè)面制作中只需要在video或audio元素中寫入提示信息即可。向頁(yè)面中插入視頻和音頻的完整代碼如下：如果支持HTML5的瀏覽器，如Chrome則會(huì)顯示如圖2-2所示的內(nèi)容。圖2-2 支持HTML5瀏覽器顯示audio及video元素 如果不支持HTML5的瀏覽器，如IE8則會(huì)顯示如圖2-3所示的內(nèi)容。圖2-3 不支持HTML5瀏覽器顯示audio及video元素但是，如果你想要任何頁(yè)面都能正確打開所制作的視頻播放頁(yè)面或者你需要對(duì)視頻做更多的操作，就需要使用JavaScript。檢測(cè)瀏覽器是否支持

18、video和audio元素，我們可以用以下JavaScript函數(shù)來(lái)進(jìn)行。檢測(cè)頁(yè)面是否支持video的代碼如下：如果瀏覽器支持video及audio元素，則被創(chuàng)建的元素對(duì)應(yīng)的DOM對(duì)象會(huì)有一個(gè)名為canPlayType()的方法，反之，該對(duì)象只會(huì)擁有一些所有元素都具有的公共屬性。我們先動(dòng)態(tài)創(chuàng)建一個(gè)需要檢測(cè)的對(duì)象，檢測(cè)canPlayType()方法是否存在，再通過“!”運(yùn)算符將結(jié)果轉(zhuǎn)換成bool值，就可以檢測(cè)出元素是否被支持。如果檢測(cè)到瀏覽器不支持video或audio元素，那么我們可以使用JavaScript向頁(yè)面嵌入媒體標(biāo)簽來(lái)引入想要播放的視頻。雖然同樣可以用腳本控制媒體，但是使用的是諸如F

19、lash等其他播放技術(shù)。2.3 視頻、音頻的腳本控制HTML5 DOM為audio和video元素提供了方法、屬性和事件。這些方法、屬性和事件允許我們使用JavaScript來(lái)操作audio和video元素，開發(fā)人員可以基于這些方法、屬性和事件自行開發(fā)媒體播放用戶界面，制作屬于自己的視頻或音頻播放器。列舉一些常用的方法和屬性如表2-1表2-4所示。2.4 HTML5中的音頻2.4.1 audio元素的基本操作在下面的代碼中，我們創(chuàng)建一個(gè)頁(yè)面，頁(yè)面中有一個(gè)播放器，其中加載了一首歌曲，點(diǎn)擊播放按鈕就能播放歌曲。歌曲播放頁(yè)面的完整代碼如下：這段代碼中，在頁(yè)面中嵌入了一個(gè)名為“audio.mp3”的音

20、頻文件，它和HTML文檔在同一個(gè)路徑下。在Chrome瀏覽器中打開的效果如圖2-4所示，在圖中可以看到一個(gè)音頻播放器，它有播放/暫停按鈕、播放時(shí)間/總播放時(shí)間、播放進(jìn)度條、聲音控制滑動(dòng)條及更多操作按鈕(展開后有一個(gè)下載按鈕，有些瀏覽器會(huì)直接顯示為下載按鈕)。這是HTML5默認(rèn)音頻播放器，支持audio元素的不同瀏覽器顯示的外觀有區(qū)別，但功能基本一致。圖2-4 簡(jiǎn)單音頻播放頁(yè)面在上面的代碼中，向頁(yè)面中嵌入音頻的代碼為：代碼中，src屬性用于告訴瀏覽器播放的聲音的數(shù)據(jù)源位置；controls屬性告訴瀏覽器顯示用戶控件，如果不設(shè)置顯示用戶控件，則頁(yè)面上將不會(huì)顯示播放器，當(dāng)然你也無(wú)法開始播放音樂，除非

21、你設(shè)置音樂自動(dòng)播放；開始標(biāo)簽和結(jié)束標(biāo)簽中間的文字用于為不支持audio元素的瀏覽器提供替代顯示內(nèi)容，當(dāng)然，這些文字你也可以將它設(shè)置為Flash播放器等播放插件，或者直接給出播放源文件的鏈接地址。標(biāo)簽有很多屬性，用于為音頻提供更多的設(shè)置，如表2-5所示。例2-1 制作一個(gè)帶有背景音樂的頁(yè)面。帶有背景音樂頁(yè)面的完整代碼如下：代碼非常簡(jiǎn)單，思路也不難，背景音樂有幾個(gè)特點(diǎn)：(1) 打開頁(yè)面后，背景音樂會(huì)自動(dòng)播放；(2) 背景音樂不需要顯示音樂播放控制器；(3) 背景音樂應(yīng)該循環(huán)播放。總結(jié)了背景音樂的特點(diǎn)后，我們就能很容易地為頁(yè)面添加背景音樂了。首先使用audio元素在頁(yè)面中嵌入一個(gè)音頻，使用autop

22、lay屬性設(shè)置頁(yè)面加載完成后自動(dòng)播放歌曲；不加入controls屬性，頁(yè)面中則不會(huì)生成播放控制器；使用loop屬性設(shè)置音樂循環(huán)播放。一般設(shè)置背景音樂的目的是給頁(yè)面渲染某種氛圍，但是大部分用戶對(duì)頁(yè)面背景音樂比較反感，這個(gè)時(shí)候可以考慮在頁(yè)面中添加一個(gè)按鈕來(lái)設(shè)置背景音樂的打開或關(guān)閉，利用按鈕或超鏈接關(guān)聯(lián)JavaScript來(lái)控制audio元素，在頁(yè)面body元素中添加以下代碼可加入背景音樂控制按鈕。在例2-1制作的頁(yè)面的audio元素后面添加如下代碼：2.4.2 使用source元素前面我們已經(jīng)介紹過，音頻的格式有很多，而HTML5中的audio元素支持的音頻格式只有3種：Ogg Vorbis(.o

23、gg)、MP3(.mp3)、Wav(.wav)。因?yàn)樯婕皩＠麢?quán)和特許權(quán)使用費(fèi)等法律和財(cái)務(wù)問題，不同瀏覽器對(duì)視頻格式的支持是不同的。我們可以通過表2-6看到主流瀏覽器對(duì)音頻格式的支持情況。由表2-6可以看到，沒有一種格式的音頻文件是所有主流瀏覽器所支持的，如果想要讓任何瀏覽器打開你的頁(yè)面都能播放音頻的話，至少需要在頁(yè)面中嵌入兩種不同格式的音頻文件。HTML5標(biāo)準(zhǔn)也考慮到了這個(gè)問題，可以為一個(gè)audio元素設(shè)置多個(gè)源文件，格式如下：2.4.3 瀏覽器支持音頻格式檢測(cè)我們可以通過JavaScript檢測(cè)技術(shù)來(lái)檢測(cè)瀏覽器的音頻格式支持情況。我們先來(lái)看看下面這段測(cè)試瀏覽器是否支持.ogg類型的代碼。在2

24、.2瀏覽器支持特性檢測(cè)章節(jié)中，我們已經(jīng)了解了如何檢測(cè)瀏覽器是否支持audio元素，因此上面的代碼直接使用我們提供的isSupportAudio()方法來(lái)判斷瀏覽器是否支持audio元素，如果瀏覽器不支持audio元素，則肯定無(wú)法播放音頻，直接返回false。接下來(lái)使用 createElement()方法創(chuàng)建一個(gè)audio元素，然后調(diào)用它的canPlayType()方法，將Ogg Vorbis類型的參數(shù)傳入，測(cè)試audio能否播放.ogg格式的音頻文件。 probably：表示瀏覽器有充分的把握可以播放此格式。 maybe：表示瀏覽器有可能可以播放此格式。 空字符串：表示瀏覽器無(wú)法播放此格式。因

25、此，在使用我們提供的方法判斷能否播放某種格式的音頻時(shí)，應(yīng)該判斷返回值不為空則表示可以播放。如判斷能否播放.mp3格式文件：2.5 HTML5中的視頻2.5.1 video元素的基本操作在下面的代碼中，我們創(chuàng)建了一個(gè)頁(yè)面，頁(yè)面中有一個(gè)播放器，其中加載了一個(gè)視頻，點(diǎn)擊播放按鈕就能播放視頻。視頻播放頁(yè)面的完整代碼如下：看到這段代碼是不是很熟悉？沒錯(cuò)，在頁(yè)面中嵌入視頻和嵌入音頻的代碼基本一樣，差別只是標(biāo)簽名和數(shù)據(jù)源的格式不同而已。在上面的代碼中，我們?cè)陧?yè)面中嵌入了一個(gè)名為video.mp4的視頻，這是最近非常流行的一首歌曲的MV。Chrome瀏覽器打開的效果如圖2-5所示。圖2-5 視頻播放頁(yè)面從圖2

26、-5中可以看到，視頻播放器和音頻播放器一樣有播放/暫停按鈕、播放時(shí)間/總播放時(shí)間、播放進(jìn)度條、聲音控制滑動(dòng)條及更多操作(下載)等按鈕，另外還多了一個(gè)全屏模式按鈕和畫面。通過上面的圖片及分析代碼可以看到，視頻并沒有播放，而等待畫面是視頻的第一幀。在上面的代碼中，向頁(yè)面中嵌入視頻的代碼為：代碼與嵌入音頻相似，因此這里不再贅述。我們直接來(lái)看看video元素有哪些屬性吧。video屬性如表2-7所示。與audio屬性進(jìn)行對(duì)比，video屬性多了3個(gè)：height、width和poster?？梢园l(fā)現(xiàn)，這3個(gè)屬性都是和畫面有關(guān)，其中需要注意的是： 對(duì)于視頻來(lái)說(shuō)，同時(shí)設(shè)置height和width只能設(shè)置播放

27、器的高度和寬度，并不會(huì)改變視頻畫面的長(zhǎng)寬比。因此，我們一般只設(shè)置height和width中的一個(gè)即可。 請(qǐng)記住每次在頁(yè)面嵌入視頻時(shí)都要設(shè)置height或width，否則頁(yè)面加載完成時(shí)視頻播放器只會(huì)默認(rèn)大小，等加載了視頻后視頻播放器會(huì)擴(kuò)大，將有一個(gè)從小到大的閃現(xiàn)變化，且視頻的大小會(huì)根據(jù)視頻分辨率發(fā)生變化，不利于頁(yè)面布局。 poster與autoplay屬性一般不同時(shí)出現(xiàn)，因?yàn)樵O(shè)置視頻自動(dòng)播放時(shí)，視頻的封面圖片會(huì)一閃而過，就失去了設(shè)置它的意義。poster與preload=meta屬性設(shè)置一般同時(shí)出現(xiàn)，這樣可以為網(wǎng)頁(yè)用戶節(jié)省流量，提高網(wǎng)頁(yè)打開速度。2.5.2 使用source元素和audio元素相

28、似，目前video元素支持的視頻格式也是3種：Ogg Vorbis(.ogg)、MPEG-4(.mp4)、WebM(.webm)。各主流瀏覽器對(duì)視頻格式的支持如表2-8所示。通過表2-8可以看到，除了Chrome瀏覽器支持所有的視頻格式外，其他主流瀏覽器都只支持3種格式中的一種或兩種。如果想要讓任何瀏覽器打開你的頁(yè)面都能播放視頻的話，至少需要在頁(yè)面中嵌入兩種不同格式的視頻文件。同audio元素一樣，我們可以使用source元素為一個(gè)video元素設(shè)置多個(gè)源文件，格式如下：2.5.3 瀏覽器支持視頻格式檢測(cè)視頻格式支持與音頻格式支持類似，前面我們已經(jīng)了解了音頻格式檢測(cè)的方法，因此此處不再贅述，只

29、展示檢測(cè)代碼。檢測(cè)是否支持.ogg類型的代碼如下：使用我們提供的方法判斷能否播放某種格式的視頻，如判斷能否播放.mp4格式文件如下：第3章 HTML5的拖放3.1 瀏覽器支持檢測(cè)3.2 實(shí)現(xiàn)簡(jiǎn)單拖放3.3 拖放相關(guān)的屬性和事件3.4 dataTransfer對(duì)象3.5 拖放圖片到瀏覽器3.1 瀏覽器支持檢測(cè)Internet Explorer 9、Firefox、Opera 12、Chrome以及 Safari 5 支持拖放。我們可以通過以下代碼來(lái)測(cè)試瀏覽器是否支持HTML5拖放特性。3.2 實(shí)現(xiàn)簡(jiǎn)單拖放例3-1 拖動(dòng)前頁(yè)面效果如圖3-1所示，頁(yè)面中有一個(gè)方框，方框下有一張圖片，將圖片拖動(dòng)放入方

30、框中。圖3-1 拖動(dòng)前頁(yè)面效果拖動(dòng)效果實(shí)現(xiàn)代碼如下：拖放后頁(yè)面效果如圖3-2所示。圖3-2 拖動(dòng)后頁(yè)面效果實(shí)現(xiàn)拖動(dòng)的思路是：當(dāng)光標(biāo)在圖片上按住鼠標(biāo)左鍵進(jìn)行移動(dòng)時(shí)，將被該圖片元素的id存入dataTransfer對(duì)象中；當(dāng)光標(biāo)移動(dòng)到目標(biāo)div元素中放開鼠標(biāo)左鍵時(shí)，將被記錄了id的圖片元素設(shè)置為該div元素的子元素。在這個(gè)過程中，我們稱被拖動(dòng)的元素為源元素，拖動(dòng)的目的地為目的地元素。同時(shí)，目的地元素默認(rèn)拒絕接收被拖放的元素，我們?cè)陧?yè)面拖動(dòng)元素的過程中，需要通過preventDefault()方法關(guān)閉目的地元素默認(rèn)行為。在上面的代碼中，首先是題目提供的內(nèi)容：一張圖片和一個(gè)div元素。其代碼如下：當(dāng)鼠

31、標(biāo)左鍵在目的地元素內(nèi)松開時(shí)，關(guān)閉目的地元素的默認(rèn)行為，再?gòu)膁ataTransfer對(duì)象中將保存在其中的id取出來(lái)，通過此id找到源元素，再將源元素設(shè)置為目的地元素的子元素。編寫以下JavaScript代碼，綁定到目的地元素的ondrop事件。3.3 拖放相關(guān)的屬性和事件1. 拖放相關(guān)的屬性要實(shí)現(xiàn)元素的拖放，需要先設(shè)置元素的draggable=true屬性，即將元素設(shè)置為可拖放。在上面的例子中并沒有設(shè)置這個(gè)屬性，因?yàn)殒溄雍蛨D片默認(rèn)是可拖放的，不需要設(shè)置draggable 屬性。屬性設(shè)置語(yǔ)法如下： true: 可以拖動(dòng)。 false: 禁止拖動(dòng)。 auto: 跟隨瀏覽器定義是否可以拖動(dòng)。2. 拖放

32、相關(guān)的事件與拖放相關(guān)的元素有兩個(gè)，在拖放的過程中會(huì)分別觸發(fā)如表3-1所示的事件。ondragenter、ondragover和ondrop事件的默認(rèn)行為是拒絕接收任何被拖放的元素，因此，我們必須阻止瀏覽器這種默認(rèn)行為。通過event.preventDefault()方法可以阻止瀏覽器默認(rèn)行為(對(duì)于火狐瀏覽器，需要使用event.stopPropagation()方法阻止瀏覽器默認(rèn)行為)。3.4 dataTransfer對(duì)象1. dataTransfer對(duì)象的屬性dataTransfer對(duì)象列入標(biāo)準(zhǔn)的屬性有4個(gè)，如表3-2所示。2. dataTransfer對(duì)象的方法dataTransfer對(duì)象

33、列入標(biāo)準(zhǔn)的方法有4個(gè)，如表3-3所示。3.5 拖放圖片到瀏覽器HTML5可以實(shí)現(xiàn)從本地拖放文件到瀏覽器中，利用FileReader對(duì)象讀取文件，并進(jìn)行后續(xù)操作。此功能一般應(yīng)用在圖片拖放和文件上傳操作中，將本地圖片拖放并顯示到頁(yè)面指定位置或?yàn)槲募x擇控件提供直接拖放功能。例3-2 拖動(dòng)本地圖片放入頁(yè)面指定的位置。拖放圖片到瀏覽器的代碼如下：拖入圖片前頁(yè)面顯示效果如圖3-3所示，拖入圖片后頁(yè)面顯示效果如圖3-4所示。圖3-3 拖入圖片前頁(yè)面顯示圖3-4 拖入圖片后頁(yè)面顯示需要注意的是：拖動(dòng)本地文件到瀏覽器，當(dāng)瀏覽器支持拖放文件格式時(shí)，瀏覽器默認(rèn)會(huì)打開本地文件；當(dāng)瀏覽器不支持拖放文件格式時(shí)，瀏覽器會(huì)

34、默認(rèn)觸發(fā)下載器下載該文件。同時(shí)，不同瀏覽器打開本地文件的方式有所不同。 Chrome：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會(huì)在當(dāng)前窗口打開文件的預(yù)覽。 FireFox：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會(huì)在新窗口打開文件的預(yù)覽。 IE：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會(huì)在當(dāng)前窗口打開文件的預(yù)覽。要阻止瀏覽器的默認(rèn)行為，直接為目的地元素添加事件的方法是不行的，只能通過JavaScript在頁(yè)面加載完成后為目的地元素追加相應(yīng)方法。關(guān)鍵代碼如下：在ondrop事件中，先阻止元素的默認(rèn)行為；再通過dataTransfer對(duì)象獲取文件列表，因?yàn)槲覀冎煌蟿?dòng)一個(gè)圖片文件，

35、因此可以直接通過下標(biāo)0找到文件，獲取文件類型；然后創(chuàng)建一個(gè)img元素和一個(gè)FileReader對(duì)象；接下來(lái)判斷獲取的文件類型是否支持img元素，如果不支持，則給出提示并返回；如果img元素支持文件類型，則使用FileReader對(duì)象讀取文件地址并賦值給img元素，并將該img元素添加為目的地元素的子元素；最后通過FileReader對(duì)象的readAsDataURL()方法將讀取到的文件編碼成Data URL置于頁(yè)面中。其代碼如下：第4章 HTML5的繪圖4.1 canvas API簡(jiǎn)介4.2 瀏覽器支持檢測(cè)4.3 什么是canvas4.4 canvas中的坐標(biāo)4.5 在canvas上繪圖4.1

36、 canvas API簡(jiǎn)介canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動(dòng)畫等。沒有canvas的年代，繪圖只能借助Flash插件實(shí)現(xiàn)，頁(yè)面不得不用JavaScript和Flash進(jìn)行交互。有了canvas，我們就再也不需要Flash了，可以直接使用JavaScript完成圖形繪制。4.2 瀏覽器支持檢測(cè)Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持canvas元素及其屬性和方法，Internet Explorer 8以及更早的版本不支持canvas元素。和其他HTML5元素一樣，在支持c

37、anvas元素的瀏覽器中，canvas元素里面的內(nèi)容是不會(huì)顯示的，但是在不支持的情況下，會(huì)顯示出來(lái)。于是，我們可以把它作為提示用語(yǔ)，用來(lái)在不支持canvas元素的瀏覽器中進(jìn)行提示。方法如下：一般來(lái)講，創(chuàng)建canvas元素并檢查getContext屬性就可以檢測(cè)瀏覽器是否支持canvas元素，但是在一些瀏覽器下不夠準(zhǔn)確，所以再檢測(cè)一下elem.getContext(2d)的執(zhí)行結(jié)果，就可以完全確定。關(guān)于canvas元素，有一點(diǎn)要補(bǔ)充的，那就是fillText方法。盡管瀏覽器支持canvas元素，但是我們并不能確定它是否支持fillText方法。檢測(cè)支持fillText的方法如下：4.3 什么是c

38、anvascanvas只是HTML5中的一個(gè)標(biāo)簽而已，可定義一個(gè)畫布，它本身沒有任何作用，就相當(dāng)于是一個(gè)矩形區(qū)域的畫板，在畫板上沒有任何東西，但是你可以使用JavaScript在它上面畫任何你想畫的東西，你可以控制其上的每一個(gè)像素。它默認(rèn)的寬度為300px，高度為150px，背景為透明色。canvas是支持樣式控制的，比如設(shè)置邊框、邊距、背景等，但是有一個(gè)地方值得注意：在設(shè)置canvas寬度和高度時(shí)，如果用style樣式來(lái)設(shè)置，會(huì)把圖像進(jìn)行拉伸，因此請(qǐng)注意時(shí)刻為canvas元素設(shè)置寬度和高度。例如：頁(yè)面顯示效果如圖4-1所示。圖4-1 canvas元素是行內(nèi)元素的表現(xiàn)4.4 canvas中的坐

39、標(biāo)canvas中的坐標(biāo)與HTML標(biāo)準(zhǔn)坐標(biāo)一致，即左上角為(0，0)，右下角為設(shè)置的寬度及高度(x，y)；(0，0)點(diǎn)稱為原點(diǎn)，也叫初始點(diǎn)，即繪圖開始的位置。如以下代碼：在頁(yè)面中的表現(xiàn)如圖4-2所示。圖4-2 canvas中的坐標(biāo)4.5 在canvas上繪圖例4-1 在canvas上繪制一個(gè)矩形。在canvas上繪制一個(gè)矩形的代碼如下：在上面的代碼中，我們先在頁(yè)面中放置了一個(gè)canvas元素，設(shè)置元素的寬度為1000px，高度為800px，id為canv；再通過CSS為該元素添加一個(gè)灰色的背景色；然后通過JavaScript在canvas中繪制一個(gè)矩形。核心代碼如下：大多數(shù)Canvas繪圖 AP

40、I 都沒有定義在canvas元素本身上，而是定義在通過畫布的getContext(2d)方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上(getContext()方法目前只有2d這一個(gè)參數(shù)，以后會(huì)有3d，至于什么時(shí)候公布大家可以自行查找相關(guān)資料)。因此，在canvas中繪圖時(shí)，大部分時(shí)間其實(shí)都是在操作“繪圖環(huán)境”對(duì)象上進(jìn)行繪制。Canvas API分為屬性部分和方法部分，內(nèi)容很多，逐個(gè)解讀可能不利于我們對(duì)功能的理解，因此，后面的內(nèi)容我們將會(huì)以功能為單位進(jìn)行講解。為了便于說(shuō)明，我們?cè)诶L圖前獲取canvas元素和繪圖環(huán)境元素，統(tǒng)一為以下代碼：4.5.1 繪制直線繪制直線相關(guān)的方法和屬性如表4-1所示。在頁(yè)面中繪制

41、直線的代碼如下：頁(yè)面顯示如圖4-3所示，moveTo(x，y)方法只是把筆觸移動(dòng)到目標(biāo)位置，并不會(huì)留下軌跡，而lineTo(x，y)方法會(huì)從筆觸當(dāng)前位置移動(dòng)到目標(biāo)位置，并且進(jìn)行連線。另外需要注意的是，使用lineTo(x，y)方法之前一定要確定筆觸位置，否則canvas會(huì)將筆觸的當(dāng)前位置視為筆觸初始位置而不會(huì)創(chuàng)建任何線條。圖4-3 在canvas中繪制直線4.5.2 繪制方框繪制方框相關(guān)的方法和屬性如表4-2所示。在頁(yè)面中繪制矩形的代碼如下：頁(yè)面顯示效果如圖4-4所示。從頁(yè)面顯示效果中，我們可以看出不同方法的作用是不同的。在canvas中，從左向右繪制出了3個(gè)寬度為100px、高度為200px

42、的矩形。從中可以總結(jié)出如下規(guī)律： rect()不能單獨(dú)使用，必須借助fill()、stroke()方法。 rect()+fill() 組合的效果和fillRect()一致，可等價(jià)。 同理，rect()+stroke()組合的效果和strokeRect()一致，可等價(jià)。4.5.3 繪制圓或弧繪制圓形或弧形的使用方法為arc(x，y，r，sAngle，eAngle，counterclockwise)。其中：x、y是圓心坐標(biāo)；r是半徑；sAngle是開始弧度；eAngle是結(jié)束弧度；counterclockwise表示順時(shí)針還是逆時(shí)針方式，默認(rèn)為順時(shí)針false，逆時(shí)針為true。注意：此處是使用弧

43、度(rad)來(lái)進(jìn)行計(jì)算的，大家在高中時(shí)期應(yīng)該學(xué)習(xí)過弧度，接下來(lái)我們來(lái)回憶一下弧度有關(guān)的知識(shí)： 1rad = 1r 57.3。 一周 = 360 = (2p) rad。 1 = (2p/360)rad = (p/180) rad。JavaScript中沒有p，但是有函數(shù)Math.PI，如果需要用到準(zhǔn)確的弧度，則需要使用此函數(shù)。在頁(yè)面中繪制一個(gè)空心圓的代碼如下：頁(yè)面顯示效果如圖4-5所示。圖4-5 在canvas中繪制圓和弧canvas中繪制圓的開始位置是在最右邊，方向默認(rèn)是順時(shí)針，示意圖如圖4-6所示。圖4-6 繪制圓的示意圖4.5.4 開始和關(guān)閉路徑我們來(lái)看這樣一個(gè)需求：在canvas中繪制兩

44、個(gè)圓，一個(gè)空心，一個(gè)實(shí)心。用之前所學(xué)的內(nèi)容，嘗試進(jìn)行下面的代碼：上面的代碼中，先繪制一個(gè)空心的圓，再繪制一個(gè)實(shí)心的圓，運(yùn)行的結(jié)果如圖4-7所示。圖4-7 繪制兩個(gè)圓錯(cuò)誤代碼執(zhí)行效果從圖4-7中可以看出，兩個(gè)圓都是實(shí)心，且第一個(gè)圓還有紅色的描邊。分析錯(cuò)誤原因?yàn)椋旱谝粋€(gè)賀其實(shí)繪制了兩次。解決這個(gè)問題需要用到如表4-3所示的兩個(gè)方法。這兩個(gè)方法一般是成對(duì)存在的，closePath() 方法會(huì)將畫筆移到beginPath()的位置，并且結(jié)束畫布。接下來(lái)，我們對(duì)上面有問題的代碼進(jìn)行改造，在每一次繪制圓之前開始路徑，繪制完成后結(jié)束路徑。其代碼如下：頁(yè)面顯示效果如圖4-8所示。圖4-8 繪制兩個(gè)圓正確代碼執(zhí)

45、行效果4.5.5 繪制文字繪制文字相關(guān)的方法和屬性如表4-4所示。在頁(yè)面中繪制兩行文字的代碼如下： 頁(yè)面顯示效果如圖4-9所示。圖4-9 在canvas中繪制兩行文字canvas中繪制文字時(shí)，起始坐標(biāo)并不是左上角，而是文字基線(Baseline)。在CSS中我們知道文字有基線，在canvas中繪制文字同樣有基線?；€可以通過textBaseline屬性進(jìn)行設(shè)置，默認(rèn)值是alphabetic。通過下面的代碼可以看出文字與其坐標(biāo)的關(guān)系： 頁(yè)面顯示效果如圖4-10所示。圖4-10 canvas中的文字基線4.5.6 繪制圖像canvas中繪制圖像的方法如表4-5所示。drawImage()方法參數(shù)說(shuō)

46、明如表4-6所示。在canvas中繪制一張圖片的代碼如下：頁(yè)面顯示效果如圖4-11所示。圖4-11 在canvas中繪制圖像第5章 HTML5的本地存儲(chǔ)5.1 Web Storage5.2 Web SQL Database5.3 IndexedDB5.1 Web StorageWeb Storage目前有兩種存儲(chǔ)對(duì)象：localStorage和sessionStorage。localStorage屬于永久性存儲(chǔ)，而sessionStorage屬于臨時(shí)性儲(chǔ)存，當(dāng)會(huì)話結(jié)束的時(shí)候，sessionStorage中的鍵值對(duì)會(huì)被清空。也就是說(shuō)，localStorage對(duì)象存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制，一小時(shí)、一

47、天、一年后，數(shù)據(jù)依然可用，sessionStorage對(duì)象在用戶關(guān)閉瀏覽器窗口時(shí)，數(shù)據(jù)就會(huì)被刪除。5.1.1 瀏覽器支持檢測(cè)一般來(lái)講，判斷瀏覽器是否支持Web Storage，我們只需檢查全局對(duì)象是否有l(wèi)ocalStorage或sessionStorage屬性之一即可。此處，我們提供的檢測(cè)方法是檢測(cè)全局對(duì)象是否有l(wèi)ocalStorage屬性。其代碼如下：5.1.2 Web Storage APIWeb Storage API提供了一系列的屬性和方法，訪問儲(chǔ)存在本地的數(shù)據(jù)。這些屬性和方法在localStorage和sessionStorage中都能夠使用，主要的API如表5-1所示。注意：Web

48、 Storage API監(jiān)聽事件只會(huì)發(fā)生在同源窗口中(同一個(gè)頁(yè)面的不同窗口)，當(dāng)前窗口不會(huì)觸發(fā)監(jiān)聽事件。如果對(duì)應(yīng)的操作沒有值，則該值為null。如以上代碼，如果進(jìn)行插入操作，比如插入值為“test value”，則會(huì)提示“原本的值為：null?，F(xiàn)在改為：test value”。5.1.3 永久本地存儲(chǔ)對(duì)象localStorage在最新的JavaScript的API中增加了localStorage對(duì)象，可以使用戶瀏覽器存儲(chǔ)永久的Web端的數(shù)據(jù)，而且存儲(chǔ)的數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器。存儲(chǔ)數(shù)據(jù)的大小可以不用過多考慮，因?yàn)樵贖TML5標(biāo)準(zhǔn)中要求瀏覽器至少要支持4MB以上，所以，這完全是顛

49、覆了Cookie只有4KB的限制，為Web應(yīng)用在本地存儲(chǔ)復(fù)雜的用戶痕跡數(shù)據(jù)提供非常方便的技術(shù)支持。例5-1 將關(guān)鍵字和對(duì)應(yīng)的值保存到本地，要求： 關(guān)閉瀏覽器重新打開頁(yè)面依然能看到保存的數(shù)據(jù)。 打開多個(gè)相同頁(yè)面，當(dāng)對(duì)數(shù)據(jù)進(jìn)行操作時(shí)，其他頁(yè)面同步進(jìn)行刷新。代碼實(shí)現(xiàn)了本地localStorage存儲(chǔ)數(shù)據(jù)，可以輸入關(guān)鍵字和值進(jìn)行保存(將數(shù)據(jù)存儲(chǔ)到本地)，也可以輸入關(guān)鍵字進(jìn)行刪除對(duì)應(yīng)本地?cái)?shù)據(jù)操作，還能點(diǎn)擊清空按鈕清空所有本地?cái)?shù)據(jù)。這些數(shù)據(jù)保存在本地，就算關(guān)閉瀏覽器重新打開網(wǎng)頁(yè)也不會(huì)使數(shù)據(jù)丟失。另外，通過監(jiān)聽localStorage的變化，可以實(shí)現(xiàn)多頁(yè)面同步更新。為方便查看，我們打開兩個(gè)頁(yè)面，只操作左邊頁(yè)

50、面來(lái)進(jìn)行對(duì)比查看，實(shí)際效果如圖5-1圖5-3所示。圖5-1 頁(yè)面第一次打開時(shí)效果圖5-2 輸入一些數(shù)據(jù)后的效果圖5-3 關(guān)閉頁(yè)面重新打開后的效果其他按鈕功能類似，此處不再進(jìn)行截圖說(shuō)明。接下來(lái)，我們對(duì)JavaScript代碼進(jìn)行分析。第一步：創(chuàng)建localStorage數(shù)據(jù)添加函數(shù)。先通過getElementById()獲取到用戶輸入的鍵和值，再判斷用戶是否有輸入(因?yàn)榭罩狄材茏鳛殒I和值存入localStorage中)，如果存在內(nèi)容，則使用setItem()方法將數(shù)據(jù)存入localStorage中，并清空輸入框中已輸入的內(nèi)容，最后調(diào)用加載數(shù)據(jù)函數(shù)，更新表格顯示。其代碼如下：第二步：創(chuàng)建local

51、Storage數(shù)據(jù)刪除函數(shù)。先通過getElementById()獲取到用戶輸入的鍵，再使用removeItem()方法可以直接刪除對(duì)應(yīng)的數(shù)據(jù)，最后清空輸入框重新加載數(shù)據(jù)。其代碼如下：第三步：創(chuàng)建localStorage清空數(shù)據(jù)函數(shù)。此時(shí)只需要使用clear()方法直接清空數(shù)據(jù)再刷新表格即可。其代碼如下： 第四步：有了數(shù)據(jù)以后，接著就是如何將數(shù)據(jù)顯示到頁(yè)面上。首先獲取頁(yè)面用于顯示數(shù)據(jù)的div元素，再創(chuàng)建一個(gè)table元素，判斷l(xiāng)ocalStorage中的內(nèi)容，如果沒有內(nèi)容，則在頁(yè)面中顯示沒有數(shù)據(jù)；如果有數(shù)據(jù)，則添加表頭行，遍歷localStorage。然后通過key()方法取出鍵，再通過get

52、Item()方法用取出的鍵獲取鍵對(duì)應(yīng)的值，添加到表格的行中；最后設(shè)置表格CSS樣式，清空div中原本的數(shù)據(jù)，將表格顯示在div中。此處，直接使用innerHTML屬性將行附加到表格中。其代碼如下：第五步：添加window.onload事件，綁定顯示內(nèi)容方法，在頁(yè)面打開時(shí)加載localStorage中的數(shù)據(jù)；添加事件監(jiān)聽，localStorage有變化時(shí)重新加載數(shù)據(jù)。其代碼如下：5.1.4 會(huì)話存儲(chǔ)對(duì)象sessionStoragesessionStorage的使用方法與localStorage相似，此處不再贅述，大家可以參考5.1.3內(nèi)容自行測(cè)試。sessionStorage與localStor

53、age的區(qū)別在于，sessionStorage用于臨時(shí)保存同一窗口(或標(biāo)簽頁(yè))的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后保存的數(shù)據(jù)將會(huì)被刪除，類似session。但其與session又有本質(zhì)的區(qū)別：session對(duì)象存在于服務(wù)器，占用服務(wù)器資源，有過期時(shí)間限制，安全級(jí)別高；sessionStorage對(duì)象保存在客戶端，只要用戶不關(guān)閉頁(yè)面就不會(huì)過期，但是可以被某些工具查看或修改其中的內(nèi)容，安全級(jí)別低。5.2 Web SQL DatabaseWeb SQL Database，是隨著HTML5規(guī)范加入的在瀏覽器端運(yùn)行的輕量級(jí)數(shù)據(jù)庫(kù)。在HTML4中，數(shù)據(jù)庫(kù)只能放在服務(wù)器端，只能通過服務(wù)器來(lái)訪問數(shù)據(jù)庫(kù)；但是在HTM

54、L5中，內(nèi)置了一個(gè)可以通過SQL語(yǔ)言來(lái)訪問的數(shù)據(jù)庫(kù)，可以就像訪問本地文件那樣輕松地對(duì)內(nèi)置的數(shù)據(jù)庫(kù)進(jìn)行直接訪問。Web SQL Database API并不是 HTML5 規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用SQL操作客戶端數(shù)據(jù)庫(kù)的API，其中有3個(gè)核心的方法，通過這3個(gè)方法可以實(shí)現(xiàn)打開數(shù)據(jù)庫(kù)、執(zhí)行SQL語(yǔ)句和控制事務(wù)的功能，如表5-2所示。openDatabase()方法用于打開或創(chuàng)建數(shù)據(jù)庫(kù)。如果數(shù)據(jù)庫(kù)已存在則打開數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在則創(chuàng)建一個(gè)新的數(shù)據(jù)庫(kù)，語(yǔ)法如下：參數(shù)說(shuō)明如下： database_name：數(shù)據(jù)庫(kù)名稱。 database_version：版本號(hào)。 data

55、base_displayname：描述文本。 database_size：數(shù)據(jù)庫(kù)大小。如創(chuàng)建一個(gè)用戶數(shù)據(jù)庫(kù)，大小為5 MB，則語(yǔ)法如下： transaction()方法接收一個(gè)方法作為參數(shù)，在作為參數(shù)的方法中使用executeSql()方法執(zhí)行SQL語(yǔ)句。在之前創(chuàng)建的數(shù)據(jù)庫(kù)中創(chuàng)建一張user表，并在表中插入兩條數(shù)據(jù)，代碼如下：從數(shù)據(jù)庫(kù)中將已存在的數(shù)據(jù)取出并顯示在頁(yè)面上，代碼如下：上面的實(shí)例代碼組合起來(lái)即可完成一個(gè)頁(yè)面實(shí)例。其代碼如下：打開頁(yè)面，可以看到頁(yè)面中顯示了從數(shù)據(jù)庫(kù)中查詢出來(lái)的兩條數(shù)據(jù)；同時(shí)打開Chrome開發(fā)者工具，在Application Web SQL userDB tUser中可

56、以看到我們使用代碼插入的數(shù)據(jù)。頁(yè)面顯示效果如圖5-4所示。圖5-4 頁(yè)面顯示效果在W3C中，Web SQL Database被列為了停滯狀態(tài)，由于標(biāo)準(zhǔn)認(rèn)定直接執(zhí)行SQL語(yǔ)句是不可取的，現(xiàn)在的W3C力推的本地?cái)?shù)據(jù)庫(kù)是IndexedDB，我們也建議使用IndexedDB數(shù)據(jù)庫(kù)，而不要使用Web SQL Database數(shù)據(jù)庫(kù)。因此，本節(jié)我們只對(duì)Web SQL Database進(jìn)行基本的介紹，便于我們與其他的本地存儲(chǔ)手段做比較。5.3 IndexedDB實(shí)際上Web SQL Database已經(jīng)被廢棄，而HTML5支持的本地?cái)?shù)據(jù)庫(kù)變成了IndexedDB，這是瀏覽器提供的一種最新標(biāo)準(zhǔn)的本地?cái)?shù)據(jù)庫(kù)，它

57、可以被網(wǎng)頁(yè)腳本創(chuàng)建和操作。IndexedDB允許儲(chǔ)存大量數(shù)據(jù)，提供查找接口，還能建立索引。就數(shù)據(jù)庫(kù)類型而言，IndexedDB 不屬于關(guān)系型數(shù)據(jù)庫(kù)，即不支持SQL查詢語(yǔ)句，更接近NoSQL數(shù)據(jù)庫(kù)。5.3.1 IndexedDB的特點(diǎn)IndexedDB 具有以下特點(diǎn)： 鍵值對(duì)儲(chǔ)存。IndexedDB內(nèi)部采用對(duì)象倉(cāng)庫(kù)(object store)存放數(shù)據(jù)。所有類型的數(shù)據(jù)都可以直接存入，包括JavaScript對(duì)象。對(duì)象倉(cāng)庫(kù)中，數(shù)據(jù)以“鍵值對(duì)”的形式保存，每一個(gè)數(shù)據(jù)記錄都有對(duì)應(yīng)的主鍵，主鍵是獨(dú)一無(wú)二的，不能有重復(fù)，否則會(huì)拋出一個(gè)錯(cuò)誤。 異步讀寫。IndexedDB操作時(shí)不會(huì)鎖死瀏覽器，用戶依然可以進(jìn)行

58、其他操作，這與localStorage形成對(duì)比，后者的操作是同步的。異步設(shè)計(jì)是為了防止大量數(shù)據(jù)的讀寫而拖慢網(wǎng)頁(yè)的表現(xiàn)。 支持事務(wù)。IndexedDB支持事務(wù)(transaction)，這意味著一系列操作步驟之中，只要有一步失敗，整個(gè)事務(wù)就都取消，數(shù)據(jù)庫(kù)回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分?jǐn)?shù)據(jù)的情況。 同源限制。IndexedDB受到同源限制，每一個(gè)數(shù)據(jù)庫(kù)對(duì)應(yīng)創(chuàng)建它的域名。網(wǎng)頁(yè)只能訪問自身域名下的數(shù)據(jù)庫(kù)，而不能訪問跨域的數(shù)據(jù)庫(kù)。 儲(chǔ)存空間大。IndexedDB的儲(chǔ)存空間比LOCAlStorage大得多，一般來(lái)說(shuō)不少于250MB，甚至沒有上限。 支持二進(jìn)制儲(chǔ)存。IndexedDB不僅可以儲(chǔ)

59、存字符串，還可以儲(chǔ)存二進(jìn)制數(shù)據(jù)(ArrayBuffer對(duì)象和Blob對(duì)象)。5.3.2 兼容檢測(cè)Internet Explorer(IE) 10+、Firefox、Opera、Chrome以及Safari都支持IndexedDB數(shù)據(jù)庫(kù)，IE9以及更早的版本不支持IndexedDB數(shù)據(jù)庫(kù)，如果不考慮IE的情況下可以放心使用。同時(shí)，我們可以使用下面的代碼檢測(cè)瀏覽器是否支持IndexedDB數(shù)據(jù)庫(kù)。5.3.3 IndexedDB APIIndexedDB是一個(gè)比較復(fù)雜的 API，涉及不少概念，它把不同的實(shí)體抽象成一個(gè)個(gè)對(duì)象接口。學(xué)習(xí)這個(gè)API，就是學(xué)習(xí)它的各種對(duì)象接口。IndexedDB API對(duì)象

60、如表5-3所示。5.3.4 IndexedDB數(shù)據(jù)庫(kù)基本操作流程1. 打開數(shù)據(jù)庫(kù)使用IndexedDB的第一步是打開數(shù)據(jù)庫(kù)，使用indexedDB.open(databaseName, version)方法。這個(gè)方法接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是數(shù)據(jù)庫(kù)名，如果指定的數(shù)據(jù)庫(kù)不存在，則會(huì)新建數(shù)據(jù)庫(kù)。第二個(gè)參數(shù)是整數(shù)，表示數(shù)據(jù)庫(kù)的版本，如果省略，打開已有數(shù)據(jù)庫(kù)時(shí)，默認(rèn)為當(dāng)前版本；新建數(shù)據(jù)庫(kù)時(shí)，默認(rèn)為1。此方法返回一個(gè)IDBRequest對(duì)象。這個(gè)對(duì)象通過3種事件error、success和upgradeneeded，處理打開數(shù)據(jù)庫(kù)的操作結(jié)果。 error事件：表示打開數(shù)據(jù)庫(kù)失敗。 success事件：表