HTML5移動網站與App開發實戰

本書由淺入深出、全面系統地介紹HTML5相關技術及其在移動開發領域的應用。從基本原理到移動頁面優化再到實戰應用，涉及HTML5移動開發領域的絕大部分內容，是一本集理論與實戰於一體的綜合性參考書。本書配套示例源碼與PPT課件。 本書共分15章。第1~9章講解HTML5移動特性，內容包括HTML5移動開發基礎、移動表單、多媒體形式、地理位置定位、離線緩存、Canvas繪圖、CSS3視覺輔助和調用手機設備等，最後剖析移動開發性能優化的一些技巧。第10~11章講解HTML5移動框架jQuery Mobile，內容包括jQuery Mobile這個比較流行的移動框架的用法，以及基於這個框架開發移動便箋App。第12~13章講解HTML5+Vue組合，內容包括Vue框架的特性與安裝使用方法，結合HTML5與Vue開發音樂播放App。第14~15章講解HTML5+React組合，內容包括React框架的介紹及其安裝使用，並結合HTML5與React開發一個可拖曳的待辦事項App。 本書適合所有想深入學習HTML5移動開發技術的初學者閱讀，尤其適合正在應用HTML5做移動項目開發的人員閱讀。對於高等院校相關專業的學生和培訓機構的學員，本書也是一本不可多得的實訓教材。

目    錄

第1章  HTML5移動入門 1

1.1  認識HTML 1

1.1.1  HTML的構成 1

1.1.2  CSS的構成 2

1.1.3  JavaScript的構成 3

1.2  認識HTML5 4

1.2.1  HTML5的發展與理念 5

1.2.2  HTML5和XHTML的對比 6

1.3  製作一個簡單的HTML5移動App 7

1.3.1  開發工具的選擇 7

1.3.2  App代碼的編寫 8

1.3.3  調試運行 Hello App 9

1.4  HTML5的移動特色 9

1.5  本章小結 10

第2章  移動特性1——移動表單 11

2.1  豐富的表單屬性 11

2.2  移動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  範例——創建一個HTML5版的App註冊頁面 17

2.4.1  代碼設計 18

2.4.2  代碼分析 23

2.5  本章小結 24

第3章  移動特性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  添加視頻進度條 35

3.3.3  添加視頻快進慢進按鈕 37

3.3.4  處理帶字幕的視頻 38

3.4  本章小結 40

第4章  移動特性3——地理位置定位 41

4.1  認識地理位置 41

4.1.1  緯度和經度坐標 41

4.1.2  定位數據 42

4.1.3  構建地理位置應用 43

4.2  手機地理位置定位 44

4.3  谷歌地圖的使用 46

4.3.1  追蹤用戶的位置 46

4.3.2  查找路線 50

4.3.3  用戶自定義的地理定位 57

4.4  高德地圖的使用 61

4.5  本章小結 63

第5章  移動特性4——離線緩存 64

5.1  離線緩存應用 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  本章小結 79

第6章  移動特性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  應用Canvas 86

6.2.1  繪制圖形 86

6.2.2  繪制文字 90

6.2.3  顏色漸變 97

6.3  範例——帶特效的相冊App 99

6.4  本章小結 106

第7章  移動特性6——CSS3視覺輔助 107

7.1  CSS3的變化 107

7.2  背景 108

7.3  文字效果 109

7.4  邊框 110

7.5  用戶界面 112

7.6  轉換 114

7.7  過渡 115

7.8  範例——用CSS3畫哆啦A夢 116

7.8.1  頭和臉 116

7.8.2  脖子和鈴鐺 119

7.8.3  身體和四肢 121

7.8.4  讓眼睛動起來 125

7.9  本章小結 126

第8章  移動特性7——調用手機設備 127

8.1  HTML5調用手機攝像頭 127

8.2  HTML5調用手機相冊 130

8.3  HTML5調用手機通訊錄 135

8.4  本章小結 138

第9章  HTML5移動性能優化 139

9.1  HTML5的性能考量 139

9.1.1  瀏覽器性能 139

9.1.2  網絡性能 142

9.1.3  開發效率 143

9.2  加載優化 145

9.2.1  減少HTTP請求 146

9.2.2  充分利用緩存 149

9.2.3  壓縮 150

9.2.4  優化JavaScript加載性能 154

9.2.5  其他加載優化 161

9.3  CSS優化 163

9.3.1  瞭解頁面的渲染過程 164

9.3.2  避免在HTML標簽中寫style屬性 166

9.3.3  正確使用display屬性 166

9.3.4  避免使用CSS表達式 167

9.3.5  不濫用float屬性 167

9.3.6  不濫用Web字體 169

9.3.7  不聲明過多的Font-size 171

9.3.8  優化選擇器的使用 171

9.4  圖片優化 174

9.4.1  使用CSS3代替圖片 174

9.4.2  使用Data URI代替圖片 176

9.4.3  使用SVG代替圖片 180

9.4.4  IconFont與SVG優劣對比 181

9.4.5  使用壓縮圖片 182

9.4.6  使用srcset 183

9.4.7  使用WebP 184

9.5  渲染優化 186

9.5.1  渲染流程 186

9.5.2  使用Viewport加速頁面渲染 187

9.5.3  動畫優化 188

9.5.4  高頻事件優化 191

9.5.5  GPU加速 193

9.6  腳本優化 194

9.6.1  腳本執行優化 194

9.6.2  條件JavaScript 196

9.6.3  緩存DOM操作 198

9.6.4  盡量使用事件委托以避免批量綁定事件 201

9.6.5  盡量使用ID選擇器 203

9.6.6  click事件優化 204

9.7  本章小結 206

第10章  jQuery Mobile移動框架 207

10.1  初步接觸jQuery Mobile 207

10.1.1  jQuery Mobile框架的特點 207

10.1.2  jQuery Mobile框架的安裝與配置 208

10.1.3  創建第一個jQuery Mobile Web App 210

10.2  jQuery Mobile頁面與導航 212

10.2.1  jQuery Mobile單頁面 212

10.2.2  jQuery Mobile多頁面 213

10.2.3  jQuery Mobile對話框頁面 216

10.2.4  jQuery Mobile導航 220

10.2.5  jQuery Mobile加載元素 224

10.2.6  jQuery Mobile動畫效果 227

10.3  jQuery Mobile CSS樣式 230

10.3.1  按鈕樣式 230

10.3.2  圖標樣式 236

10.3.3  網格佈局樣式 240

10.4  jQuery Mobile小部件 243

10.4.1  工具條 243

10.4.2  導航條 246

10.4.3  選項卡 250

10.4.4  面板 253

10.4.5  彈出框 255

10.5  jQuery Mobile表單 258

10.5.1  輸入框 258

10.5.2  復選框 259

10.5.3  單選按鈕 261

10.5.4  下拉列表框 262

10.5.5  滑塊控件 263

10.6  本章小結 265

第11章  jQuery Mobile框架實戰——移動便箋App 266

11.1  項目介紹 266

11.2  項目功能模塊 267

11.2.1  主頁 267

11.2.2  便箋內容瀏覽頁面 269

11.2.3  登錄頁面 270

11.2.4  便箋內容瀏覽頁面（用戶權限） 272

11.2.5  新建便箋內容 274

11.2.6  編輯便箋內容 275

11.2.7  刪除便箋內容 276

11.2.8  清空便箋內容 276

11.3  本章小結 277

第12章  Vue項目開發入門 278

12.1  Vue的初次接觸 278

12.1.1  Vue框架的特點 278

12.1.2  Vue框架的下載安裝 279

12.2  如何快速創建Vue項目（Vue 2和Vue 3） 281

12.2.1  使用腳手架命令快速創建Vue項目 281

12.2.2  通過構建工具Vite創建Vue項目 283

12.3  Vue項目剖析 283

12.3.1  模板 283

12.3.2  樣式設置 287

12.3.3  各組件生命周期 288

12.4  本章小結 289

第13章  HTML5+Vue實戰——音樂App 290

13.1  創建項目 290

13.2  後端接口搭建 292

13.3  前端依賴庫的安裝 293

13.4  首頁（歌曲推薦頁面） 295

13.5  實現歌手分類頁面 303

13.6  歌手所有歌曲頁面實現 306

13.7  歌單分類頁面實現 308

13.8  本章小結 310

第14章  React項目開發入門 311

14.1  React的下載安裝 311

14.1.1  React框架的特點 311

14.1.2  React框架的下載安裝 312

14.2  如何快速創建React項目 315

14.3  React項目剖析 316

14.3.1  模板 316

14.3.2  樣式設置 319

14.3.3  各組件生命周期 321

14.4  本章小結 326

第15章  HTML5+React實戰——可拖曳的待辦事項App 327

15.1  創建項目 327

15.2  創建待辦事項子組件 329

15.3  待辦事項子組件 331

15.4  圖標子組件 337

15.5  待辦事項詳情子組件 339

15.6  編輯待辦事項子組件 343

15.7  拖曳刪除待辦事項 347

15.8  本章小結 357