《HTML5 實戰寶典》是一本學習HTML5的寶典,以實際項目為驅動,內容全面,講解通俗,適合各層次的學習者。《HTML5 實戰寶典》分為14章,由淺入深地講解了HTML5的基本概念和基本功能,包括地理位置定位、本地存儲、離線存儲、WebSocket、Canvas、表單等,而且對每一個概念的講解都配備了恰如其分的示例和代碼,讓讀者通過動手實踐,切身體會到這些概念的含義和價值。《HTML5 實戰寶典》前半部分結合實例深入講解了HTML5在PC端的大放異彩的功能,后半部分則深入講解HTML5在移動端的應用開發知識,系統地討論了離線存儲、本地存儲和HTML5 Canvas游戲等主題。《HTML5 實戰寶典》適合各個層次的前端開發人員學習,無論是出于工作需要,還是好奇心的驅使,只要你想深入理解HTML5,本書都會讓你大有收獲。
HTML5 CSS3奠定了打造Web應用的基礎,它們可以讓網站更易開發、更易維護、更具用戶友好性。同時借助許多基于HTML 5的移動開發框架可以讓開發任務變得更加簡單,更好地進行移動Web開發。HTML5通過代碼方式,增加交互功能,同時結合后臺開發技術,進行Web和App開發,通過HTML5技術可以顯著改善用戶體驗。
前 言關于《HTML5 實戰寶典》Web技術日新月異,每個置身其中的從業者都有逆水行舟,不進則退的感覺。尤其是在2014年10月29日,HTML5定稿之后,互聯網進入了一個嶄新的時代。HTML5奠定了打造下一代Web應用的基礎,它可以讓網站更易開發、更易維護、更具用戶友好性。HTML5被設計為跨平臺的技術,最新版本的Apple Safari、Google Chrome、Mozilla Firefox、Opera以及Microsoft Internet Explorer都支持HTML5的許多特性。在iPhone、iPad及Android移動設備上預裝的瀏覽器也大多對HTML5提供了極好的支持。《HTML5 實戰寶典》系統地講解了HTML5的基礎理論和實際運用技術,通過大量實例對HTML5進行深入淺出的分析,不但講解了HTML5在傳統PC端的開發方法,而且著重講解了如何開發混合型APP。全書注重實際操作,使讀者在學習技術的同時,掌握Web開發和設計的精髓,提高綜合應用的能力。《HTML5 實戰寶典》第一部分介紹了HTML5的歷史背景、新的語義標簽和語法規范、HTML5的優劣及與以往HTML版本相比的變化,同時揭示了HTML5背后的設計原理。第二部分介紹了HTML5新增表單的用法,拖拽、Canvas、地理位置定位、本地存儲以及Canvas應用,并以項目為驅動,配有大量的代碼和示例圖片。第三部分則主要介紹了HTML5在移動端的應用和移動端的特性,包括離線存儲、WebSocket等知識點,并且結合HBuilder制作WebAPP,同時結合現在當前熱門的微信平臺制作了一個微信小游戲,并輔以大量代碼示例和圖示。由于《HTML5 實戰寶典》講解的知識由淺入深并且以項目為驅動,理論上適合任何對HTML5有學習欲望的讀者,但是如果您有HTML、JavaScript等語言基礎的話,閱讀《HTML5 實戰寶典》會更有如魚得水的感覺,如果您正在學習或從事有關HTML5的開發工作,那么我相信您也一定能從《HTML5 實戰寶典》中獲得更為精準的知識和實戰的開發經驗。《HTML5 實戰寶典》代碼開發環境為了更好地學習《HTML5 實戰寶典》并運行《HTML5 實戰寶典》案例代碼,首先需要搭建一個合適的開發環境:(1)Sublime或者WebStorm編輯器,或者任意您熟悉的編輯器;(2)Chrome瀏覽器。此外,《HTML5 實戰寶典》的案例代碼中,會用到PHP語言、Node.js和Wamp,相關環境搭建請參考《HTML5 實戰寶典》附錄部分.引用的其他資源在《HTML5 實戰寶典》中,我們會引用部分W3C的官方文檔和相關的API,官方文檔是非常好的學習資源,請讀者重視官方文檔的學習。雖然我們也在《HTML5 實戰寶典》當中列出了一些常用的API,但是我們還是建議讀者參考官方文檔,因為官方文檔肯定是最準確和更新最及時的。致謝我們要感謝所有參與編寫《HTML5 實戰寶典》的人員,沒有他們的付出,就沒有這《HTML5 實戰寶典》的存在。首先要感謝優逸客公司創始人兼總經理張宏帥老師,張老師高瞻遠矚,嚴謹細心,在《HTML5 實戰寶典》的編寫過程中提出了很多寶貴的意見和建議,并為整個團隊提供了充分的支持。還要感謝優逸客公司副總經理兼實訓總監嚴武軍(Kevin)老師和實訓副總監、技術總監岳英俊(Json)老師的指導和規劃。在《HTML5 實戰寶典》的編寫過程中,他們嚴格把控進度和方向,提供了大量資料和參考文檔,并直接參與編寫。還要感謝其他參與編寫的人員,他們分別是:優逸客前端組負責人馬彥龍(Money)老師,優逸客前端組負責人候寧洲(Nico)老師,優逸客高級布道師王琦(Herman)老師、李星(Star-li)老師、馬松(Allen)老師、岳飛飛(Rose)老師等。作者水平有限,紕漏之處在所難免,懇請廣大讀者批評指正,我們也感謝各位著名的、無名的互聯網先驅們,他們所做的研究、開發和傳播工作為我們的社會和團體做出了巨大的貢獻。沒有他們,就沒有《HTML5 實戰寶典》所討論的話題,感謝《HTML5 實戰寶典》的技術審稿人,他們在完善《HTML5 實戰寶典》的過程中做出了不懈的努力。優逸客科技有限公司
優逸客科技有限公司成立于2013年,總部位于山西太原。公司是由業界互聯網技術專家共同發起成立。優逸客是國內互聯網前端開發實訓行業的拓荒者,是企業級產品設計方案提供商,是中國UI職業教育的知名品牌。公司的互聯網技術實訓體系是依據歷時一年的深度調研,并結合企業對人才實際需求研發而成的。我們在此基礎上配以完善的職業規劃體系,規范的人才培養流程和標準。經過3年發展,公司已先后在北京、山西、陜西等區域建立了互聯網人才實訓基地,已培養出5000余名互聯網高端技術人才。在未來,我們將繼續秉承專注、口碑的理念,逐漸成長為我國領先的互聯網人才培養公司。優逸客匯聚了一批具有豐富Web開發經驗的布道師,我們很早就意識到,移動化是一個再明顯不過的趨勢,未來幾年里,移動端將是Web開發的主戰場,而HTML5就是一把鋒利的武器,配合程序邏輯,我們將能利用它創造無限的可能。
序前言第1章 HTML5概述11.1 一個新的Web開發平臺21.2 HTML5為什么受歡迎21.3 HTML5的可持續性41.4 HTML5的發展歷程5第2章 HTML5規范72.1 新的文檔聲明和語法規范82.2 廢棄的標簽和屬性102.3 新的結構標簽和屬性122.4 對于瀏覽器的支持情況19第3章 HTML5表單新功能注冊和登錄驗證實戰243.1 表單新控件詳解253.2 構建表單用戶界面313.3 表單驗證383.4 注冊和登錄實戰41第4章 文件處理和拖拽文件上傳實戰514.1 File API524.2 HTML5 拖拽事件574.3 dataTransfer對象624.4 利用拖拽效果完成上傳功能64第5章 客戶端存儲在線可編輯表格實戰685.1 客戶端存儲概述695.2 利用localStorage API 管理 數據695.3 利用sessionStorage API管理 數據715.4 在線可編輯表格實戰72第6章 HTML5通信技術在線五子棋實戰776.1 WebSocket 概述786.2 WebSocket 的原理及運行機制786.3 在線五子棋實戰79第7章 HTML5畫布在線繪圖板857.1 繪制基本圖形867.2 擦除Canvas畫板1017.3 繪制復雜圖形1037.4 繪制文本1087.5 圖片操作1117.6 像素操作1127.7 矩陣變換與坐標關系1157.8 繪圖板實戰118第8章 多媒體自定義炫酷播放器1258.1 HTML5對多媒體的支持1268.2 音頻和視頻標簽1278.3 音頻和視頻API1298.4 播放器實戰132第9章 移動端觸摸事件1389.1 移動端事件模型1399.2 移動端事件詳解1419.3 可拖拽輪播圖143第10章 離線應用14810.1 離線應用概述14910.2 離線資源緩存14910.3 在線狀態檢測15110.4 離線應用示例151第11章 history歷史記錄15711.1 應用場景15811.2 HTML5歷史記錄詳解15811.3 history新特性結合ajax增強單頁 面體驗160第12章 新聞APP16412.1 HBuilder開發環境16512.2 HBuilder Webview詳解16612.3 新聞APP頁面制作16812.4 結合HBuilder實現新聞APP171第13章 地理位置定位17913.1 位置信息獲取18013.2 瀏覽器支持情況18013.3 隱私18113.4 HTML5 Geolocation API18113.5 構建應用18413.6 百度地圖API185第14章 微信游戲開發18714.1 微信二次開發平臺簡介18814.2 微信二次開發原理18814.3 微信二次開發步驟18814.4 自動回復功能示例19314.5 微信游戲開發技術背景19514.6 微信游戲推送方式19514.7 像素鳥游戲以及布局19514.8 像素鳥效果實現197附 錄203附錄A:編輯工具簡介204附錄B:HTML5相關API207附錄C:相關開發環境的安裝217