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

目  錄
第1 章 移動APP 開發(fā)概述 1
1.1 從移動開發(fā)說起 2
1.1.1 關(guān)于移動開發(fā) 2
1.1.2 移動Web開發(fā)歷史 2
1.1.3 移動Web開發(fā)的問題 3
1.1.4 移動Web開發(fā)的前景 3
1.1.5 比較桌面和移動端Web開發(fā) 3
1.2 HTML5與移動Web開發(fā) 4
1.3 移動Web與原生應(yīng)用比較 5
1.3.1 移動Web 5
1.3.2 原生應(yīng)用 5
1.3.3 如何選擇應(yīng)用方案 6
1.4 移動Web開發(fā)知識結(jié)構(gòu) 6
1.5 初識移動Web開發(fā)技術(shù) 8
1.5.1 移動Web設(shè)計 8
1.5.2 關(guān)于WebKit 10
第2 章 HTML5 基礎(chǔ) 12
視頻講解：1 小時3 分鐘
2.1 HTML5概述 13
2.1.1 HTML歷史 13
2.1.2 瀏覽器檢測 13
2.1.3 HTML5語法特性 14
2.2 HTML5文檔 16
2.2.1 編寫個HTML5文檔 16
2.2.2 比較HTML4與HTML5文檔結(jié)構(gòu) 17
2.3 頭部信息 18
2.3.1 定義網(wǎng)頁標(biāo)題 18
2.3.2 定義網(wǎng)頁元信息 19
2.3.3 定義文檔視口 20
2.3.4 移動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)建語義結(jié)構(gòu) 28
2.5.1 定義頁眉 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 定義頁腳 34
2.5.8 使用role 35
2.6 案例實戰(zhàn) 37
2.7 在線練習(xí) 39
第3 章 JavaScript 基礎(chǔ) 40
視頻講解：2 小時12 分鐘
3.1 在網(wǎng)頁中使用JavaScript 41
3.1.1 編寫腳本 41
3.1.2 腳本在網(wǎng)頁中的位置 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 語句 48
3.5.1 表達(dá)式語句和語句塊 48
3.5.2 條件語句 49
3.5.3 循環(huán)語句 51
3.5.4 跳轉(zhuǎn)語句 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 對象 57
3.7.1 創(chuàng)建對象 57
3.7.2 訪問對象 57
3.8 數(shù)組 58
3.8.1 定義數(shù)組 58
3.8.2 存取元素 59
3.9 在線練習(xí) 60
第4 章 使用HTML5 訪問位置 61
4.1 Geolocation API基礎(chǔ) 62
4.1.1 Geolocation API應(yīng)用場景 62
4.1.2 位置信息來源 62
4.1.3 位置信息表示方式 62
4.1.4 獲取位置信息 63
4.1.5 瀏覽器兼容性 65
4.1.6 監(jiān)測位置信息 65
4.1.7 停止獲取位置信息 66
4.1.8 保護(hù)隱私 66
4.1.9 處理位置信息 66
4.1.10 使用position.. 67
4.2 案例實戰(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 訪問多媒體設(shè)備 77
5.1 WebRTC基礎(chǔ) 78
5.1.1 認(rèn)識WebRTC 78
5.1.2 訪問本地設(shè)備 78
5.2 案例實戰(zhàn) 80
5.2.1 拍照和攝像 80
5.2.2 錄音并壓縮 82
5.3 在線練習(xí) 85
第6 章 使用HTML5 訪問傳感器 86
6.1 傳感器API基礎(chǔ) 87
6.1.1 認(rèn)識傳感器API 87
6.1.2 方向事件和移動事件 87
6.1.3 瀏覽器支持 89
6.1.4 應(yīng)用場景 89
6.2 案例實戰(zhàn) 89
6.2.1 記錄搖手機(jī)的次數(shù) 90
6.2.2 重力測試小游戲 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 案例實戰(zhàn) 110
7.4.1 設(shè)計基本動畫 110
7.4.2 設(shè)計運(yùn)動動畫 112
7.4.3 設(shè)計地球和月球公轉(zhuǎn)動畫 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 案例實戰(zhàn) 125
8.2.1 獲取播放進(jìn)度 125
8.2.2 設(shè)計視頻播放器 126
8.2.3 視頻自動截圖 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電話號碼框 150
9.2.8 color拾色器 151
9.3 新的input屬性 151
9.3.1 autocomplete自動完成 152
9.3.2 autofocus自動獲取焦點 153
9.3.3 form歸屬表單 154
9.3.4 表單重寫 154
9.3.5 height（高）和width（寬） 155
9.3.6 list列表選項.. 155
9.3.7 min（小值）、max（值）和
step（步長） 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密鑰對生成器 159
9.4.3 output輸出結(jié)果 159
9.5 新的form屬性 160
9.5.1 autocomplete自動完成 160
9.5.2 novalidate禁止驗證 161
9.6 案例實戰(zhàn) 162
9.6.1 設(shè)計HTML5注冊表單 162
9.6.2 設(shè)計HTML5表單驗證 164
9.7 在線練習(xí) 165
第10 章 使用HTML5 離線和緩存 166
視頻講解：31 分鐘
10.1 Web Storage 167
10.1.1 認(rèn)識Web Storage 167
10.1.2 使用Web Storage 167
10.1.3 案例：設(shè)計登錄頁 169
10.1.4 案例：流量統(tǒng)計 170
10.2 ApplicationCache API基礎(chǔ)171
10.2.1 認(rèn)識ApplicationCache API 172
10.2.2 配置服務(wù)器 173
10.2.3 認(rèn)識manifest 174
10.2.4 使用ApplicationCache.. 176
10.2.5 事件監(jiān)聽 180
10.3 案例實戰(zhàn) 181
10.3.1 設(shè)計首頁緩存 181
10.3.2 設(shè)計離線編輯 184
10.3.3 設(shè)計移動便簽 188
10.3.4 設(shè)計離線留言 190
10.4 在線練習(xí) 193
第11 章 使用HTML5 推送消息 194
視頻講解：12 分鐘
11.1 WebSocket基礎(chǔ)195
11.1.1 認(rèn)識WebSocket 195
11.1.2 使用WebSocket API 195
11.1.3 在PHP中建立socket 198
11.2 案例實戰(zhàn) 200
11.2.1 設(shè)計呼叫和應(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è)計單頁無刷新應(yīng)用 210
視頻講解：20 分鐘
12.1 History API基礎(chǔ) 211
12.1.1 了解History API 211
12.1.2 使用History API 212
12.2 案例實戰(zhàn) 214
12.2.1 設(shè)計導(dǎo)航頁面 214
12.2.2 設(shè)計無刷新網(wǎng)站 216
12.2.3 設(shè)計可后退畫板 220
12.3 在線練習(xí) 222
第13 章 安裝jQuery Mobile 223
視頻講解：4 分鐘
13.1 認(rèn)識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è)計個移動頁面 228
第14 章 視圖 230
視頻講解：42 分鐘
14.1 設(shè)計頁面 231
14.1.1 定義單頁視圖 231
14.1.2 定義多頁視圖 232
14.2 設(shè)計對話框 234
14.2.1 定義對話框 234
14.2.2 關(guān)閉對話框 235
14.3 設(shè)計彈出頁 236
14.4 應(yīng)用彈出頁 237
14.4.1 彈出菜單 237
14.4.2 彈出表單 239
14.4.3 彈出對話框 240
14.4.4 彈出圖片 241
14.4.5 彈出視頻 243
14.5 設(shè)置彈出頁 246
14.5.1 顯示位置 246
14.5.2 切換動畫 248
14.5.3 主題樣式 248
14.5.4 關(guān)閉按鈕 249
14.6 案例實戰(zhàn) 251
14.6.1 設(shè)計電子閱讀器 251
14.6.2 設(shè)計論壇界面 254
14.6.3 設(shè)計記事本 255
14.6.4 設(shè)計彈出框 257
14.6.5 設(shè)計視圖樣式 258
14.6.6 設(shè)計視圖切換方式 260
14.6.7 設(shè)計相冊視圖 262
第15 章 移動布局 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è)置選項 271
15.2.5 設(shè)置事件 275
15.3 折疊組 276
15.4 移動表格 277
15.4.1 定義回流表格 277
15.4.2 定義字段切換表格 278
15.5 滑動面板 279
15.6 案例實戰(zhàn) 281
15.6.1 設(shè)計課程表 281
15.6.2 設(shè)計九宮格 283
15.6.3 設(shè)計通訊錄 284
15.6.4 設(shè)計好友列表 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 添加過濾文本框 296
16.6 優(yōu)化列表 299
16.6.1 插頁列表 299
16.6.2 折疊列表 300
16.6.3 自動分類列表 302
16.7 案例實戰(zhàn) 304
16.7.1 設(shè)計登錄表單 304
16.7.2 設(shè)計產(chǎn)品列表頁 305
16.7.3 設(shè)計新聞列表頁 307
16.7.4 設(shè)計播放列表 309
16.7.5 設(shè)計通訊錄 311
第17 章 欄目構(gòu)件 313
視頻講解：30 分鐘
17.1 標(biāo)題欄 314
17.1.1 定義標(biāo)題欄 314
17.1.2 定義按鈕位置 314
17.2 頁腳欄 316
17.2.1 定義頁腳欄 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è)置選項 326
17.4.4 設(shè)置方法和事件 326
17.5 案例實戰(zhàn) 328
17.5.1 設(shè)計播放器 328
17.5.2 設(shè)計按鈕組 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 定義選項 338
18.6.3 定義方法 339
18.7 自定義按鈕 340
18.7.1 自定義按鈕圖標(biāo) 340
18.7.2 文本換行顯示 341
18.8 案例實戰(zhàn) 341
第19 章 表單組件 343
視頻講解：34 分鐘
19.1 使用表單 344
19.2 使用文本框 345
19.3 使用單選按鈕 346
19.4 使用復(fù)選框 348
19.5 使用滑塊 350
19.6 使用開關(guān) 353
19.7 使用菜單 354
19.7.1 定義下拉菜單 354
19.7.2 定義列表框 357
19.7.3 設(shè)置選項分組 359
19.7.4 設(shè)置禁用選項 360
19.8 設(shè)置表單屬性 360
19.8.1 禁用表單 361
19.8.2 隱藏標(biāo)簽 361
19.8.3 定義迷你表單 362
19.9 案例實戰(zhàn) 363
19.9.1 設(shè)計驗證表單 363
19.9.2 設(shè)計上傳表單 364
19.9.3 設(shè)計登錄表單 365
19.9.4 設(shè)計調(diào)查表單 367
19.9.5 設(shè)計設(shè)置表單 368
19.9.6 設(shè)計彈出表單 369
第20 章 主題樣式 371
視頻講解：18 分鐘
20.1 jQuery Mobile主題 372
20.2 使用主題 372
20.3 自定義主題 375
20.4 使用ThemeRoller 377
20.4.1 認(rèn)識ThemeRoller 377
20.4.2 設(shè)置ThemeRoller 378
20.4.3 應(yīng)用自定義色版 379
20.5 案例實戰(zhàn) 381
20.5.1 定義多視圖主題 381
20.5.2 設(shè)計計算器 382
20.5.3 設(shè)計鍵盤 384
第21 章 腳本開發(fā) 387
視頻講解：39 分鐘
21.1 自定義事件 388
21.1.1 觸摸事件 388
21.1.2 翻轉(zhuǎn)事件 390
21.1.3 滾屏事件 392
21.1.4 頁面事件 393
21.2 調(diào)用方法 395
21.2.1 轉(zhuǎn)換路徑 395
21.2.2 比較域名 396
21.2.3 縱向滾動 397
21.3 HTML5應(yīng)用 399
21.3.1 離線訪問 399
21.3.2 使用Web Storage傳遞參數(shù) 400
21.3.3 HTML5畫板 401
21.4 配置jQuery Mobile 402
21.5 案例實戰(zhàn) 404
21.5.1 偵測用戶動作 404
21.5.2 劃動面板 405
21.5.3 頁面初始化 406
21.5.4 以GET方式傳遞參數(shù) 408
21.5.5 自定義加載消息 409
21.5.6 管理加載消息 411
第22 章 發(fā)布移動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 測試工具 419
22.2.6 通過npm安裝Cordova.. 420
22.2.7 設(shè)置Android模擬器 421
22.3 將網(wǎng)頁轉(zhuǎn)換成Android APP 422
第23 章 實戰(zhàn)開發(fā)：移動版記事本項目 424
視頻講解：32 分鐘
23.1 項目分析 425
23.2 框架設(shè)計 425
23.3 制作主頁面 426
23.4 制作列表頁 430
23.5 制作詳細(xì)頁 433
23.6 制作修改頁 435
23.7 制作添加頁 439
23.8 小結(jié) 443
第24 章 實戰(zhàn)開發(fā)：移動博客項目 444
視頻講解：22 分鐘
24.1 項目分析 445
24.2 主頁設(shè)計 445
24.3 列表頁設(shè)計 447
24.4 內(nèi)容頁設(shè)計 449
24.5 后臺開發(fā) 451
24.5.1 設(shè)計數(shù)據(jù)庫 451
24.5.2 連接數(shù)據(jù)庫 453
24.5.3 首頁功能實現(xiàn) 455
24.5.4 列表頁功能實現(xiàn) 456
24.5.5 內(nèi)容頁功能實現(xiàn) 459
24.6 小結(jié) 463