HTML5 APP開(kāi)發(fā)從入門到精通（微課精編版）

目  錄
第1 章 移動(dòng)APP 開(kāi)發(fā)概述 1
1.1 從移動(dòng)開(kāi)發(fā)說(shuō)起 2
1.1.1 關(guān)于移動(dòng)開(kāi)發(fā) 2
1.1.2 移動(dòng)Web開(kāi)發(fā)歷史 2
1.1.3 移動(dòng)Web開(kāi)發(fā)的問(wèn)題 3
1.1.4 移動(dòng)Web開(kāi)發(fā)的前景 3
1.1.5 比較桌面和移動(dòng)端Web開(kāi)發(fā) 3
1.2 HTML5與移動(dòng)Web開(kāi)發(fā) 4
1.3 移動(dòng)Web與原生應(yīng)用比較 5
1.3.1 移動(dòng)Web 5
1.3.2 原生應(yīng)用 5
1.3.3 如何選擇應(yīng)用方案 6
1.4 移動(dòng)Web開(kāi)發(fā)知識(shí)結(jié)構(gòu) 6
1.5 初識(shí)移動(dòng)Web開(kāi)發(fā)技術(shù) 8
1.5.1 移動(dòng)Web設(shè)計(jì) 8
1.5.2 關(guān)于WebKit 10
第2 章 HTML5 基礎(chǔ) 12
視頻講解：1 小時(shí)3 分鐘
2.1 HTML5概述 13
2.1.1 HTML歷史 13
2.1.2 瀏覽器檢測(cè) 13
2.1.3 HTML5語(yǔ)法特性 14
2.2 HTML5文檔 16
2.2.1 編寫個(gè)HTML5文檔 16
2.2.2 比較HTML4與HTML5文檔結(jié)構(gòu) 17
2.3 頭部信息 18
2.3.1 定義網(wǎng)頁(yè)標(biāo)題 18
2.3.2 定義網(wǎng)頁(yè)元信息 19
2.3.3 定義文檔視口 20
2.3.4 移動(dòng)Web頭信息 21
2.4 構(gòu)建基本結(jié)構(gòu) 22
2.4.1 定義文檔結(jié)構(gòu) 22
2.4.2 定義內(nèi)容標(biāo)題 23
2.4.3 使用div元素 25
2.4.4 使用id和class.. 26
2.4.5 使用title 27
2.4.6 HTML注釋 27
2.5 構(gòu)建語(yǔ)義結(jié)構(gòu) 28
2.5.1 定義頁(yè)眉 28
2.5.2 定義導(dǎo)航 29
2.5.3 定義主要區(qū)域 31
2.5.4 定義文章塊 31
2.5.5 定義區(qū)塊 33
2.5.6 定義附欄 34
2.5.7 定義頁(yè)腳 34
2.5.8 使用role 35
2.6 案例實(shí)戰(zhàn) 37
2.7 在線練習(xí) 39
第3 章 JavaScript 基礎(chǔ) 40
視頻講解：2 小時(shí)12 分鐘
3.1 在網(wǎng)頁(yè)中使用JavaScript 41
3.1.1 編寫腳本 41
3.1.2 腳本在網(wǎng)頁(yè)中的位置 43
3.2 JavaScript基本規(guī)范 44
3.3 變量和類型 44
3.3.1 變量 44
3.3.2 數(shù)據(jù)類型 45
3.4 表達(dá)式和運(yùn)算符 46
3.4.1 表達(dá)式 46
3.4.2 運(yùn)算符 47
3.5 語(yǔ)句 48
3.5.1 表達(dá)式語(yǔ)句和語(yǔ)句塊 48
3.5.2 條件語(yǔ)句 49
3.5.3 循環(huán)語(yǔ)句 51
3.5.4 跳轉(zhuǎn)語(yǔ)句 52
3.6 函數(shù) 53
3.6.1 定義函數(shù) 54
3.6.2 調(diào)用函數(shù) 55
3.6.3 函數(shù)參數(shù) 55
3.7 對(duì)象 57
3.7.1 創(chuàng)建對(duì)象 57
3.7.2 訪問(wèn)對(duì)象 57
3.8 數(shù)組 58
3.8.1 定義數(shù)組 58
3.8.2 存取元素 59
3.9 在線練習(xí) 60
第4 章 使用HTML5 訪問(wèn)位置 61
4.1 Geolocation API基礎(chǔ) 62
4.1.1 Geolocation API應(yīng)用場(chǎng)景 62
4.1.2 位置信息來(lái)源 62
4.1.3 位置信息表示方式 62
4.1.4 獲取位置信息 63
4.1.5 瀏覽器兼容性 65
4.1.6 監(jiān)測(cè)位置信息 65
4.1.7 停止獲取位置信息 66
4.1.8 保護(hù)隱私 66
4.1.9 處理位置信息 66
4.1.10 使用position.. 67
4.2 案例實(shí)戰(zhàn) 68
4.2.1 定位手機(jī)位置 68
4.2.2 獲取經(jīng)緯度及其詳細(xì)地址 69
4.2.3 輸入提示查詢位置 70
4.2.4 從當(dāng)前位置查詢指定位置路線 72
4.2.5 記錄行蹤路線 73
4.3 在線練習(xí) 76
第5 章 使用HTML5 訪問(wèn)多媒體設(shè)備 77
5.1 WebRTC基礎(chǔ) 78
5.1.1 認(rèn)識(shí)WebRTC 78
5.1.2 訪問(wèn)本地設(shè)備 78
5.2 案例實(shí)戰(zhàn) 80
5.2.1 拍照和攝像 80
5.2.2 錄音并壓縮 82
5.3 在線練習(xí) 85
第6 章 使用HTML5 訪問(wèn)傳感器 86
6.1 傳感器API基礎(chǔ) 87
6.1.1 認(rèn)識(shí)傳感器API 87
6.1.2 方向事件和移動(dòng)事件 87
6.1.3 瀏覽器支持 89
6.1.4 應(yīng)用場(chǎng)景 89
6.2 案例實(shí)戰(zhàn) 89
6.2.1 記錄搖手機(jī)的次數(shù) 90
6.2.2 重力測(cè)試小游戲 91
6.3 在線練習(xí) 93
第7 章 使用HTML5 繪圖 94
視頻講解：56 分鐘
7.1 使用canvas..95
7.2 繪制圖形 97
7.2.1 矩形 97
7.2.2 路徑 98
7.2.3 直線 99
7.2.4 定義顏色 100
7.2.5 定義透明度 101
7.2.6 定義線性漸變 103
7.2.7 定義徑向漸變 104
7.2.8 定義陰影 105
7.3 繪制文字和圖像 105
7.3.1 繪制文字 106
7.3.2 導(dǎo)入圖像 106
7.3.3 將圖像寫入畫布 108
7.3.4 保存圖片 108
7.4 案例實(shí)戰(zhàn) 110
7.4.1 設(shè)計(jì)基本動(dòng)畫 110
7.4.2 設(shè)計(jì)運(yùn)動(dòng)動(dòng)畫 112
7.4.3 設(shè)計(jì)地球和月球公轉(zhuǎn)動(dòng)畫 114
7.4.4 在畫布上裁剪圖像 115
7.5 在線練習(xí) 117
第8 章 使用HTML5 多媒體 118
視頻講解：42 分鐘
8.1 使用HTML5音頻和視頻 119
8.1.1 使用 119
8.1.2 使用 120
8.1.3 設(shè)置屬性 122
8.1.4 設(shè)置方法 122
8.1.5 設(shè)置事件 123
8.2 案例實(shí)戰(zhàn) 125
8.2.1 獲取播放進(jìn)度 125
8.2.2 設(shè)計(jì)視頻播放器 126
8.2.3 視頻自動(dòng)截圖 129
8.2.4 視頻同步字幕 133
8.3 在線練習(xí) 137
第9 章 使用HTML5 表單 138
視頻講解：52 分鐘
9.1 HTML5表單特性 139
9.2 新的Input類型 140
9.2.1 email-Email地址框 140
9.2.2 url-URL地址框 141
9.2.3 number數(shù)字框 142
9.2.4 range范圍框.. 143
9.2.5 date pickers日期選擇器 144
9.2.6 search搜索框 149
9.2.7 tel電話號(hào)碼框 150
9.2.8 color拾色器 151
9.3 新的input屬性 151
9.3.1 autocomplete自動(dòng)完成 152
9.3.2 autofocus自動(dòng)獲取焦點(diǎn) 153
9.3.3 form歸屬表單 154
9.3.4 表單重寫 154
9.3.5 height（高）和width（寬） 155
9.3.6 list列表選項(xiàng).. 155
9.3.7 min（小值）、max（值）和
step（步長(zhǎng)） 155
9.3.8 multiple多選 156
9.3.9 pattern匹配模式 156
9.3.10 placeholder替換文本 157
9.3.11 required必填 158
9.4 新的表單元素 158
9.4.1 datalist數(shù)據(jù)列表 158
9.4.2 keygen密鑰對(duì)生成器 159
9.4.3 output輸出結(jié)果 159
9.5 新的form屬性 160
9.5.1 autocomplete自動(dòng)完成 160
9.5.2 novalidate禁止驗(yàn)證 161
9.6 案例實(shí)戰(zhàn) 162
9.6.1 設(shè)計(jì)HTML5注冊(cè)表單 162
9.6.2 設(shè)計(jì)HTML5表單驗(yàn)證 164
9.7 在線練習(xí) 165
第10 章 使用HTML5 離線和緩存 166
視頻講解：31 分鐘
10.1 Web Storage 167
10.1.1 認(rèn)識(shí)Web Storage 167
10.1.2 使用Web Storage 167
10.1.3 案例：設(shè)計(jì)登錄頁(yè) 169
10.1.4 案例：流量統(tǒng)計(jì) 170
10.2 ApplicationCache API基礎(chǔ)171
10.2.1 認(rèn)識(shí)ApplicationCache API 172
10.2.2 配置服務(wù)器 173
10.2.3 認(rèn)識(shí)manifest 174
10.2.4 使用ApplicationCache.. 176
10.2.5 事件監(jiān)聽(tīng) 180
10.3 案例實(shí)戰(zhàn) 181
10.3.1 設(shè)計(jì)首頁(yè)緩存 181
10.3.2 設(shè)計(jì)離線編輯 184
10.3.3 設(shè)計(jì)移動(dòng)便簽 188
10.3.4 設(shè)計(jì)離線留言 190
10.4 在線練習(xí) 193
第11 章 使用HTML5 推送消息 194
視頻講解：12 分鐘
11.1 WebSocket基礎(chǔ)195
11.1.1 認(rèn)識(shí)WebSocket 195
11.1.2 使用WebSocket API 195
11.1.3 在PHP中建立socket 198
11.2 案例實(shí)戰(zhàn) 200
11.2.1 設(shè)計(jì)呼叫和應(yīng)答 200
11.2.2 發(fā)送消息 205
11.2.3 使用Workerman框架通信 206
11.2.4 群發(fā)信息 207
11.3 在線練習(xí) 209
第12 章 使用HTML5 設(shè)計(jì)單頁(yè)無(wú)刷新應(yīng)用 210
視頻講解：20 分鐘
12.1 History API基礎(chǔ) 211
12.1.1 了解History API 211
12.1.2 使用History API 212
12.2 案例實(shí)戰(zhàn) 214
12.2.1 設(shè)計(jì)導(dǎo)航頁(yè)面 214
12.2.2 設(shè)計(jì)無(wú)刷新網(wǎng)站 216
12.2.3 設(shè)計(jì)可后退畫板 220
12.3 在線練習(xí) 222
第13 章 安裝jQuery Mobile 223
視頻講解：4 分鐘
13.1 認(rèn)識(shí)jQuery Mobile 224
13.1.1 為什么要學(xué)習(xí)jQuery Mobile 224
13.1.2 jQuery Mobile特性 224
13.1.3 jQuery Mobile兼容性 226
13.2 jQuery Mobile與HTML5 226
13.3 安裝jQuery Mobile 226
13.3.1 下載jQuery Mobile 226
13.3.2 配置jQuery Mobile 228
13.4 案例：設(shè)計(jì)個(gè)移動(dòng)頁(yè)面 228
第14 章 視圖 230
視頻講解：42 分鐘
14.1 設(shè)計(jì)頁(yè)面 231
14.1.1 定義單頁(yè)視圖 231
14.1.2 定義多頁(yè)視圖 232
14.2 設(shè)計(jì)對(duì)話框 234
14.2.1 定義對(duì)話框 234
14.2.2 關(guān)閉對(duì)話框 235
14.3 設(shè)計(jì)彈出頁(yè) 236
14.4 應(yīng)用彈出頁(yè) 237
14.4.1 彈出菜單 237
14.4.2 彈出表單 239
14.4.3 彈出對(duì)話框 240
14.4.4 彈出圖片 241
14.4.5 彈出視頻 243
14.5 設(shè)置彈出頁(yè) 246
14.5.1 顯示位置 246
14.5.2 切換動(dòng)畫 248
14.5.3 主題樣式 248
14.5.4 關(guān)閉按鈕 249
14.6 案例實(shí)戰(zhàn) 251
14.6.1 設(shè)計(jì)電子閱讀器 251
14.6.2 設(shè)計(jì)論壇界面 254
14.6.3 設(shè)計(jì)記事本 255
14.6.4 設(shè)計(jì)彈出框 257
14.6.5 設(shè)計(jì)視圖樣式 258
14.6.6 設(shè)計(jì)視圖切換方式 260
14.6.7 設(shè)計(jì)相冊(cè)視圖 262
第15 章 移動(dòng)布局 264
視頻講解：30 分鐘
15.1 網(wǎng)格化 265
15.2 折疊塊 268
15.2.1 定義折疊塊 268
15.2.2 定義嵌套折疊塊 269
15.2.3 設(shè)置屬性 270
15.2.4 設(shè)置選項(xiàng) 271
15.2.5 設(shè)置事件 275
15.3 折疊組 276
15.4 移動(dòng)表格 277
15.4.1 定義回流表格 277
15.4.2 定義字段切換表格 278
15.5 滑動(dòng)面板 279
15.6 案例實(shí)戰(zhàn) 281
15.6.1 設(shè)計(jì)課程表 281
15.6.2 設(shè)計(jì)九宮格 283
15.6.3 設(shè)計(jì)通訊錄 284
15.6.4 設(shè)計(jì)好友列表 286
第16 章 列表視圖 289
視頻講解：32 分鐘
16.1 定義列表視圖 290
16.2 定義嵌套列表 290
16.3 定義數(shù)字列表 291
16.4 定義分類列表 292
16.5 擴(kuò)展功能 294
16.5.1 添加拆分按鈕 294
16.5.2 添加縮微圖和圖標(biāo) 295
16.5.3 添加氣泡提示 295
16.5.4 添加過(guò)濾文本框 296
16.6 優(yōu)化列表 299
16.6.1 插頁(yè)列表 299
16.6.2 折疊列表 300
16.6.3 自動(dòng)分類列表 302
16.7 案例實(shí)戰(zhàn) 304
16.7.1 設(shè)計(jì)登錄表單 304
16.7.2 設(shè)計(jì)產(chǎn)品列表頁(yè) 305
16.7.3 設(shè)計(jì)新聞列表頁(yè) 307
16.7.4 設(shè)計(jì)播放列表 309
16.7.5 設(shè)計(jì)通訊錄 311
第17 章 欄目構(gòu)件 313
視頻講解：30 分鐘
17.1 標(biāo)題欄 314
17.1.1 定義標(biāo)題欄 314
17.1.2 定義按鈕位置 314
17.2 頁(yè)腳欄 316
17.2.1 定義頁(yè)腳欄 316
17.2.2 包含表單 317
17.3 導(dǎo)航欄 318
17.3.1 定義導(dǎo)航欄 318
17.3.2 定義導(dǎo)航圖標(biāo) 320
17.3.3 定義圖標(biāo)位置 321
17.3.4 自定義導(dǎo)航圖標(biāo) 322
17.4 設(shè)置欄目構(gòu)件 324
17.4.1 設(shè)置屬性 324
17.4.2 定義顯示模式 325
17.4.3 設(shè)置選項(xiàng) 326
17.4.4 設(shè)置方法和事件 326
17.5 案例實(shí)戰(zhàn) 328
17.5.1 設(shè)計(jì)播放器 328
17.5.2 設(shè)計(jì)按鈕組 329
第18 章 按鈕組件 332
視頻講解：15 分鐘
18.1 定義按鈕 333
18.2 定義內(nèi)聯(lián)按鈕 333
18.3 定義按鈕圖標(biāo) 334
18.3.1 圖標(biāo)樣式 334
18.3.2 圖標(biāo)位置 335
18.4 定義迷你按鈕 336
18.5 定義按鈕組 337
18.6 設(shè)置按鈕 338
18.6.1 定義屬性 338
18.6.2 定義選項(xiàng) 338
18.6.3 定義方法 339
18.7 自定義按鈕 340
18.7.1 自定義按鈕圖標(biāo) 340
18.7.2 文本換行顯示 341
18.8 案例實(shí)戰(zhàn) 341
第19 章 表單組件 343
視頻講解：34 分鐘
19.1 使用表單 344
19.2 使用文本框 345
19.3 使用單選按鈕 346
19.4 使用復(fù)選框 348
19.5 使用滑塊 350
19.6 使用開(kāi)關(guān) 353
19.7 使用菜單 354
19.7.1 定義下拉菜單 354
19.7.2 定義列表框 357
19.7.3 設(shè)置選項(xiàng)分組 359
19.7.4 設(shè)置禁用選項(xiàng) 360
19.8 設(shè)置表單屬性 360
19.8.1 禁用表單 361
19.8.2 隱藏標(biāo)簽 361
19.8.3 定義迷你表單 362
19.9 案例實(shí)戰(zhàn) 363
19.9.1 設(shè)計(jì)驗(yàn)證表單 363
19.9.2 設(shè)計(jì)上傳表單 364
19.9.3 設(shè)計(jì)登錄表單 365
19.9.4 設(shè)計(jì)調(diào)查表單 367
19.9.5 設(shè)計(jì)設(shè)置表單 368
19.9.6 設(shè)計(jì)彈出表單 369
第20 章 主題樣式 371
視頻講解：18 分鐘
20.1 jQuery Mobile主題 372
20.2 使用主題 372
20.3 自定義主題 375
20.4 使用ThemeRoller 377
20.4.1 認(rèn)識(shí)ThemeRoller 377
20.4.2 設(shè)置ThemeRoller 378
20.4.3 應(yīng)用自定義色版 379
20.5 案例實(shí)戰(zhàn) 381
20.5.1 定義多視圖主題 381
20.5.2 設(shè)計(jì)計(jì)算器 382
20.5.3 設(shè)計(jì)鍵盤 384
第21 章 腳本開(kāi)發(fā) 387
視頻講解：39 分鐘
21.1 自定義事件 388
21.1.1 觸摸事件 388
21.1.2 翻轉(zhuǎn)事件 390
21.1.3 滾屏事件 392
21.1.4 頁(yè)面事件 393
21.2 調(diào)用方法 395
21.2.1 轉(zhuǎn)換路徑 395
21.2.2 比較域名 396
21.2.3 縱向滾動(dòng) 397
21.3 HTML5應(yīng)用 399
21.3.1 離線訪問(wèn) 399
21.3.2 使用Web Storage傳遞參數(shù) 400
21.3.3 HTML5畫板 401
21.4 配置jQuery Mobile 402
21.5 案例實(shí)戰(zhàn) 404
21.5.1 偵測(cè)用戶動(dòng)作 404
21.5.2 劃動(dòng)面板 405
21.5.3 頁(yè)面初始化 406
21.5.4 以GET方式傳遞參數(shù) 408
21.5.5 自定義加載消息 409
21.5.6 管理加載消息 411
第22 章 發(fā)布移動(dòng)APP..413
22.1 Web應(yīng)用發(fā)布基礎(chǔ) 414
22.2 下載、安裝Cordova 414
22.2.1 安裝JAVA JDK 415
22.2.2 安裝Android SDK 416
22.2.3 安裝Apache Ant 417
22.2.4 設(shè)置用戶變量 417
22.2.5 測(cè)試工具 419
22.2.6 通過(guò)npm安裝Cordova.. 420
22.2.7 設(shè)置Android模擬器 421
22.3 將網(wǎng)頁(yè)轉(zhuǎn)換成Android APP 422
第23 章 實(shí)戰(zhàn)開(kāi)發(fā)：移動(dòng)版記事本項(xiàng)目 424
視頻講解：32 分鐘
23.1 項(xiàng)目分析 425
23.2 框架設(shè)計(jì) 425
23.3 制作主頁(yè)面 426
23.4 制作列表頁(yè) 430
23.5 制作詳細(xì)頁(yè) 433
23.6 制作修改頁(yè) 435
23.7 制作添加頁(yè) 439
23.8 小結(jié) 443
第24 章 實(shí)戰(zhàn)開(kāi)發(fā)：移動(dòng)博客項(xiàng)目 444
視頻講解：22 分鐘
24.1 項(xiàng)目分析 445
24.2 主頁(yè)設(shè)計(jì) 445
24.3 列表頁(yè)設(shè)計(jì) 447
24.4 內(nèi)容頁(yè)設(shè)計(jì) 449
24.5 后臺(tái)開(kāi)發(fā) 451
24.5.1 設(shè)計(jì)數(shù)據(jù)庫(kù) 451
24.5.2 連接數(shù)據(jù)庫(kù) 453
24.5.3 首頁(yè)功能實(shí)現(xiàn) 455
24.5.4 列表頁(yè)功能實(shí)現(xiàn) 456
24.5.5 內(nèi)容頁(yè)功能實(shí)現(xiàn) 459
24.6 小結(jié) 463