HTML5移動前端開發基礎與實戰（簡體書）

本書較為全面地介紹了HTML5前端開發的核心知識，並簡要介紹了使用HBuilder開發移動App的流程。全書共8章，從企業用人需求的角度出發，本著夠用、實用的原則，介紹了JavaScript、HTML、CSS、移動前端實戰、Swiper插件、JSON數據、jQuery框架、移動App開發等相關知識。通過學習本書，讀者可以掌握HTML5核心要點，能夠運用CSS進行佈局。通過學習Swiper插件，讀者可領會其他插件的用法；通過學習jQuery框架，讀者可領會其他框架的用法。在此基礎上，本書通過講解JSON，幫助讀者理解後臺數據；通過講解HBuilder開發移動App的流程，指引讀者打開通向混合式移動App開發的大門。

曾建華，男，碩士，副教授，深圳職業技術學院教師。具備豐富的軟件開發經驗和教材編寫經驗，精通HTML5、Visual Studio、Delphi、SQL Server開發，長期獨立為企業、高校開發項目並維護運行。

第 1章 開發環境及JavaScript

準備 1

1．1 HTML5相關技術簡介 1

1．1．1 HTML 2

1．1．2 CSS 2

1．1．3 JavaScript 2

1．2 Sublime Text 3及常用插件的

安裝、使用 2

1．2．1 安裝Sublime Text 3

1．2．2 安裝Package Control

組件 5

1．2．3 安裝Emmet插件 7

1．2．4 使用Sublime Text 8

1．2．5 Chrome瀏覽器調試入門 13

1．2．6 Sublime Text常用技巧 13

1．3 安裝及使用HTML-CSS-JS

Prettify插件 18

1．3．1 安裝HTML-CSS-JS

Prettify插件 18

1．3．2 安裝Node．js 18

1．3．3 配置Node．js 22

1．3．4 使用HTML-CSS-JS

Prettify插件 23

1．4 常用JavaScript 25

1．4．1 數據類型 25

1．4．2 流控語句 27

1．4．3 數組 29

1．4．4 document對象 31

1．4．5 函數和事件 33

1．4．6 立即執行函數 34

1．4．7 函數作為參數 35

1．4．8 定時相關函數 36

1．4．9 同步與異步 38

本章思考 39

第 2章 HTML 40

2．1 HTML常用元素 40

2．1．1 label、input、button、

radio、checkbox及ul 40

2．1．2 表單驗證 47

2．2 HTML5新特性 48

2．2．1 多媒體 48

2．2．2 拖放 51

2．2．3 Web存儲 53

2．2．4 使用canvas繪製圖形 56

本章思考 58

第3章 CSS 59

3．1 常用CSS 59

3．1．1 CSS基本語法及使用

CSS的幾種方式 59

3．1．2 多列佈局 63

3．1．3 display屬性：block、

inline、inline-block、

none 65

3．1．4 BOX模型 67

3．1．5 position屬性 69

3．1．6 Float佈局 74

3．1．7 Flex佈局 76

3．1．8 overflow屬性 81

3．1．9 transparent屬性 83

3．1．10 background相關屬性 85

3．1．11 通過JavaScript

操作CSS 87

3．2 CSS3新功能 89

3．2．1 圓角、陰影 89

3．2．2 漸變 93

3．2．3 2D變換：旋轉、傾斜、

縮放、位移 96

3．2．4 3D旋轉 101

3．2．5 動畫（transition） 105

3．2．6 viewport 117

3．2．7 Media Queries 117

本章思考 122

第4章 移動前端實戰 123

4．1 登錄頁面 123

4．1．1 登錄頁面介紹 123

4．1．2 登錄頁面演練 123

4．2 設置頁面 125

4．2．1 設置頁面介紹 125

4．2．2 設置頁面演練 125

4．3 客服頁面 127

4．3．1 客服頁面介紹 128

4．3．2 客服頁面演練 128

4．4 商品詳情頁面 133

4．4．1 商品詳情頁面介紹 133

4．4．2 商品詳情頁面演練 133

4．5 購物車頁面 138

4．5．1 購物車頁面介紹 138

4．5．2 購物車頁面演練 138

4．6 訂單頁面 142

4．6．1 訂單頁面介紹 142

4．6．2 訂單頁面演練 142

本章思考 153

第5章 Swiper插件 154

5．1 Swiper實現輪播 154

5．1．1 Swiper使用步驟 154

5．1．2 Swiper演練 155

5．2 Swiper Animate實現動畫 169

5．2．1 Swiper Animate入門 169

5．2．2 Swiper Animate演練 170

本章思考 175

第6章 JSON數據 176

6．1 JSON入門 176

6．1．1 JSON概述 176

6．1．2 操作JSON數據 177

6．1．3 JSON和字符串類型

相互轉換 179

6．2 JSON實戰 181

6．2．1 使用JSON在線

解析工具 181

6．2．2 在Chrome調試器中

觀察JSON數據 182

6．2．3 根據JSON數據動態

綁定頁面 184

本章思考 186

第7章 jQuery框架 187

7．1 jQuery入門 187

7．1．1 jQuery簡介 187

7．1．2 使用jQuery 187

7．1．3 常用jQuery操作 189

7．2 jQuery Ajax讀取JSON

格式數據文件 195

7．2．1 AJAX簡介 195

7．2．2 jQuery Ajax演練 196

7．3 jQuery實戰：翻牌遊戲 203

7．3．1 翻牌遊戲功能簡介 203

7．3．2 實戰分解 204

本章思考 231

第8章 移動App開發 232

8．1 HBuilder 232

8．1．1 HBuilder特點 232

8．1．2 HBuilder安裝 232

8．2 海馬玩模擬器 234

8．2．1 海馬玩模擬器特點 234

8．2．2 海馬玩模擬器安裝 235

8．3 移動App開發流程 236

8．3．1 創建移動App模板項目 236

8．3．2 帶底部導航、輪播圖和

新聞列表的App 240

本章思考 245