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