HTML5移動(dòng)網(wǎng)站與App開發(fā)實(shí)戰(zhàn)

第1章  HTML5移動(dòng)入門 1
1.1  認(rèn)識(shí)HTML 1
1.1.1  HTML的構(gòu)成 1
1.1.2  CSS的構(gòu)成 2
1.1.3  JavaScript的構(gòu)成 3
1.2  認(rèn)識(shí)HTML5 4
1.2.1  HTML5的發(fā)展與理念 5
1.2.2  HTML5和XHTML的對(duì)比 6
1.3  制作一個(gè)簡單的HTML5移動(dòng)App 7
1.3.1  開發(fā)工具的選擇 7
1.3.2  App代碼的編寫 8
1.3.3  調(diào)試運(yùn)行 Hello App 9
1.4  HTML5的移動(dòng)特色 9
1.5  本章小結(jié) 10
第2章  移動(dòng)特性1——移動(dòng)表單 11
2.1  豐富的表單屬性 11
2.2  移動(dòng)Web表單的input類型 13
2.2.1  search類型 13
2.2.2  email類型 13
2.2.3  number類型 14
2.2.4  range類型 15
2.2.5  tel類型 15
2.2.6  url類型 15
2.3  HTML5表單新屬性 16
2.3.1  autocomplete屬性 16
2.3.2  autofocus屬性 17
2.4  范例——創(chuàng)建一個(gè)HTML5版的App注冊(cè)頁面 17
2.4.1  代碼設(shè)計(jì) 18
2.4.2  代碼分析 23
2.5  本章小結(jié) 24
第3章  移動(dòng)特性2——多媒體形式 25
3.1  音頻和視頻 25
3.1.1  音頻和視頻的格式 25
3.1.2  使用audio/video元素 26
3.1.3  音頻和視頻的通信 27
3.2  范例——制作音樂播放器App 29
3.3  范例——制作視頻播放器App 31
3.3.1  普通視頻播放器 32
3.3.2  添加視頻進(jìn)度條 35
3.3.3  添加視頻快進(jìn)慢進(jìn)按鈕 37
3.3.4  處理帶字幕的視頻 38
3.4  本章小結(jié) 40
第4章  移動(dòng)特性3——地理位置定位 41
4.1  認(rèn)識(shí)地理位置 41
4.1.1  緯度和經(jīng)度坐標(biāo) 41
4.1.2  定位數(shù)據(jù) 42
4.1.3  構(gòu)建地理位置應(yīng)用 43
4.2  手機(jī)地理位置定位 44
4.3  谷歌地圖的使用 46
4.3.1  追蹤用戶的位置 46
4.3.2  查找路線 50
4.3.3  用戶自定義的地理定位 57
4.4  高德地圖的使用 61
4.5  本章小結(jié) 63
第5章  移動(dòng)特性4——離線緩存 64
5.1  離線緩存應(yīng)用 64
5.1.1  離線緩存API簡介 64
5.1.2  使用Manifest文件 67
5.1.3  使用ApplicationCache API方法 68
5.1.4  緩存更新示例 68
5.2  離線事件處理 72
5.3  范例——離線貼吧App 75
5.4  本章小結(jié) 79
第6章  移動(dòng)特性5——Canvas繪圖 80
6.1  HTML5的繪圖API 80
6.1.1  什么是Canvas 80
6.1.2  加載Canvas 81
6.1.3  什么是SVG 82
6.1.4  什么是WebGL 84
6.1.5  Paper.js圖形庫 85
6.2  應(yīng)用Canvas 86
6.2.1  繪制圖形 86
6.2.2  繪制文字 90
6.2.3  顏色漸變 97
6.3  范例——帶特效的相冊(cè)App 99
6.4  本章小結(jié) 106
第7章  移動(dòng)特性6——CSS3視覺輔助 107
7.1  CSS3的變化 107
7.2  背景 108
7.3  文字效果 109
7.4  邊框 110
7.5  用戶界面 112
7.6  轉(zhuǎn)換 114
7.7  過渡 115
7.8  范例——用CSS3畫哆啦A夢 116
7.8.1  頭和臉 116
7.8.2  脖子和鈴鐺 119
7.8.3  身體和四肢 121
7.8.4  讓眼睛動(dòng)起來 125
7.9  本章小結(jié) 126
第8章  移動(dòng)特性7——調(diào)用手機(jī)設(shè)備 127
8.1  HTML5調(diào)用手機(jī)攝像頭 127
8.2  HTML5調(diào)用手機(jī)相冊(cè) 130
8.3  HTML5調(diào)用手機(jī)通訊錄 135
8.4  本章小結(jié) 138
第9章  HTML5移動(dòng)性能優(yōu)化 139
9.1  HTML5的性能考量 139
9.1.1  瀏覽器性能 139
9.1.2  網(wǎng)絡(luò)性能 142
9.1.3  開發(fā)效率 143
9.2  加載優(yōu)化 145
9.2.1  減少HTTP請(qǐng)求 146
9.2.2  充分利用緩存 149
9.2.3  壓縮 150
9.2.4  優(yōu)化JavaScript加載性能 154
9.2.5  其他加載優(yōu)化 161
9.3  CSS優(yōu)化 163
9.3.1  了解頁面的渲染過程 164
9.3.2  避免在HTML標(biāo)簽中寫style屬性 166
9.3.3  正確使用display屬性 166
9.3.4  避免使用CSS表達(dá)式 167
9.3.5  不濫用float屬性 167
9.3.6  不濫用Web字體 169
9.3.7  不聲明過多的Font-size 171
9.3.8  優(yōu)化選擇器的使用 171
9.4  圖片優(yōu)化 174
9.4.1  使用CSS3代替圖片 174
9.4.2  使用Data URI代替圖片 176
9.4.3  使用SVG代替圖片 180
9.4.4  IconFont與SVG優(yōu)劣對(duì)比 181
9.4.5  使用壓縮圖片 182
9.4.6  使用srcset 183
9.4.7  使用WebP 184
9.5  渲染優(yōu)化 186
9.5.1  渲染流程 186
9.5.2  使用Viewport加速頁面渲染 187
9.5.3  動(dòng)畫優(yōu)化 188
9.5.4  高頻事件優(yōu)化 191
9.5.5  GPU加速 193
9.6  腳本優(yōu)化 194
9.6.1  腳本執(zhí)行優(yōu)化 194
9.6.2  條件JavaScript 196
9.6.3  緩存DOM操作 198
9.6.4  盡量使用事件委托以避免批量綁定事件 201
9.6.5  盡量使用ID選擇器 203
9.6.6  click事件優(yōu)化 204
9.7  本章小結(jié) 206
第10章  jQuery Mobile移動(dòng)框架 207
10.1  初步接觸jQuery Mobile 207
10.1.1  jQuery Mobile框架的特點(diǎn) 207
10.1.2  jQuery Mobile框架的安裝與配置 208
10.1.3  創(chuàng)建第一個(gè)jQuery Mobile Web App 210
10.2  jQuery Mobile頁面與導(dǎo)航 212
10.2.1  jQuery Mobile單頁面 212
10.2.2  jQuery Mobile多頁面 213
10.2.3  jQuery Mobile對(duì)話框頁面 216
10.2.4  jQuery Mobile導(dǎo)航 220
10.2.5  jQuery Mobile加載元素 224
10.2.6  jQuery Mobile動(dòng)畫效果 227
10.3  jQuery Mobile CSS樣式 230
10.3.1  按鈕樣式 230
10.3.2  圖標(biāo)樣式 236
10.3.3  網(wǎng)格布局樣式 240
10.4  jQuery Mobile小部件 243
10.4.1  工具條 243
10.4.2  導(dǎo)航條 246
10.4.3  選項(xiàng)卡 250
10.4.4  面板 253
10.4.5  彈出框 255
10.5  jQuery Mobile表單 258
10.5.1  輸入框 258
10.5.2  復(fù)選框 259
10.5.3  單選按鈕 261
10.5.4  下拉列表框 262
10.5.5  滑塊控件 263
10.6  本章小結(jié) 265
第11章  jQuery Mobile框架實(shí)戰(zhàn)——移動(dòng)便箋App 266
11.1  項(xiàng)目介紹 266
11.2  項(xiàng)目功能模塊 267
11.2.1  主頁 267
11.2.2  便箋內(nèi)容瀏覽頁面 269
11.2.3  登錄頁面 270
11.2.4  便箋內(nèi)容瀏覽頁面（用戶權(quán)限） 272
11.2.5  新建便箋內(nèi)容 274
11.2.6  編輯便箋內(nèi)容 275
11.2.7  刪除便箋內(nèi)容 276
11.2.8  清空便箋內(nèi)容 276
11.3  本章小結(jié) 277
第12章  Vue項(xiàng)目開發(fā)入門 278
12.1  Vue的初次接觸 278
12.1.1  Vue框架的特點(diǎn) 278
12.1.2  Vue框架的下載安裝 279
12.2  如何快速創(chuàng)建Vue項(xiàng)目（Vue 2和Vue 3） 281
12.2.1  使用腳手架命令快速創(chuàng)建Vue項(xiàng)目 281
12.2.2  通過構(gòu)建工具Vite創(chuàng)建Vue項(xiàng)目 283
12.3  Vue項(xiàng)目剖析 283
12.3.1  模板 283
12.3.2  樣式設(shè)置 287
12.3.3  各組件生命周期 288
12.4  本章小結(jié) 289
第13章  HTML5 Vue實(shí)戰(zhàn)——音樂App 290
13.1  創(chuàng)建項(xiàng)目 290
13.2  后端接口搭建 292
13.3  前端依賴庫的安裝 293
13.4  首頁（歌曲推薦頁面） 295
13.5  實(shí)現(xiàn)歌手分類頁面 303
13.6  歌手所有歌曲頁面實(shí)現(xiàn) 306
13.7  歌單分類頁面實(shí)現(xiàn) 308
13.8  本章小結(jié) 310
第14章  React項(xiàng)目開發(fā)入門 311
14.1  React的下載安裝 311
14.1.1  React框架的特點(diǎn) 311
14.1.2  React框架的下載安裝 312
14.2  如何快速創(chuàng)建React項(xiàng)目 315
14.3  React項(xiàng)目剖析 316
14.3.1  模板 316
14.3.2  樣式設(shè)置 319
14.3.3  各組件生命周期 321
14.4  本章小結(jié) 326
第15章  HTML5 React實(shí)戰(zhàn)——可拖曳的待辦事項(xiàng)App 327
15.1  創(chuàng)建項(xiàng)目 327
15.2  創(chuàng)建待辦事項(xiàng)子組件 329
15.3  待辦事項(xiàng)子組件 331
15.4  圖標(biāo)子組件 337
15.5  待辦事項(xiàng)詳情子組件 339
15.6  編輯待辦事項(xiàng)子組件 343
15.7  拖曳刪除待辦事項(xiàng) 347
15.8  本章小結(jié) 357