1、第1章 HTML5的重要使命1.1 Web時代的變遷1.2 HTML5的目標1.3 HTML5的新功能1.1 Web時代的變遷Web(World Wide Web)即全球廣域網，也稱為萬維網，它和我們經常說的“互聯網”是兩個聯系極其緊密但卻不盡相同的概念。互聯網是通過一組通用協議互相連接在一起的計算機網絡，而Web是運行在互聯網上的一個超大規模的分布式系統。Web的設計初衷是一個靜態信息資源發布媒介，通過超文本標記語言(HTML)描述信息資源，統一資源標識符(URI)定位信息資源，超文本轉移協議(HTTP)請求信息資源。HTML、URL和HTTP三個規范構成了Web的核心體系結構，是支撐Web

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

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

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

5、代，用戶在Web上將擁有自己的身份，使用這個身份信息，可以登錄各種不同的網站；用戶也將不再是在某個網站上傳自己的作品，而是將這些作品上傳到Web中，再給某個網站授權，以達到在該網站發布作品的目的。另外，用戶參與互聯網的創作其實也算是一種勞動，這種勞動在Web2.0時代是無法直接帶給用戶經濟利益的，只有當用戶的創作獲得了一定的認可度后才能通過其他方式獲得勞動報酬。這種現象在Web3.0時代將會有所改變，人們參與到互聯網的勞動中，特別是在內容上的創造，將會獲得更多的榮譽、認同，包括財富和地位。其實，這些在現在的Web中已經有所體現，只不過很少有人關注。現在的很多網站，用戶可以不用注冊而通過其他網站

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

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

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

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

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

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

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

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

14、功能的探索旅程吧。第2章 HTML5的多媒體2.1 容器格式和編/解碼格式2.2 瀏覽器支持特性檢測2.3 視頻、音頻的腳本控制2.4 HTML5中的音頻2.5 HTML5中的視頻2.1 容器格式和編/解碼格式2.1.1 視頻、音頻的容器我們常見的視頻文件的擴展名有mkv、avi、mp4等，音頻文件的擴展名有mp3、wav等，其實這些僅僅只是容器的格式，它們類似于壓縮了一組文件的壓縮包文件。對于一個視頻文件(視頻容器)，一般包含了視頻軌道、音頻軌道及其他一些元數據，如圖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 視頻、音頻的編/解碼器視頻、音頻的編/解碼器其實就是一組算法，用來對視頻或音頻進行編碼和解碼。對視頻和音頻進行編碼，是為了它們能夠快速地傳播。需要注意的是，不同容器格式對應的編/解碼器是不同的。常見的音頻編/解碼器如下： ACC MPEG-3 Ogg Vorbis常見的視頻編/解碼器如下： H.264 VP8 Ogg Theora有些編/解碼器是免費的，有些則受專利保護，需要付費，雖然HTML5很想統一指定編/解碼器，但實

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31、標左鍵在目的地元素內松開時，關閉目的地元素的默認行為，再從dataTransfer對象中將保存在其中的id取出來，通過此id找到源元素，再將源元素設置為目的地元素的子元素。編寫以下JavaScript代碼，綁定到目的地元素的ondrop事件。3.3 拖放相關的屬性和事件1. 拖放相關的屬性要實現元素的拖放，需要先設置元素的draggable=true屬性，即將元素設置為可拖放。在上面的例子中并沒有設置這個屬性，因為鏈接和圖片默認是可拖放的，不需要設置draggable 屬性。屬性設置語法如下： true: 可以拖動。 false: 禁止拖動。 auto: 跟隨瀏覽器定義是否可以拖動。2. 拖放

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

33、列入標準的方法有4個，如表3-3所示。3.5 拖放圖片到瀏覽器HTML5可以實現從本地拖放文件到瀏覽器中，利用FileReader對象讀取文件，并進行后續操作。此功能一般應用在圖片拖放和文件上傳操作中，將本地圖片拖放并顯示到頁面指定位置或為文件選擇控件提供直接拖放功能。例3-2 拖動本地圖片放入頁面指定的位置。拖放圖片到瀏覽器的代碼如下：拖入圖片前頁面顯示效果如圖3-3所示，拖入圖片后頁面顯示效果如圖3-4所示。圖3-3 拖入圖片前頁面顯示圖3-4 拖入圖片后頁面顯示需要注意的是：拖動本地文件到瀏覽器，當瀏覽器支持拖放文件格式時，瀏覽器默認會打開本地文件；當瀏覽器不支持拖放文件格式時，瀏覽器會

34、默認觸發下載器下載該文件。同時，不同瀏覽器打開本地文件的方式有所不同。 Chrome：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會在當前窗口打開文件的預覽。 FireFox：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會在新窗口打開文件的預覽。 IE：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會在當前窗口打開文件的預覽。要阻止瀏覽器的默認行為，直接為目的地元素添加事件的方法是不行的，只能通過JavaScript在頁面加載完成后為目的地元素追加相應方法。關鍵代碼如下：在ondrop事件中，先阻止元素的默認行為；再通過dataTransfer對象獲取文件列表，因為我們只拖動一個圖片文件，

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

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

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

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

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

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

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

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

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

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

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

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

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

48、 Storage API監聽事件只會發生在同源窗口中(同一個頁面的不同窗口)，當前窗口不會觸發監聽事件。如果對應的操作沒有值，則該值為null。如以上代碼，如果進行插入操作，比如插入值為“test value”，則會提示“原本的值為：null。現在改為：test value”。5.1.3 永久本地存儲對象localStorage在最新的JavaScript的API中增加了localStorage對象，可以使用戶瀏覽器存儲永久的Web端的數據，而且存儲的數據不會隨著Http請求發送到后臺服務器。存儲數據的大小可以不用過多考慮，因為在HTML5標準中要求瀏覽器至少要支持4MB以上，所以，這完全是顛

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

50、面來進行對比查看，實際效果如圖5-1圖5-3所示。圖5-1 頁面第一次打開時效果圖5-2 輸入一些數據后的效果圖5-3 關閉頁面重新打開后的效果其他按鈕功能類似，此處不再進行截圖說明。接下來，我們對JavaScript代碼進行分析。第一步：創建localStorage數據添加函數。先通過getElementById()獲取到用戶輸入的鍵和值，再判斷用戶是否有輸入(因為空值也能作為鍵和值存入localStorage中)，如果存在內容，則使用setItem()方法將數據存入localStorage中，并清空輸入框中已輸入的內容，最后調用加載數據函數，更新表格顯示。其代碼如下：第二步：創建local

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

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

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

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

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

56、以看到我們使用代碼插入的數據。頁面顯示效果如圖5-4所示。圖5-4 頁面顯示效果在W3C中，Web SQL Database被列為了停滯狀態，由于標準認定直接執行SQL語句是不可取的，現在的W3C力推的本地數據庫是IndexedDB，我們也建議使用IndexedDB數據庫，而不要使用Web SQL Database數據庫。因此，本節我們只對Web SQL Database進行基本的介紹，便于我們與其他的本地存儲手段做比較。5.3 IndexedDB實際上Web SQL Database已經被廢棄，而HTML5支持的本地數據庫變成了IndexedDB，這是瀏覽器提供的一種最新標準的本地數據庫，它

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

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

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

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