本書(shū)較為全面地介紹HTML5移動(dòng)前端開(kāi)發(fā)的核心知識(shí)，并簡(jiǎn)要介紹使用HBuilderX開(kāi)發(fā)移動(dòng)App的流程。本書(shū)共8個(gè)模塊，從企業(yè)用人需求的角度出發(fā)，本著夠用、實(shí)用的原則，介紹開(kāi)發(fā)環(huán)境及JavaScript、HTML、CSS、前端開(kāi)發(fā)演練、Swiper演練、JSON演練、jQuery及Bootstrap演練、移動(dòng)App演練等相關(guān)知識(shí)。通過(guò)學(xué)習(xí)本書(shū)，讀者可以掌握HTML5核心要點(diǎn)，能夠運(yùn)用CSS進(jìn)行布局。通過(guò)學(xué)習(xí)Swiper插件，讀者可領(lǐng)會(huì)其他插件的用法；通過(guò)學(xué)習(xí)jQuery和Bootstrap框架，讀者可領(lǐng)會(huì)其他框架的用法。在此基礎(chǔ)上，本書(shū)通過(guò)講解JSON，幫助讀者理解后臺(tái)數(shù)據(jù)；通過(guò)講解HBuilderX開(kāi)發(fā)移動(dòng)App的流程，指引讀者打開(kāi)通向混合式移動(dòng)App開(kāi)發(fā)的大門(mén)。

本書(shū)可以作為高職高專(zhuān)院校計(jì)算機(jī)相關(guān)專(zhuān)業(yè)的教材，也可以作為培訓(xùn)機(jī)構(gòu)相關(guān)課程的教材，還可以供廣大計(jì)算機(jī)愛(ài)好者自學(xué)使用。

“十四五”職業(yè)教育國(guó)家規(guī)劃教材

本書(shū)以演練為主，力求目標(biāo)明確地指導(dǎo)讀者學(xué)習(xí)，結(jié)構(gòu)脈絡(luò)清晰。

本書(shū)文字力求簡(jiǎn)練，達(dá)到深入淺出的效果。演練完整實(shí)用，涉及實(shí)際開(kāi)發(fā)中的各個(gè)環(huán)節(jié)。

針對(duì)書(shū)中的重點(diǎn)難點(diǎn)，書(shū)中在相應(yīng)位置加入了相關(guān)的微課，讀者可以掃碼觀看視頻，書(shū)網(wǎng)結(jié)合的講解方式，可以更好地幫助讀者理解晦澀難懂的知識(shí)。

曾建華，深圳職業(yè)技術(shù)學(xué)院副教授。具備豐富的軟件開(kāi)發(fā)經(jīng)驗(yàn)和教材編寫(xiě)經(jīng)驗(yàn)，精通HTML5、Visual Studio、Delphi、SQL Server開(kāi)發(fā)，長(zhǎng)期獨(dú)立為企業(yè)、高校開(kāi)發(fā)項(xiàng)目并維護(hù)運(yùn)行。 首屆全國(guó)教材建設(shè)獎(jiǎng)全國(guó)優(yōu)秀教材二等獎(jiǎng) 主編 主編“十三五”職業(yè)教育國(guó)家規(guī)劃教材3部 深圳職業(yè)技術(shù)學(xué)院金課、一流課程《H5跨平臺(tái)應(yīng)用開(kāi)發(fā)》負(fù)責(zé)人 國(guó)家級(jí)精品資源共享課“大型數(shù)據(jù)庫(kù)（SQL Server）”建設(shè)團(tuán)隊(duì)骨干成員

上篇　知識(shí)引導(dǎo)篇

模塊1　開(kāi)發(fā)環(huán)境及JavaScript　1

1.1　HTML5相關(guān)技術(shù)簡(jiǎn)介　1

1.1.1　HTML簡(jiǎn)介　2

1.1.2　CSS簡(jiǎn)介　2

1.1.3　JavaScript簡(jiǎn)介　2

1.2　Visual Studio Code及擴(kuò)展的安裝、使用　2

1.2.1　安裝Visual Studio Code　3

1.2.2　使用Visual Studio Code　5

1.2.3　瀏覽器調(diào)試入門(mén)　11

1.2.4　Visual Studio Code常用技巧　11

1.3　JavaScript常用語(yǔ)法　13

1.3.1　數(shù)據(jù)類(lèi)型　13

1.3.2　流程控制語(yǔ)句　14

1.3.3　數(shù)組　17

1.3.4　document對(duì)象　18

1.3.5　函數(shù)和事件　20

1.3.6　定時(shí)相關(guān)函數(shù)　21

1.4　ES6　23

1.4.1　let和const　23

1.4.2　解構(gòu)賦值　24

1.4.3　數(shù)組擴(kuò)展　26

1.4.4　剩余運(yùn)算符和擴(kuò)展運(yùn)算符　28

1.4.5　class　29

思考　30

模塊２　HTML　31

2.1　HTML常用元素　31

2.1.1　label、input、button、radio、

checkbox及ul　31

2.1.2　表單驗(yàn)證　38

2.2　HTML5新特性　39

2.2.1　多媒體　39

2.2.2　拖放　41

2.2.3　Web存儲(chǔ)　43

2.2.4　使用canvas繪制圖形　46

思考　48

模塊3　CSS　49

3.1　常用CSS　49

3.1.1　CSS基本語(yǔ)法及使用CSS的幾種方式　49

3.1.2　多列布局　53

3.1.3　display屬性　55

3.1.4　BOX模型　57

3.1.5　position屬性　60

3.1.6　Float布局　64

3.1.7　Flex布局　66

3.1.8　overflow屬性　71

3.1.9　transparent屬性　73

3.1.10　background相關(guān)屬性　75

3.1.11　通過(guò)JavaScript操作CSS　78

3.2　CSS3常用新功能　79

3.2.1　圓角、陰影　79

3.2.2　漸變　83

3.2.3　2D變換　87

3.2.4　3D旋轉(zhuǎn)　92

3.2.5　動(dòng)畫(huà)　96

3.2.6　viewport　107

3.2.7　Media Queries　108

思考　112



下篇　項(xiàng)目實(shí)戰(zhàn)篇



模塊4　前端開(kāi)發(fā)演練　113

4.1　登錄頁(yè)面　113

4.1.1　登錄頁(yè)面介紹　113

4.1.2　登錄頁(yè)面演練　113

4.2　設(shè)置頁(yè)面　115

4.2.1　設(shè)置頁(yè)面介紹　115

4.2.2　設(shè)置頁(yè)面演練　116

4.3　客服頁(yè)面　118

4.3.1　客服頁(yè)面介紹　118

4.3.2　客服頁(yè)面演練　118

4.4　商品詳情頁(yè)面　123

4.4.1　商品詳情頁(yè)面介紹　123

4.4.2　商品詳情頁(yè)面演練　123

4.5　購(gòu)物車(chē)頁(yè)面　128

4.5.1　購(gòu)物車(chē)頁(yè)面介紹　128

4.5.2　購(gòu)物車(chē)頁(yè)面演練　128

4.6　訂單頁(yè)面　132

4.6.1　訂單頁(yè)面介紹　132

4.6.2　訂單頁(yè)面演練　132

4.7　裝修網(wǎng)站首頁(yè)　144

4.7.1　裝修網(wǎng)站首頁(yè)介紹　144

4.7.2　裝修網(wǎng)站首頁(yè)演練　144

思考　152

模塊5　Swiper演練　153

5.1　Swiper實(shí)現(xiàn)輪播效果　153

5.1.1　Swiper使用步驟　153

5.1.2　Swiper演練　154

5.2　Swiper Animate實(shí)現(xiàn)場(chǎng)景動(dòng)畫(huà)　168

5.2.1　Swiper Animate入門(mén)　168

5.2.2　Swiper Animate演練　170

思考　175

模塊6　JSON演練　176

6.1　JSON入門(mén)　176

6.1.1　JSON概述　176

6.1.2　操作JSON數(shù)據(jù)　177

6.1.3　JSON和字符串類(lèi)型

相互轉(zhuǎn)換　178

6.2　JSON實(shí)戰(zhàn)　181

6.2.1　使用JSON在線解析工具　181

6.2.2　在Chrome調(diào)試窗口中觀察JSON數(shù)據(jù)　182

6.2.3　根據(jù)JSON數(shù)據(jù)動(dòng)態(tài)綁定頁(yè)面　183

思考　186

模塊7　jQuery及Bootstrap演練　187

7.1　jQuery　187

7.1.1　jQuery簡(jiǎn)介　187

7.1.2　使用jQuery　188

7.1.3　常用jQuery操作　189

7.1.4　jQuery AJAX讀取JSON數(shù)據(jù)文件　195

7.1.5　jQuery演練：翻牌游戲　203

7.2　Bootstrap　232

7.2.1　Bootstrap簡(jiǎn)介　232

7.2.2　Bootstrap項(xiàng)目演練　232

思考　245

模塊8　移動(dòng)App演練　246

8.1　HBuilderX　246

8.1.1　HBuilderX特點(diǎn)　246

8.1.2　HBuilderX安裝　246

8.2　夜神模擬器　248

8.2.1　夜神模擬器特點(diǎn)　248

8.2.2　夜神模擬器安裝　248

8.3　移動(dòng)App開(kāi)發(fā)流程　250

8.3.1　創(chuàng)建移動(dòng)App模板項(xiàng)目　250

8.3.2　帶底部導(dǎo)航、輪播圖和新聞列表的App　253

思考　258