近些年，移動互聯網迅速進入人們的生活、工作中。在移動互聯網中起支撐作用的網頁、APP等開發技術也已經成熟。除了原生的Android與iOS外，HTML5也是移動Web技術中不可忽視的一種開發模式。本書詳細講解了HTML5在移動Web開發中的應用，包括多媒體、canv
為什么要學習《HTML5移動Web開發》
隨著互聯網行業的持續發展，移動互聯網新業務不斷發展壯大。HTML5的發展打開了移動開發的新格局，日益成熟的HTML5移動開發技術在實現移動端頁面呈現的基礎上，性能方面也得到了很大的提升，這些發展都使得移動端HTML5開發人才更為緊缺。
雖然目前HTML5移動Web開發與原生開發還有一定差距，但是在開發成本上HTML5移動開發要比原生開發低得多，并且隨著HTML5的不斷發展，終將有一天HTML5移動開發可以達到與原生開發一樣的效果。HTML5移動開發也一定會更趨向于主流開發。本書匯集了HTML5中移動端常用的技術，適合對HTML5移動開發感興趣的讀者。
如何使用本書
本書適合有HTML5、CSS3和JavaScript基礎的學生使用。作為一門新技術教程，重要也是難的一件事情就是要將一些復雜的功能簡單化，讓讀者能夠輕松理解并快速掌握。本書對每個知識點都進行了深入的分析，并針對每個知識點精心設計了相關案例，然后在每個階段模擬這些知識點在實際工作中的運用，真正做到了知識由淺入深、由易到難。
本書共分8章，第1~4章主要講解了移動Web頁面的常用技術；第5章是一個移動端的綜合項目；第6~7章主要講解了跨平臺移動Web技術，即可適應各種尺寸屏幕的頁面開發技術；第8章是一個跨平臺的綜合項目。下面分別對每個章節進行簡單介紹，具體如下：
（1）第1章主要讓讀者對移動互聯網有基礎的理解，與HTML5中的移動技術第一次見面。
（2）第2章講解了基于HTML5的移動Web應用中的網絡存儲、離線應用和畫布技術。
（3）第3章講解了基于HTML5的移動Web應用中的多媒體、Geolocation地理定位、拖曳和文件操作技術。
（4）第4章集中講解了移動端常用的頁面布局和移動端常用事件。
（5）第5章綜合項目黑馬掌上商城，是一章模擬網上商城的移動端實戰
課程。
（6）第6章講解了跨平臺移動Web技術，包括響應式Web設計、媒體查詢、柵格系統、彈性盒布局等。
（7）第7章講解了在移動端開發使用非常廣泛的Bootstrap框架。
（8）第8章綜合項目黑馬財富，詳細講解了理財公司網站首頁響應式頁面的制作方法。
如果讀者在理解知識點的過程中遇到困難，建議不要糾結于某個地方，可以先將案例按教程編寫出來。通常來講，在熟悉代碼過程后，前面看不懂的知識點一般就能理解了。如果讀者在動手練習過程中遇到問題，建議多思考，理清思路，認真分析問題發生的原因，并在問題解決后多進行總結。
致謝
本書的編寫和整理工作由傳智播客教育科技股份有限公司完成，主要參與人員有呂春林、馬丹、金鑫、馬倫、劉曉強等，全體人員在這近一年的編寫過程中付出了很多辛勤的汗水，在此一并表示衷心的感謝。
意見反饋
盡管我們盡了大的努力，但書中仍難免會有不妥之處，歡迎各界專家和讀者朋友來信來函提出寶貴意見，我們將不勝感激。在閱讀本書時，若發現任何問題或有不認同之處，可以通過電子郵件與我們取得聯系。
請發送電子郵件至：itcast_book@vip.sina.com
黑馬程序員
2017年4月
中關村黑馬程序員訓練營是由傳智播客教育科技有限公司（簡稱傳智播客）聯合中關村軟件園、CSDN，并委托傳智播客進行教學實施的軟件開發高端培訓機構，致力于服務各大軟件企業，解決當前軟件開發技術飛速發展，而企業招不到優秀人才的困擾。 目前，中關村黑馬程序員訓練營已成長為行業學員質量好、課程內容深、企業滿意的移動開發高端訓練基地，并被評為中關村軟件園重點扶持人才企業。
第1章
移動互聯中的Web應用 .................1
1.1 移動互聯網的發展
...............1
1.2 移動Web開發概述
...............3
1.2.1 移動開發的幾種
方式 ............................3
1.2.2 移動Web開發與PC端Web開發的區別
.........4
1.3 移動端的Web瀏覽器
...........4
1.4 基于HTML5的移動Web
開發 .......................................5
小結 ................................................7
思考題 ............................................7
第2章
基于HTML5的移動Web應用（上） ...8
2.1 HTML5的網絡存儲 .............8
2.1.1 Web Storage簡介 ........9
2.1.2 localStorage
..............10
2.1.3 sessionStorage
...........12
2.1.4 Storage 事件監聽 .....14
2.2 移動Web離線應用
.............15
2.2.1 離線應用簡介 ..........15
2.2.2 Application Cache
的基本應用 ..............16
2.2.3 applicationCache
對象 ..........................20
2.2.4 離線緩存更新 ..........21
2.3 HTML5畫布
.......................22
2.3.1 初識canvas
...............22
2.3.2 利用canvas 繪制
矩形和清除矩形 ......25
2.3.3 利用canvas 繪制
圓形
..........................27
2.3.4 利用canvas 繪制
圖片 ..........................28
2.3.5 利用canvas 其他
方法 ..........................30
小結 ..............................................31
思考題 ..........................................31
第3章
基于HTML5的移動Web應用（下） ...32
3.1 視頻與音頻
.........................32
3.1.1
使用 ..........................33
3.1.2 HTML DOM Video
對象 ..........................35
3.1.3
使用 ..........................38
3.1.4 HTML DOM Audio
對象 ..........................39
3.2 Geolocation地理定位
.........42
3.2.1 Geolocation簡介 .......42
3.2.2 獲取當前位置 ..........42
3.2.3 調用百度地圖 ..........45
3.3 拖曳
.....................................49
3.4 文件操作
.............................52
3.4.1 選擇文件
..................53
3.4.2 操作文件
..................55
小結 ..............................................59
思考題 ..........................................59
第4章
移動端頁面布局和常用事件 ............60
4.1 流式布局
.............................60
4.2 視口
.....................................62
4.2.1 理解視口
..................62
4.2.2 移動端的3種視口 ....63
4.3 移動端常用事件
.................65
4.3.1 Touch事件簡介
........65
4.3.2 Touch事件的應用 ....67
4.3.3 過渡和動畫結束
事件 ..........................70
小結 ..............................................75
思考題 ..........................................75
第5章
綜合項目黑馬
掌上商城 ..........76
5.1 項目簡介
.............................76
5.1.1 項目功能展示 ..........77
5.1.2 項目目錄和文件
結構 ..........................77
5.1.3 項目開發流程 ..........78
5.2 商城首頁
.............................80
5.2.1 【任務1】 項目
搭建 ..........................80
5.2.2 【任務2】 頁面主體
和頭部搜索 ..............83
5.2.3 【任務3】 輪播圖 ...87
5.2.4 【任務4】 導航欄 ...92
5.2.5 【任務5】 商品 ......95
5.3 商品分類頁
.......................102
5.3.1 【任務6】 頂部
通欄 ........................102
5.3.2 【任務7】 左側欄 ...104
5.3.3 【任務8】 右側欄 ...109
5.4 購物車頁面
.......................114
5.4.1 【任務9】 購物
車頁面 ....................114
5.4.2 【任務10】 彈出
框動畫 ....................122
5.5 Zepto.js
..............................127
5.5.1 Zepto 模塊
..............127
5.5.2 Zepto的使用
...........128
小結 ............................................129
思考題 ........................................130
第6章
跨平臺移動Web
技術 ..............131
6.1 響應式Web設計
...............131
6.1.1 響應式Web設計
簡介 ........................132
6.1.2 響應式Web設計
相關技術 ................133
6.2 媒體查詢
...........................133
6.3 柵格系統
...........................136
6.4 彈性盒布局
.......................139
小結
...........................................146
思考題 ........................................146
第7章
使用Bootstrap進行
移動Web開發 ...147
7.1 初識Bootstrap
...................147
7.1.1 Bootstrap簡介
.........147
7.1.2 Bootstrap下載
.........148
7.1.3 Bootstrap基本
模板 ........................150
7.2 Bootstrap常用布局 ...........151
7.2.1 布局容器
................151
7.2.2 柵格系統
................152
7.2.3 響應式工具
............154
7.3 Bootstrap常用樣式 ...........157
7.3.1 導航欄
....................157
7.3.2 表單
........................161
7.3.3 按鈕
........................166
7.3.4 標簽頁
....................168
7.3.5 輪播插件
................170
小結 ............................................174
思考題 ........................................174
第8章
綜合項目黑馬
財富 ..............175
8.1 項目簡介
...........................176
8.1.1 項目功能展示 ........176
8.1.2 項目目錄和文件
結構 ........................178
8.1.3 項目開發流程 ........179
8.2 【任務1】 index.html頁面
結構搭建 ...........................180
8.3 【任務2】 頂部通欄
模塊 ...................................182
8.4 【任務3】 導航欄模塊 ...186
8.5 【任務4】 輪播圖模塊 ...191
8.6 【任務5】 信息和預約
模塊 ...................................197
8.7 【任務6】 產品模塊 .......203
8.8 【任務7】 新聞和合作
伙伴模塊 ...........................213
小結 ............................................222
思考題 ........................................222
新書資訊