近些年，移動(dòng)互聯(lián)網(wǎng)迅速進(jìn)入人們的生活、工作中。在移動(dòng)互聯(lián)網(wǎng)中起支撐作用的網(wǎng)頁、APP等開發(fā)技術(shù)也已經(jīng)成熟。除了原生的Android與iOS外，HTML5也是移動(dòng)Web技術(shù)中不可忽視的一種開發(fā)模式。本書詳細(xì)講解了HTML5在移動(dòng)Web開發(fā)中的應(yīng)用，包括多媒體、canv
本書詳細(xì)講解了HTML5在移動(dòng)Web開發(fā)中的應(yīng)用，并穿插了兩個(gè)綜合項(xiàng)目，將所講所學(xué)應(yīng)用到實(shí)際開發(fā)中。
為什么要學(xué)習(xí)《HTML5移動(dòng)Web開發(fā)》
隨著互聯(lián)網(wǎng)行業(yè)的持續(xù)發(fā)展，移動(dòng)互聯(lián)網(wǎng)新業(yè)務(wù)不斷發(fā)展壯大。HTML5的發(fā)展打開了移動(dòng)開發(fā)的新格局，日益成熟的HTML5移動(dòng)開發(fā)技術(shù)在實(shí)現(xiàn)移動(dòng)端頁面呈現(xiàn)的基礎(chǔ)上，性能方面也得到了很大的提升，這些發(fā)展都使得移動(dòng)端HTML5開發(fā)人才更為緊缺。
雖然目前HTML5移動(dòng)Web開發(fā)與原生開發(fā)還有一定差距，但是在開發(fā)成本上HTML5移動(dòng)開發(fā)要比原生開發(fā)低得多，并且隨著HTML5的不斷發(fā)展，終將有一天HTML5移動(dòng)開發(fā)可以達(dá)到與原生開發(fā)一樣的效果。HTML5移動(dòng)開發(fā)也一定會(huì)更趨向于主流開發(fā)。本書匯集了HTML5中移動(dòng)端常用的技術(shù)，適合對(duì)HTML5移動(dòng)開發(fā)感興趣的讀者。
如何使用本書
本書適合有HTML5、CSS3和JavaScript基礎(chǔ)的學(xué)生使用。作為一門新技術(shù)教程，重要也是難的一件事情就是要將一些復(fù)雜的功能簡(jiǎn)單化，讓讀者能夠輕松理解并快速掌握。本書對(duì)每個(gè)知識(shí)點(diǎn)都進(jìn)行了深入的分析，并針對(duì)每個(gè)知識(shí)點(diǎn)精心設(shè)計(jì)了相關(guān)案例，然后在每個(gè)階段模擬這些知識(shí)點(diǎn)在實(shí)際工作中的運(yùn)用，真正做到了知識(shí)由淺入深、由易到難。
本書共分8章，第1~4章主要講解了移動(dòng)Web頁面的常用技術(shù)；第5章是一個(gè)移動(dòng)端的綜合項(xiàng)目；第6~7章主要講解了跨平臺(tái)移動(dòng)Web技術(shù)，即可適應(yīng)各種尺寸屏幕的頁面開發(fā)技術(shù)；第8章是一個(gè)跨平臺(tái)的綜合項(xiàng)目。下面分別對(duì)每個(gè)章節(jié)進(jìn)行簡(jiǎn)單介紹，具體如下：
（1）第1章主要讓讀者對(duì)移動(dòng)互聯(lián)網(wǎng)有基礎(chǔ)的理解，與HTML5中的移動(dòng)技術(shù)第一次見面。
（2）第2章講解了基于HTML5的移動(dòng)Web應(yīng)用中的網(wǎng)絡(luò)存儲(chǔ)、離線應(yīng)用和畫布技術(shù)。
（3）第3章講解了基于HTML5的移動(dòng)Web應(yīng)用中的多媒體、Geolocation地理定位、拖曳和文件操作技術(shù)。
（4）第4章集中講解了移動(dòng)端常用的頁面布局和移動(dòng)端常用事件。
（5）第5章綜合項(xiàng)目黑馬掌上商城，是一章模擬網(wǎng)上商城的移動(dòng)端實(shí)戰(zhàn)
課程。
（6）第6章講解了跨平臺(tái)移動(dòng)Web技術(shù)，包括響應(yīng)式Web設(shè)計(jì)、媒體查詢、柵格系統(tǒng)、彈性盒布局等。
（7）第7章講解了在移動(dòng)端開發(fā)使用非常廣泛的Bootstrap框架。
（8）第8章綜合項(xiàng)目黑馬財(cái)富，詳細(xì)講解了理財(cái)公司網(wǎng)站首頁響應(yīng)式頁面的制作方法。
如果讀者在理解知識(shí)點(diǎn)的過程中遇到困難，建議不要糾結(jié)于某個(gè)地方，可以先將案例按教程編寫出來。通常來講，在熟悉代碼過程后，前面看不懂的知識(shí)點(diǎn)一般就能理解了。如果讀者在動(dòng)手練習(xí)過程中遇到問題，建議多思考，理清思路，認(rèn)真分析問題發(fā)生的原因，并在問題解決后多進(jìn)行總結(jié)。
致謝
本書的編寫和整理工作由傳智播客教育科技股份有限公司完成，主要參與人員有呂春林、馬丹、金鑫、馬倫、劉曉強(qiáng)等，全體人員在這近一年的編寫過程中付出了很多辛勤的汗水，在此一并表示衷心的感謝。
意見反饋
盡管我們盡了大的努力，但書中仍難免會(huì)有不妥之處，歡迎各界專家和讀者朋友來信來函提出寶貴意見，我們將不勝感激。在閱讀本書時(shí)，若發(fā)現(xiàn)任何問題或有不認(rèn)同之處，可以通過電子郵件與我們?nèi)〉寐?lián)系。
請(qǐng)發(fā)送電子郵件至：itcast_book@vip.sina.com
黑馬程序員
2017年4月
中關(guān)村黑馬程序員訓(xùn)練營(yíng)是由傳智播客教育科技有限公司（簡(jiǎ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íng)已成長(zhǎng)為行業(yè)學(xué)員質(zhì)量好、課程內(nèi)容深、企業(yè)滿意的移動(dòng)開發(fā)高端訓(xùn)練基地，并被評(píng)為中關(guān)村軟件園重點(diǎn)扶持人才企業(yè)。
第1章
移動(dòng)互聯(lián)中的Web應(yīng)用 .................1
1.1 移動(dòng)互聯(lián)網(wǎng)的發(fā)展
...............1
1.2 移動(dòng)Web開發(fā)概述
...............3
1.2.1 移動(dòng)開發(fā)的幾種
方式 ............................3
1.2.2 移動(dòng)Web開發(fā)與PC端Web開發(fā)的區(qū)別
.........4
1.3 移動(dòng)端的Web瀏覽器
...........4
1.4 基于HTML5的移動(dòng)Web
開發(fā) .......................................5
小結(jié) ................................................7
思考題 ............................................7
第2章
基于HTML5的移動(dòng)Web應(yīng)用（上） ...8
2.1 HTML5的網(wǎng)絡(luò)存儲(chǔ) .............8
2.1.1 Web Storage簡(jiǎn)介 ........9
2.1.2 localStorage
..............10
2.1.3 sessionStorage
...........12
2.1.4 Storage 事件監(jiān)聽 .....14
2.2 移動(dòng)Web離線應(yīng)用
.............15
2.2.1 離線應(yīng)用簡(jiǎn)介 ..........15
2.2.2 Application Cache
的基本應(yīng)用 ..............16
2.2.3 applicationCache
對(duì)象 ..........................20
2.2.4 離線緩存更新 ..........21
2.3 HTML5畫布
.......................22
2.3.1 初識(shí)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的移動(dòng)Web應(yīng)用（下） ...32
3.1 視頻與音頻
.........................32
3.1.1
使用 ..........................33
3.1.2 HTML DOM Video
對(duì)象 ..........................35
3.1.3
使用 ..........................38
3.1.4 HTML DOM Audio
對(duì)象 ..........................39
3.2 Geolocation地理定位
.........42
3.2.1 Geolocation簡(jiǎn)介 .......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章
移動(dòng)端頁面布局和常用事件 ............60
4.1 流式布局
.............................60
4.2 視口
.....................................62
4.2.1 理解視口
..................62
4.2.2 移動(dòng)端的3種視口 ....63
4.3 移動(dòng)端常用事件
.................65
4.3.1 Touch事件簡(jiǎn)介
........65
4.3.2 Touch事件的應(yīng)用 ....67
4.3.3 過渡和動(dòng)畫結(jié)束
事件 ..........................70
小結(jié) ..............................................75
思考題 ..........................................75
第5章
綜合項(xiàng)目黑馬
掌上商城 ..........76
5.1 項(xiàng)目簡(jiǎn)介
.............................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 購(gòu)物車頁面
.......................114
5.4.1 【任務(wù)9】 購(gòu)物
車頁面 ....................114
5.4.2 【任務(wù)10】 彈出
框動(dòng)畫 ....................122
5.5 Zepto.js
..............................127
5.5.1 Zepto 模塊
..............127
5.5.2 Zepto的使用
...........128
小結(jié) ............................................129
思考題 ........................................130
第6章
跨平臺(tái)移動(dòng)Web
技術(shù) ..............131
6.1 響應(yīng)式Web設(shè)計(jì)
...............131
6.1.1 響應(yīng)式Web設(shè)計(jì)
簡(jiǎn)介 ........................132
6.1.2 響應(yīng)式Web設(shè)計(jì)
相關(guān)技術(shù) ................133
6.2 媒體查詢
...........................133
6.3 柵格系統(tǒng)
...........................136
6.4 彈性盒布局
.......................139
小結(jié)
...........................................146
思考題 ........................................146
第7章
使用Bootstrap進(jìn)行
移動(dòng)Web開發(fā) ...147
7.1 初識(shí)Bootstrap
...................147
7.1.1 Bootstrap簡(jiǎn)介
.........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)目黑馬
財(cái)富 ..............175
8.1 項(xiàng)目簡(jiǎn)介
...........................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
書單推薦
