HTML5秘籍

前言

乍一看，你可能覺得HTML5是網(wǎng)頁編寫語言HTML的第5個版本。但實際上，這背后的故事可亂得多。HTML5是一個叛逆。它是由一群自由思想者組成的團隊設(shè)計出來的，這個團隊的成員并不負責(zé)制定官方HTML標(biāo)準(zhǔn)。它允許使用10年前就被禁止的網(wǎng)頁編寫方式。它費盡心機、苦口婆心地告訴瀏覽器開發(fā)商怎么處理而不是徹底拒絕標(biāo)記中的錯誤。它最終實現(xiàn)了不依賴Flash等瀏覽器插件播放視頻。而且它引入了一大批JavaScript驅(qū)動的功能，讓網(wǎng)頁可以像桌面軟件那樣豐富多彩、富有交互能力。理解HTML5可沒有那么簡單。最主要的困難在于人們用HTML5這個詞指代十幾甚至更多種獨立的標(biāo)準(zhǔn)。（后面我們會介紹到，這是HTML5發(fā)展演進的結(jié)果。一開始時它只有一個標(biāo)準(zhǔn)，但后來就拆分成了很多容易管理的分支。）事實上，HTML5現(xiàn)在代表的是“HTML5及所有相關(guān)標(biāo)準(zhǔn)”，甚至還可以更寬泛，代表“下一代網(wǎng)頁編寫技術(shù)”。這就是本書要帶領(lǐng)大家探索的HTML5：既包括HTML5核心語言，也包括與HTML5糾纏在一塊但在其標(biāo)準(zhǔn)中永遠找不到的那些新功能。于是，第二個困難又?jǐn)[在了你的面前：瀏覽器支持。不同的瀏覽器支持HTML5的不同部分，而且還有一些讓人難受的新功能，任何平臺的瀏覽器都不支持。拋開這些困難，有一個事實接受起來毫無挑戰(zhàn)性：HTML5代表未來。蘋果、谷歌等大軟件公司都在鼎力支持它；W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）已經(jīng)放棄了XHTML，從而使HTML5成為正式標(biāo)準(zhǔn)并得到認(rèn)可；而且所有瀏覽器開發(fā)商現(xiàn)在都對它的大部分功能給予了支持。如果你在看這本書，那就有可能在它還讓人覺得好玩和刺激的時候加入HTML5陣營，并創(chuàng)造出如圖0-1所示的那種酷炫的網(wǎng)頁。閱讀本書的條件本書介紹的HTML5是HTML標(biāo)準(zhǔn)最新最好的版本。雖然不一定非得是標(biāo)記大師才能看懂這本書，但閱讀本書的的確確還是需要一些Web設(shè)計經(jīng)驗的。以下就是幾個必要條件。寫過網(wǎng)頁。本書假設(shè)你以前至少寫過一些網(wǎng)頁（或者至少知道怎么使用HTML元素把內(nèi)容分成標(biāo)題、段落和列表，等等）。如果你才剛剛接觸Web設(shè)計，那最好是先找一本合適的入門書看一看，比如我的Creating a Website： The Missing Manual。（不過別擔(dān)心，你不會被限制在過去的技術(shù)中，Creating a Website這本書里的示例都是有效的HTML5文檔。）圖0-1：在Web世界黑暗的過去（也就是去年），要編寫網(wǎng)頁游戲，必須依賴Flash這樣的瀏覽器插件。但有了HTML5的新功能——包括canvas（圖中顯示的就是）之后，你可以使用可靠而又免插件的JavaScript。這個圖展示的是用HTML5技術(shù)開發(fā)的迷宮游戲（第7章將詳細討論）懂樣式表。沒有CSS（Cascading Style Sheet，層疊樣式表）就沒如今的網(wǎng)站。CSS為頁面提供布局和格式。要想順利閱讀本書，你應(yīng)該知道樣式表的基本知識，包括怎么創(chuàng)建樣式表，里面都有什么，以及怎么把它應(yīng)用到網(wǎng)頁上。如果你不太清楚CSS是干什么的，可以先看一看附錄A（“CSS簡明教程”）。如果你需要更多幫助，或者想提高自己的CSS技能，以便真正做出漂亮的布局和樣式，建議你看看David Sawyer McFarland的CSS： The Missing Manual（O’Reilly）。懂JavaScript。當(dāng)然，編寫HTML5頁面用不著JavaScript?？墒牵绻阆胧褂肏TML5不計其數(shù)的那些超酷功能——比如在畫布上畫圖或者與Web服務(wù)器通信，那就需要JavaScript了。如果你有一些淺顯的編程經(jīng)驗，但對JavaScript還一知半解，附錄B（“JavaScript簡明教程”）可以幫你掌握一些新情況。不過，要是一聽到寫代碼這幾個字，馬上就像被窩里爬進一條蟒蛇那樣魂飛魄散，那要么你根本不必看本書中的很多章節(jié)了，要么你得通過David Sawyer McFarland的JavaScript & jQuery： The Missing Manual （O’Reilly）補補課。如果這些必要條件讓你頭暈?zāi)垦?mdash;—好吧，這就是活在Web設(shè)計最前沿必須付出的代價。編寫HTML5編寫HTML5頁面可以使用編寫HTML頁面時使用的軟件?？梢允莻€再簡單不過的文本編輯器，像Windows中的記事本，或者Mac中的TextEdit。目前也有很多設(shè)計工具（比如Adobe Dreamweaver和Microsoft Expression Web）提供了快速創(chuàng)建新HTML5文檔的模板。不過，HTML5頁面的基本結(jié)構(gòu)確實非常簡單，任何網(wǎng)頁編輯軟件（即使不是為HTML5設(shè)計的）都沒有問題。注意 當(dāng)然啦，不管你上網(wǎng)和編寫網(wǎng)頁時用的計算機是Windows PC，還是最新的MacBook，同樣也無所謂，因為HTML5與操作系統(tǒng)無關(guān)。查看HTML5每個人都想問一個問題：“哪些瀏覽器支持HTML5·”可悲的是，這個問題沒有明確的答案。本書后面會介紹，HTML5實際上是一組獨立標(biāo)準(zhǔn)的集合。有些標(biāo)準(zhǔn)已經(jīng)得到了支持，而另一些標(biāo)準(zhǔn)幾年內(nèi)（甚至永遠）不會得到支持。其他所有標(biāo)準(zhǔn)則介于這兩種情況之間；換句話說，HTML5在某些瀏覽器的某些版本中能夠運行。下面列出的瀏覽器無需什么變通手段，就可以支持HTML5的絕大部分。Internet Explorer 9及更高版本Firefox 3.5及更高版本谷歌Chrome 8及更高版本Safari 4及更高版本Opera 10.5及更高版本更高版本的支持程度更高。也就是說，F(xiàn)irefox 5能比Firefox 3.5更好地支持HTML5。在鼓勵大家使用新的HTML5功能之前，本書會清楚地說明當(dāng)前瀏覽器對這些功能的支持情況。當(dāng)然，瀏覽器版本的變化相對比較快，因此在嘗試某些可能有問題的功能之前，你自己應(yīng)該先搜索一下最新的支持情況。推薦一個網(wǎng)站：http：//caniuse.com，你可以在上面搜索某個具體的功能，然后它會告訴你到底哪個瀏覽器的哪個版本支持該功能。（1.6節(jié)還將更詳細地介紹這個工具的用法。）注意 本書會討論那些已知在某些瀏覽器中不能使用的功能。別慌，如果你只想對HTML5有所了解，而專注于那些今天可以使用的功能，這樣不是挺好嘛。你可以通過這些功能窺見Web的未來。什么時候可以使用HTML5簡短的答案是“現(xiàn)在”。就連遭人唾棄的Internet Explorer 6，這個問世長達10年之久、補丁撂補丁的家伙都可以顯示HTML5文檔。這是因為創(chuàng)建HTML5標(biāo)準(zhǔn)時，就想讓它能涵蓋并擴展原來的HTML。更詳盡的答案是“視情況而定”。前面剛剛提到過，HTML5是一組不同標(biāo)準(zhǔn)的集合，瀏覽器對這些標(biāo)準(zhǔn)有著不同程度的支持。因此，盡管現(xiàn)在任何Web開發(fā)人員都可以轉(zhuǎn)而編寫HTML5文檔（Google、YouTube和Wikipedia等一些大型網(wǎng)站已經(jīng)這樣做了），但要放心地使用大部分HTML5 的新奇功能——至少不必針對那些不夠開化的瀏覽器采取變通手段，恐怕還要再等幾年。注意 某項功能到底屬于哪個規(guī)范并不重要，重要的是現(xiàn)在有沒有瀏覽器支持它（以及尚未支持它的瀏覽器將來有沒有可能支持它）。本書每介紹一項新功能，都會告訴讀者它來自哪個規(guī)范，以及都有哪些瀏覽器支持它。作為有標(biāo)準(zhǔn)意識的開發(fā)人員，恐怕你也對這些標(biāo)準(zhǔn)什么時候正式頒布感興趣。但這個問題有點復(fù)雜，因為設(shè)計HTML5的人遵循的理念有點不合常規(guī)。他們經(jīng)常說，正式的標(biāo)準(zhǔn)中怎么說并不重要，關(guān)鍵是有沒有瀏覽器支持。（換句話說，只要你覺得可行，現(xiàn)在就可以采用任何你想使用的功能。）但不少開發(fā)人員、大公司、政府機關(guān)以及其他組織，通常會根據(jù)一種語言的標(biāo)準(zhǔn)是否正式頒布來判斷是否可以采用它。從技術(shù)上說，HTML5語言現(xiàn)在還是W3C手中的工作草案（working draft）。對標(biāo)準(zhǔn)的這種稱謂表明它已經(jīng)相當(dāng)成熟了，但在成為候選推薦標(biāo)準(zhǔn)（candidate recommendation）的時候（可能是2012年的某一天），仍然可能會有改動。而到真正的推薦標(biāo)準(zhǔn)（recommendation）階段，因為必須有足夠的測試，可能就是很多年之后的事了。但那確實不怎么重要了，因為到了該階段，即便有改動也會很少，而想要使用HTML5的人也早已經(jīng)有了自己的選擇。本書內(nèi)容本書把完整的HTML5教程分為12章，具體內(nèi)容如下。第一部分：認(rèn)識新語言第1章（“HTML5簡介”）介紹HTML發(fā)展到HTML5的歷程。我們會看一看HTML5文檔的樣子，看看它跟以前的HTML有何不同，另外也看一下瀏覽器的支持情況。第2章（“構(gòu)造網(wǎng)頁的新方式”）討論HTML5的語義元素（semantic element），也就是一組可以為標(biāo)記賦予含義的元素。恰當(dāng)?shù)厥褂眠@些元素，可以讓瀏覽器、屏幕閱讀器、Web設(shè)計工具以及搜索引擎基于它們提供的額外信息更智能地工作。第3章（“有意義的標(biāo)記”）進一步討論語義的概念，涉及微數(shù)據(jù)（microdata）等標(biāo)準(zhǔn)。盡管這一章的內(nèi)容有點偏理論，但透徹理解這個概念可以給Web開發(fā)人員帶來巨大的回報：在Google等搜索引擎的結(jié)果列表中顯示更全面、更詳盡的內(nèi)容。第二部分：制作新網(wǎng)頁第4章（“Web表單”）探索HTML5 Web表單元素的變化，包括文本框、選擇列表、復(fù)選框和其他用來從訪客那里收集信息的微件（widget）。HTML5為捕獲數(shù)據(jù)輸入錯誤提供了一些輔助和基本工具。第5章（“音頻與視頻”）講一講HTML最激動人心的新功能，即支持音頻和視頻播放。這一章將介紹如何避免遭遇“Web視頻編解碼器大戰(zhàn)”，創(chuàng)建出在所有瀏覽器中都能工作的播放頁面，同時還要學(xué)習(xí)創(chuàng)建自己定制的播放器。第6章（“基本Canvas繪圖”）介紹名為畫布（canvas）的二維繪圖表面。你將會學(xué)習(xí)怎樣在畫布上繪制圖形、圖像、文本，甚至還將構(gòu)建一個簡單的繪圖程序（使用一系列強大的JavaScript代碼）。第7章（“高級Canvas技術(shù)”）進一步提升你的“繪畫”技術(shù)。這一章將會學(xué)習(xí)投影、花哨的模式，以及可點擊的交互圖形和動畫等更加令人神往的Canvas技術(shù)。第8章（“使用CSS3”）將介紹最新版本的CSS3標(biāo)準(zhǔn)，它與HTML5可謂絕配。我們將學(xué)習(xí)如何應(yīng)用新奇的字體讓文本變得活潑可愛，如何讓頁面適應(yīng)不同的移動設(shè)備，以及利用變換添加吸引人的效果。第三部分：構(gòu)建桌面式Web應(yīng)用第9章（“數(shù)據(jù)存儲”）討論在訪客計算機中保存小段數(shù)據(jù)的新Web存儲功能。（非常像cookie的超級簡捷版。）這一章還將介紹如何在網(wǎng)頁而不是在Web服務(wù)器中，使用JavaScript代碼處理用戶選擇的文件。第10章（“離線應(yīng)用”）探索新的HTML5緩存功能，這個功能可以實現(xiàn)在斷網(wǎng)的情況下仍然能夠通過瀏覽器查看網(wǎng)頁。第11章（“與Web服務(wù)器通信”）將把目光投向與Web服務(wù)器通信這個主題上。為此，將介紹久負盛名的XMLHttpRequest對象，JavaScript通過它可以聯(lián)系Web服務(wù)器并請求信息。然后再討論兩個比較新的功能：服務(wù)器端事件和（影響更加深遠但還需要完善的）Web套接字。第12章（“更酷的JavaScript技術(shù)”）介紹了解決現(xiàn)代Web應(yīng)用開發(fā)難題的三個新功能。第一是可以確定訪客位置的地理定位；第二是在后臺執(zhí)行復(fù)雜任務(wù)的Web Worker；第三是能夠同步網(wǎng)頁URL到當(dāng)前狀態(tài)的新的瀏覽器歷史功能。最后有兩個附錄，可以為你掌握HTML5補習(xí)一些基礎(chǔ)知識。附錄A是對CSS的一個簡要介紹，附錄B則會簡單地介紹JavaScript。在線資源作為Missing Manual叢書的讀者，你所得到的不僅僅是一本書。在網(wǎng)上，你還可以找到示例文件以及技巧、文章，甚至是一兩段視頻。你可以跟Missing Manual團隊交流，告訴我們你喜歡（或討厭）本書的哪一方面。請訪問網(wǎng)站，或直接閱讀后面的某一小節(jié)。Missing CD本書沒有附帶光盤，但這對學(xué)習(xí)本書一點影響都沒有。讀者可以訪問本書的Missing CD頁面，下載本書討論和展示的網(wǎng)頁示例，這樣你就不必自己動手敲那些長長的網(wǎng)頁地址了。這個頁面中列出了全書每一章提到的網(wǎng)站的鏈接。提示 假如你想找某個特定的例子，我教給你一個好辦法——看插圖。在插圖中，文件名一般都會出現(xiàn)在瀏覽器地址欄的末尾。比如，看到文件路徑C：\HTML5\Chapter01\SuperSimple HTML5.html（圖1-1），就知道對應(yīng)的示例文件名叫SuperSimpleHTML5.html。試驗站點還有另一種使用本書示例的方法，就是訪問在線示例網(wǎng)站。在這個網(wǎng)站上可以看到本書的每一個示例，并直接在瀏覽器中運行它們。因為HTML5的某些功能需要一個真正的Web服務(wù)器，所以直接使用這個網(wǎng)站其實可以省點心。（如果你直接從計算機硬盤上運行網(wǎng)頁，這些功能可能會導(dǎo)致一些怪異的現(xiàn)象，或者完全不能用。）而使用這個網(wǎng)站，就可以先看到某個例子的運行結(jié)果，然后再下載該頁面并動手嘗試。注意 別擔(dān)心自己不知道哪些HTML5功能需要Web服務(wù)器，到時候本書會給出提示的。注冊如果你在oreilly.com注冊了這本書，可能會享受到一些優(yōu)惠，比如購買Creating a Website： The Missing Manual的新版時可以打個折。注冊其實只需點幾次鼠標(biāo)。在瀏覽器地址欄里輸入http：//tinyurl.com/registerbook，直接就可以跳到注冊（Registration）頁面。反饋有問題要問？需要更多信息？想給我們寫個書評？在反饋（Feedback）頁面上，你可以向?qū)＜艺埥套约嚎磿鴷r碰到的問題，也可以分享自己對Missing Manual叢書的看法，甚至找到一些志同道合的朋友，聽聽他們談?wù)撛谧鼍W(wǎng)站過程中的一些體會?？闭`為了盡可能保證本書切合實際、準(zhǔn)確無誤，每次重印我們都會糾正一些確認(rèn)的勘誤。這些勘誤信息也會在本書網(wǎng)站上發(fā)布出來，以便讀者更正自己手里這本書的錯誤。要提交或查看勘誤，請訪問http：//tinyurl.com/3q56k7v。簡報訂閱我們免費的電子郵件簡報可以隨時了解Missing Manual叢書的新動向。這樣可以方便你與作者、編輯聯(lián)系，并能看到免費視頻和圖書樣章等。Safari· Books OnlineSafari· Books Online是一個按需閱讀的數(shù)字圖書館，有7500種技術(shù)圖書和視頻可供搜索。通過訂閱，可以在此閱讀所有圖書，觀看任何視頻。甚至可以在新書印刷之前閱讀到它們?？梢詮?fù)制粘貼示例代碼，收藏喜歡的內(nèi)容，下載整章內(nèi)容，為關(guān)鍵部分創(chuàng)建書簽，添加評注，打印頁面，以及享受其他眾多省時省力的閱讀體驗。O’Reilly Media已經(jīng)將本書上傳到Safari Books Online。訪問網(wǎng)站并免費注冊，可以看到本書及O’Reilly和其他出版社圖書的完整電子版。

內(nèi)容概要

　　《HTML5秘籍》共包括四個部分，共12章。第一部分介紹了HTML5的發(fā)展歷程，利用HTML5重新構(gòu)造網(wǎng)頁，以及HTML5的語義元素。第二部分介紹了HTML5對傳統(tǒng)Web表單的翻新、HTML5中的音頻與視頻、Canvas繪圖技術(shù)、CSS3等內(nèi)容。第三部分介紹了數(shù)據(jù)存儲、離線應(yīng)用、與Web服務(wù)器通信，以及HTML5與JavaScript技術(shù)的強大結(jié)合等內(nèi)容。第四部分為附錄，簡單介紹了CSS和JavaScript。
　　《HTML5秘籍》既適合新手學(xué)習(xí)，也能助有經(jīng)驗的Web開發(fā)人員解決日常工作中遇到的難題。

作者簡介

Matthew MacDonald
開發(fā)人員、技術(shù)作家、Visual Basic和.NET講師。從Visual Basic和ASP一發(fā)布就一直在使用它們，并編寫了十幾本這方面的圖書，包括《ASP.NET 4高級程序設(shè)計》、The Book of VB .NET（No Starch出版社）和Visual Basic 2005: A Developer's Notebook（O’Reilly出版社）。他還編寫了Missing Manual系列圖書之Excel 2007和Access 2007（O’Reilly出版社）。他的個人網(wǎng)站http://www.prosetech.com/。
“The Missing Manual系列絕對是入門指南最為明智的選擇……”
——凱文?凱利， 《連線》聯(lián)合創(chuàng)始人

書籍目錄

目　錄
 
第一部分　認(rèn)識新語言
第1章　HTML5簡介　2
1.1　HTML5的故事　2
1.1.1　XHTML 1.0：更嚴(yán)格的標(biāo)準(zhǔn)　2
1.1.2　XHTML 2：意想不到的失敗　3
1.1.3　HTML5：起死回生　3
1.1.4　HTML：活著的語言　5
1.2　HTML5的三個主要原理　6
1.2.1　不破壞Web　6
1.2.2　修補牛蹄子路　7
1.2.3　實用至上　8
1.3　HTML5標(biāo)記初體驗　8
1.3.1　HTML5文檔類型　10
1.3.2　字符編碼　11
1.3.3　頁面語言　11
1.3.4　添加樣式表　12
1.3.5　添加JavaScript　12
1.3.6　最終結(jié)果　13
1.4　HTML5語法　13
1.4.1　放松的規(guī)則　14
1.4.2　HTML5驗證　15
1.4.3　XHTML的回歸　17
1.5　HTML5元素家族　18
1.5.1　新增的元素　18
1.5.2　刪除的元素　18
1.5.3　改變的元素　19
1.5.4　調(diào)整的元素　20
1.5.5　標(biāo)準(zhǔn)化的元素　21
1.6　今天開始用HTML5　22
1.6.1　了解瀏覽器支持情況　23
1.6.2　瀏覽器裝機情況統(tǒng)計　24
1.6.3　通過Modernizr檢測功能　26
1.6.4　使用“膩子腳本”填補功能缺陷　28
第2章　構(gòu)造網(wǎng)頁的新方式　30
2.1　語義元素　30
2.2　改造傳統(tǒng)的HTML頁面　32
2.2.1　構(gòu)造頁面的老辦法　32
2.2.2　使用HTML5構(gòu)造頁面　36
2.2.3　用標(biāo)注副標(biāo)題　39
2.2.4　用添加插圖　40
2.2.5　用添加附注　42
2.3　瀏覽器對語義元素的支持情況　43
2.4　使用語義元素設(shè)計站點　45
2.4.1　理解　46
2.4.2　用標(biāo)注導(dǎo)航鏈接　48
2.4.3　理解　52
2.4.4　理解區(qū)塊　54
2.5　HTML5綱要　55
2.5.1　如何查看綱要　55
2.5.2　基本綱要　56
2.5.3　分塊元素　58
2.5.4　解決一個綱要問題　60
第3章　有意義的標(biāo)記　64
3.1　回顧語義元素　64
3.1.1　使用標(biāo)注日期和時間　65
3.1.2　使用標(biāo)注JavaScript返回值　66
3.1.3　使用標(biāo)注突顯文本　68
3.2　其他語義標(biāo)準(zhǔn)　69
3.2.1　ARIA　70
3.2.2　RDFa　71
3.2.3　Microformats　71
3.2.4　Microdata　76
3.3　Google Rich Snippets　79
3.3.1　增強搜索結(jié)果　79
3.3.2　菜譜搜索引擎　82
第二部分　制作新網(wǎng)頁
第4章　Web表單　86
4.1　理解表單　86
4.2　傳統(tǒng)表單翻新　88
4.2.1　通過占位符文本添加提示　91
4.2.2　焦點：挑選正確的起點　93
4.3　驗證：阻止錯誤　93
4.3.1　HTML5驗證的原理　94
4.3.2　關(guān)閉驗證　95
4.3.3　驗證樣式掛鉤　96
4.3.4　使用正則表達式　97
4.3.5　自定義驗證　98
4.3.6　瀏覽器對驗證的支持　99
4.4　新的輸入控件　102
4.4.1　電子郵件地址　104
4.4.2　網(wǎng)址　105
4.4.3　搜索框　105
4.4.4　電話號碼　105
4.4.5　數(shù)值　105
4.4.6　滑動條　106
4.4.7　日期和時間　107
4.4.8　顏色　108
4.5　新元素　108
4.5.1　使用顯示輸入建議　109
4.5.2　進度條和計量條　111
4.5.3　使用和創(chuàng)建工具條和菜單　113
4.6　網(wǎng)頁中的HTML編輯器　113
4.6.1　使用contentEditable編輯元素　114
4.6.2　使用designMode編輯頁面　116
第5章　音頻與視頻　118
5.1　理解今天的視頻　118
5.2　HTML5音頻與視頻　119
5.2.1　使用播放點噪音　120
5.2.2　了解　122
5.3　格式之爭與后備措施　123
5.3.1　談?wù)劯袷健?24
5.3.2　瀏覽器對媒體格式的支持情況　125
5.3.3　多種格式：如何討好每一款瀏覽器　127
5.3.4　使用元素　128
5.3.5　以Flash作后備　129
5.4　使用JavaScript控制播放器　132
5.4.1　添加音效　133
5.4.2　創(chuàng)建自定義視頻播放器　136
5.4.3　JavaScript媒體播放器　138
5.4.4　字幕與無障礙性　140
第6章　基本Canvas繪圖　142
6.1　Canvas起步　142
6.1.1　畫直線　145
6.1.2　路徑與形狀　148
6.1.3　繪制曲線　149
6.1.4　變換　152
6.1.5　透明度　155
6.2　構(gòu)建基本的畫圖程序　157
6.2.1　準(zhǔn)備工作　158
6.2.2　在畫布上繪圖　160
6.2.3　將畫布保存為圖像　161
6.3　瀏覽器對Canvas的支持情況　164
6.3.1　填平補齊Canvas　164
6.3.2　Canvas后備及功能檢測　166
第7章　高級Canvas技術(shù)　168
7.1　高級Canvas繪圖　168
7.1.1　繪制圖像　168
7.1.2　裁剪、切割和伸縮圖片　170
7.1.3　繪制文本　172
7.2　陰影與填充　173
7.2.1　添加陰影　173
7.2.2　填充圖案　175
7.2.3　填充漸變　176
7.2.4　綜合示例：繪制圖解　180
7.3　賦予圖形交互能力　184
7.3.1　記錄繪制的內(nèi)容　184
7.3.2　基于坐標(biāo)的碰撞檢測　187
7.4　給Canvas添加動畫　189
7.4.1　基本的動畫　190
7.4.2　多物體動畫　191
7.5　實例：迷宮游戲　195
7.5.1　布置迷宮　196
7.5.2　讓笑臉動起來　198
7.5.3　基于像素顏色的碰撞檢測　199
第8章　使用CSS3　203
8.1　使用CSS3　203
8.1.1　選擇一：用能用的　204
8.1.2　選擇二：將CSS功能作為增強　204
8.1.3　選擇三：Modernizr　205
8.1.4　特定于瀏覽器的樣式　208
8.2　Web排版　209
8.2.1　Web字體格式　211
8.2.2　使用字體包　212
8.2.3　使用谷歌的Web字體　214
8.2.4　使用自己的字體　216
8.2.5　多欄文本　218
8.3　適用不同的設(shè)備　220
8.3.1　媒體查詢　220
8.3.2　高級媒體查詢　224
8.3.3　替換整個樣式表　225
8.3.4　識別移動設(shè)備　226
8.4　多變的盒子　227
8.4.1　透明盒子　227
8.4.2　圓角盒子　229
8.4.3　背景盒子　230
8.4.4　陰影盒子　231
8.4.5　漸變盒子　232
8.5　創(chuàng)建過渡效果　234
8.5.1　基本的顏色過渡　235
8.5.2　更多的過渡思路　237
8.5.3　變換　237
第三部分　構(gòu)建桌面式Web應(yīng)用
第9章　數(shù)據(jù)存儲　242
9.1　Web存儲簡介　242
9.1.1　存儲數(shù)據(jù)　244
9.1.2　實戰(zhàn)：保存游戲中的最后位置　246
9.1.3　瀏覽器對Web存儲的支持情況　247
9.2　深入Web存儲　248
9.2.1　刪除數(shù)據(jù)項　248
9.2.2　查找所有數(shù)據(jù)項　248
9.2.3　保存數(shù)值和日期　249
9.2.4　保存對象　250
9.2.5　響應(yīng)存儲變化　251
9.3　讀取文件　253
9.3.1　取得文件　254
9.3.2　瀏覽器對File API的支持情況　254
9.3.3　讀取文本文件　255
9.3.4　替換標(biāo)準(zhǔn)上傳控件　257
9.3.5　一次讀取多個文件　257
9.3.6　讀取圖片文件　258
第10章　離線應(yīng)用　261
10.1　通過描述文件緩存資源　262
10.1.1　創(chuàng)建描述文件　262
10.1.2　使用描述文件　264
10.1.3　把描述文件放到Web服務(wù)器　265
10.1.4　更新描述文件　267
10.1.5　瀏覽器對離線應(yīng)用的支持情況　269
10.2　實用緩存技術(shù)　270
10.2.1　訪問未緩存的文件　270
10.2.2　添加后備內(nèi)容　271
10.2.3　檢測連接　273
10.2.4　通過JavaScript指定更新　274
第11章　與Web服務(wù)器通信　277
11.1　向Web服務(wù)器發(fā)送消息　277
11.1.1　XMLHttpRequest對象　278
11.1.2　向Web服務(wù)器提問　279
11.1.3　取得新內(nèi)容　283
11.2　服務(wù)器發(fā)送事件　286
11.2.1　消息格式　287
11.2.2　通過服務(wù)器腳本發(fā)送消息　288
11.2.3　在網(wǎng)頁中處理消息　289
11.2.4　輪詢服務(wù)器端事件　291
11.3　Web Socket　292
11.3.1　訪問Web Socket　293
11.3.2　簡單的Web Socket客戶端　294
11.3.3　使用現(xiàn)成的Web Socket服務(wù)器　295
第12章　更酷的JavaScript技術(shù)　298
12.1　地理定位　298
12.1.1　地理定位的基本原理　299
12.1.2　查找訪客的坐標(biāo)　301
12.1.3　處理錯誤　303
12.1.4　設(shè)置地理定位選項　305
12.1.5　顯示地圖　306
12.1.6　跟蹤訪客移動　309
12.2　Web Workers　309
12.2.1　費時的任務(wù)　311
12.2.2　把任務(wù)放在后臺　313
12.2.3　處理Worker錯誤　316
12.2.4　取消后臺任務(wù)　316
12.2.5　傳遞復(fù)雜消息　317
12.3　歷史管理　320
12.3.1　URL問題　320
12.3.2　以往的解決方案：Hashbang URL　321
12.3.3　HTML5的方案：會話歷史　322
12.3.4　瀏覽器對會話歷史的支持情況　325
第四部分　附錄
附錄A　CSS簡明教程　328
附錄B　JavaScript簡明教程　342

章節(jié)摘錄

版權(quán)頁：   插圖：   4.2.2焦點：挑選正確的起點 加載完表單之后，用戶要做的第一件事兒就是填寫表單。然而，除非用戶按下Tab切換到第一個控件，或者在其中單擊一下鼠標(biāo)，從而讓第一個控件獲得焦點，否則就不能輸入。 在相應(yīng)的元素上通過JavaScript調(diào)用focus（）方法，可以幫用戶完成焦點切換。但這樣就得編寫代碼，而且有時還會出現(xiàn)問題。比如，在調(diào)用focus（）方法之前，用戶已經(jīng)單擊了其他控件并開始輸入的情況也可能發(fā)生。這時硬性地把焦點切換到第一個控件顯得很粗魯。但如果瀏覽器自己能控制焦點，它就可以在用戶操作之前，先把焦點給予正確的控件。 這就是HTML5添加autofocus屬性的初衷，但只能給一個或元素添加這個屬性： Name*  與placeholder屬性一樣，除了IE，其他瀏覽器都支持autofocus屬性。同樣，對于IE還是有辦法的。可以使用Modernizr（參考1.6.3節(jié)）檢測瀏覽器是否支持autofocus.然后自己編寫腳本實現(xiàn)。也可以使用別人已經(jīng)開發(fā)好的JavaScript程序（http:／／tinyurl.com／polyfills）。不過，很少有人為了這點功能如此興師動眾，除非你也想讓IE支持其他表單功能，比如下面要討論的數(shù)據(jù)驗證。 4.3驗證：阻止錯誤 表單中的字段是為了從網(wǎng)頁訪客那里收集信息的。但是，無論你多么彬彬有禮地詢問，都可能得不到想要的結(jié)果。性子急躁的或者糊里糊涂的訪客，有可能跳過重要的部分，只填寫少量信息，或者只是不小心按錯了鍵、最后怎么樣？他單擊了“提交”按鈕，你的網(wǎng)站收集到了一堆亂七八糟的數(shù)據(jù)。 很多網(wǎng)頁都需要驗證，就是在發(fā)生錯誤時捕捉到它（而更好的方案是防止出錯）。很多年來，開發(fā)人員都要自己寫JavaScript驗證腳本，有時候也會用到專業(yè)的avaScript庫。應(yīng)該說，這些驗證方法效果都非常好。然而，鑒于驗證是那么常用（可能要對每個人都做錯誤檢查），驗證解決的問題是那么集中（例如，發(fā)現(xiàn)無效的電子郵件或日期），以及編寫驗證腳本那么討厭（沒有人真心喜歡為每個表單都編寫一遍同樣的代碼，更不要說測試這些腳本了），因此這個問題一定還有改進的空間。 HTML5規(guī)范的制定者決定讓瀏覽器幫忙解決這些小問題，以后就不用讓開發(fā)人員操心了。 為此，他們設(shè)計了一套客戶端驗證方法（參見后面的“在兩個地方驗證”），讓我們可以在字段里嵌入常用的錯誤檢查規(guī)則。而且，嵌入驗證規(guī)則的方法很簡單，只要指定正確的屬性就行。

編輯推薦

《HTML5秘籍》是Missing Manual系列圖書經(jīng)典著作，提供全面通俗的HTML5學(xué)習(xí)指南，《失控》作者凱文?凱利稱《HTML5秘籍》是入門指南最為明智的選擇。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    HTML5秘籍 PDF格式下載

---