HTML 5 從入門到項目實踐

《HTML 5 從入門到項目實踐》是2019年2月1日出版的圖書，作者是聚慕課教育研發中心。

基本介紹

• 中文名：HTML 5 從入門到項目實踐
• 作者：聚慕課教育研發中心
• 出版時間：2019年2月1日
• ISBN：9787302514336
• 定價：79.9 元
• 印次：1-1
• 印刷日期：2018.12.26

內容簡介

本書採用“基礎知識→核心技術→高級套用→項目實踐”結構和“從入門到項目實踐”的學習模式進行講解。全書共4篇21章。首先，講解了HTML 5和CSS3的基本知識，包括HTML 5快速上手、使用HTML 5設計移動頁面結構、使用HTML 5設計移動頁面表單、使用HTML 5繪製移動頁面元素、CSS 3樣式入門與基礎語法、使用CSS 3設計移動頁面樣式、設計Web App頁面布局；其次，講解了JavaScript、jQuery框架、AngularJS框架、jQuery Mobile等核心技術。在實踐篇中，介紹了HTML 5在不同行業的套用，通過項目實戰案例，全面展示了項目開發的實踐全過程。

書籍目錄

第1篇　基礎知識

第1章　步入HTML5移動開發新世界 002

◎本章教學微視頻：24個34分鐘

1.1HTML5概述 002

1.1.1HTML5的由來 002

1.1.2XML及XHTML 003

1.1.3HTML5能做什麼 003

1.1.4HTML5的標籤特性 004

1.2熟悉HTML5的特殊之處 004

1.3在iOS和Android設備中使用

HTML5 004

1.4HTML5移動開發輔助工具 004

1.4.1Animatron移動開發軟體 004

1.4.2Lungo移動開發軟體 005

1.4.3DevExtreme移動開發軟體 005

1.4.4RazorFlow移動開發軟體 006

1.4.5LiterallyCanvas移動開發軟體 006

1.5HTML5移動開發編輯器 006

1.5.1程式設計師必備神器——

SublimeText3 006

1.5.2可配置的編輯器——Atom 007

1.5.3微軟良心之作——VSCode 007

1.5.4流行的集成開發環境——

HBuilder 008

1.6配置移動開發環境 008

1.7開發移動網站基礎 020

1.7.1移動設備螢幕適配 020

1.7.2移動用戶需要的內容 020

1.7.3使用的HTML、CSS及JavaScript

是否有效且簡潔 021

1.7.4是否使用獨立域名 022

1.7.5網站需要通過怎樣的測試 022

1.8測試工具 023

1.8.1仿真器與模擬器 023

1.8.2線上測試模擬器 024

1.8.3軟體自動化測試 024

1.9就業面試技巧與解析 025

1.9.1面試技巧與解析（一） 025

1.9.2面試技巧與解析（二） 025

第2章　HTML5快速上手 026

◎本章教學微視頻：22個28分鐘

2.1HTML5的語法結構 026

2.1.1文檔類型說明 027

2.1.2HTML標記 027

2.1.3頭標記head 027

2.1.4標題標記title 027

2.1.5元信息標記meta 028

2.1.6網頁的主體標記 029

2.1.7頁面注釋標記<!----> 030

2.2HTML5的新技術改進 030

2.2.1新增多個元素 030

2.2.2新增多條屬性 031

2.2.3Video和Audio 032

2.2.42D/3D製圖特性 032

2.2.5瀏覽器支持特性 032

2.2.6本地存儲特性 032

2.2.7本地SQL數據 033

2.2.8WebSocket技術 033

2.2.9WebWorker技術 033

2.2.10SVG新特性 033

2.2.11地理地位特性 034

2.2.12拖放API新特性 034

2.3HTML5給移動Web開發帶來的

優勢 035

2.3.1HTML5包含了性能優良的API 035

2.3.2HTML5便捷的開發環境 035

2.3.3備受青睞的Web應用程式 035

2.4就業面試技巧與解析 036

2.4.1面試技巧與解析（一） 036

2.4.2面試技巧與解析（二） 036

第3章　使用HTML5設計移動頁面結構 037

◎本章教學微視頻：25個54分鐘

3.1結構元素 037

3.1.1<header>元素 037

3.1.2<nav>元素 038

3.1.3<section>元素 039

3.1.4<article>元素 039

3.1.5<aside>元素 040

3.1.6<footer>元素 041

3.2分組元素 041

3.2.1<hgroup>元素 041

3.2.2<figure>元素 042

3.2.3<figcaption>元素 043

3.3文本語義元素 043

3.3.1<mark>元素 043

3.3.2<rp>、<rt>與<ruby>元素 044

3.3.3<time>元素 045

3.3.4<wbr>元素 046

3.4互動體驗元素 046

3.4.1<details>元素 046

3.4.2<meter>元素 047

3.4.3<progress>元素 048

3.4.4<summary>元素 048

3.5新多媒體元素 049

3.5.1<audio>元素 049

3.5.2<video>元素 049

3.5.3<source>元素 050

3.5.4<embed>元素 050

3.6新增全局屬性 051

3.6.1contenteditable屬性 051

3.6.2data-*屬性 051

3.6.3draggable屬性 052

3.6.4spellcheck屬性 053

3.7就業面試技巧與解析 054

3.7.1面試技巧與解析（一） 054

3.7.2面試技巧與解析（二） 054

第4章　使用HTML5設計移動頁面表單 055

◎本章教學微視頻：19個55分鐘

4.1認識表單 055

4.1.1表單概述 055

4.1.2表單的基本結構 056

4.2新增表單元素 056

4.2.1<datalist>元素 056

4.2.2<keygen>元素 057

4.2.3<output>元素 058

4.3表單的輸入類型 058

4.3.1url類型 058

4.3.2tel類型 059

4.3.3color類型 060

4.3.4email類型 060

4.3.5range類型 061

4.3.6search類型 062

4.3.7number類型 062

4.3.8datepickers類型 063

4.4表單的屬性 066

4.4.1<form>新屬性 066

4.4.2<input>新屬性 068

4.5表單的驗證 072

4.5.1認識表單驗證 072

4.5.2CheckValidity()驗證 073

4.5.3SetCustomValidity()驗證 074

4.6典型案例——製作用戶反饋頁面 075

4.7就業面試技巧與解析 076

4.7.1面試技巧與解析（一） 076

4.7.2面試技巧與解析（二） 076

第5章　使用HTML5繪製移動頁面元素 077

◎本章教學微視頻：23個104分鐘

5.1什麼是canvas 077

5.2繪製基本形狀 078

5.2.1繪製矩形 078

5.2.2繪製圓形 079

5.2.3繪製直線 080

5.2.4繪製貝濟埃曲線 081

5.2.5繪製帶陰影的圖形 082

5.3繪製顏色漸變 083

5.3.1線性顏色漸變 083

5.3.2徑向顏色漸變 084

5.4圖形變換和組合 084

5.4.1圖形平移 085

5.4.2圖形縮放 085

5.4.3圖形旋轉 086

5.4.4矩陣變換 087

5.4.5圖形組合 088

5.5圖片的常用操作 090

5.5.1繪製圖片 090

5.5.2平鋪圖片 093

5.5.3裁剪圖片 095

5.5.4像素處理 096

5.6繪製文本元素 097

5.6.1繪製普通文字 097

5.6.2繪製陰影文本 098

5.7繪製動畫特效 100

5.7.1了解動畫 100

5.7.2繪製動態閃動線條 100

5.7.3繪製動態頁面時鐘 101

5.8典型案例——繪製移動頁面素材 104

5.9就業面試技巧與解析 106

5.9.1面試技巧與解析（一） 106

5.9.2面試技巧與解析（二） 106

第6章　CSS樣式入門與基礎語法 107

◎本章教學微視頻：14個38分鐘

6.1CSS3簡介 107

6.2CSS3的核心概念 108

6.2.1CSS3的語法結構 108

6.2.2盒模型 108

6.2.3CSS3的編寫方法 109

6.3CSS3選擇器的套用 111

6.3.1標籤選擇器 111

6.3.2類選擇器 112

6.3.3ID選擇器 113

6.3.4屬性選擇器 113

6.3.5子選擇器 114

6.4調用CSS3的方式 115

6.4.1行內樣式 115

6.4.2內嵌樣式 115

6.4.3連結樣式 116

6.4.4導入樣式 117

6.5典型案例——製作移動網頁導航選單 118

6.6就業面試技巧與解析 120

6.6.1面試技巧與解析（一） 120

6.6.2面試技巧與解析（二） 120

第7章　使用CSS3設計移動頁面樣式 121

◎本章教學微視頻：20個114分鐘

7.1和圖片說再見 121

7.1.1背景和框線 121

7.1.2漸變和陰影 126

7.2CSS3布局之道 131

7.2.1負邊距與浮動 131

7.2.2自定義字型 132

7.2.3柵格系統與多列布局 134

7.3彈性盒子布局 136

7.3.1盒子布局取向 136

7.3.2盒子布局順序 138

7.3.3盒子布局位置 139

7.3.4盒子彈性空間 140

7.3.5管理盒子空間 141

7.3.6空間溢出管理 143

7.4讓頁面動起來 144

7.4.1CSS3變形模組 144

7.4.2CSS過渡屬性 147

7.4.3CSS動畫屬性 149

7.5回響式頁面設計 150

7.5.1PC端常用頁面布局模式 150

7.5.2從media到mediaqueries 151

7.5.3回響式柵格系統 153

7.5.4移動優先理念 155

7.5.5其他細節 155

7.6就業面試技巧與解析 156

7.6.1面試技巧與解析（一） 156

7.6.2面試技巧與解析（二） 156

第2篇　核心技術

第8章　設計WebApp頁面布局 158

◎本章教學微視頻：12個67分鐘

8.1移動端頁面設計規範 158

8.2頁面視圖 159

8.2.1單頁面圖層布局 159

8.2.2側邊欄頁面布局 159

8.2.3封面圖頁面布局 160

8.2.4多視圖頁面布局 162

8.3基於iScroll的多視圖布局 163

8.3.1iScroll頁面結構下的側邊欄 164

8.3.2iScroll頁面結構下的封面圖 165

8.3.3iScroll對內容刷新的支持 167

8.4等比縮放布局 168

8.5viewport/meta標籤 169

8.6rem/vw的使用 172

8.6.1使用rem回響設計 172

8.6.2VW視窗寬度百分比 175

8.7移動Web特別樣式處理 176

8.8就業面試技巧與解析 178

8.8.1面試技巧與解析（一） 178

8.8.2面試技巧與解析（二） 178

第9章　原生JavaScript互動功能開發 179

◎本章教學微視頻：41個146分鐘

9.1JavaScript基礎語法 179

9.1.1字母大小寫 180

9.1.2變數 180

9.1.3常量 180

9.1.4數據類型 180

9.1.5關鍵字 181

9.1.6轉義字元 181

9.1.7運算符 181

9.1.8注釋 183

9.1.9字面量 183

9.2循環語句 183

9.2.1while循環 184

9.2.2do/while循環 184

9.2.3for循環 184

9.2.4for/in循環 185

9.2.5continue和break 185

9.3數組與函式 186

9.3.1數組 186

9.3.2函式 187

9.4String與Date 188

9.4.1String對象 188

9.4.2Date對象 189

9.5BOM與DOM 192

9.5.1BOM瀏覽器對象模型 192

9.5.2DOM文檔對象模型 194

9.6事件 196

9.6.1事件對象 196

9.6.2事件類型 197

9.6.3事件流 199

9.7拖動效果 201

9.8cookie存儲 203

9.8.1cookie簡介 203

9.8.2cookie分類 204

9.8.3cookie的創建、查找、修改和

刪除 204

9.8.4cookie屬性 205

9.8.5cookie案例 206

9.9正則表達式 208

9.9.1定義正則表達式對象 208

9.9.2正則表達式——傳參 209

9.9.3正則表達式常用方法 209

9.9.4元字元和修飾符 210

9.10Ajax技術 212

9.10.1Ajax簡介 212

9.10.2創建Ajax對象 213

9.10.3Ajax請求和回響 213

9.10.4onreadystatechange事件 214

9.10.5Ajax案例 214

9.11面向對象基礎 216

9.11.1認識對象 216

9.11.2對象的方法 217

9.11.3原型鏈 217

9.12就業面試技巧與解析 218

9.12.1面試技巧與解析（一） 218

9.12.2面試技巧與解析（二） 218

第10章　jQuery經典互動特效開發 219

◎本章教學微視頻：16個84分鐘

10.1jQuery框架介紹 219

10.1.1jQuery的選擇器 220

10.1.2jQuery創建DOM節點 220

10.1.3jQuery添加DOM節點 220

10.1.4jQuery操作DOM屬性 221

10.1.5jQuery操作DOM樣式 221

10.2jQuery外掛程式擴展原理及自定製設計 221

10.3時間軸特效 223

10.4tab頁面切換效果 225

10.5滑動門特效 227

10.6焦點圖輪播特效 229

10.7網頁定位導航特效 232

10.8導航條選單效果 234

10.9瀑布流特效 236

10.10彈出層效果 238

10.11倒計時效果 240

10.12抽獎效果 241

10.13就業面試技巧與解析 244

10.13.1面試技巧與解析（一） 244

10.13.2面試技巧與解析（二） 244

第11章AngularJS框架 245

◎本章教學微視頻：26個113分鐘

11.1基礎知識 245

11.1.1表達式 246

11.1.2ng-app指令 246

11.1.3模組 246

11.1.4作用域 247

11.1.5控制器 248

11.1.6$apply與$watch 249

11.2指令 251

11.2.1ng-repeat 252

11.2.2ng-class 253

11.2.3ng-show和ng-hide 253

11.3過濾器 254

11.3.1date過濾器 255

11.3.2limitTo過濾器 255

11.3.3filter過濾器 256

11.4表單驗證 257

11.4.1ngModelController 257

11.4.2表單驗證 258

11.5服務 259

11.5.1自定義服務 259

11.5.2AngularJS提供的服務 260

11.6模型 263

11.6.1ng-model指令 263

11.6.2雙向綁定 264

11.6.3CSS類 264

11.7事件機制 265

11.8數據存儲 266

11.9其他 267

11.9.1Controlleras語法 267

11.9.2安全的依賴注入方法 268

11.10路由 269

11.11標準項目結構設計 271

11.11.1angular-cli環境搭建 271

11.11.2使用Angular-cli創建項目 272

11.12就業面試技巧與解析 273

11.12.1面試技巧與解析（一） 273

11.12.2面試技巧與解析（二） 274

第3篇高級套用

第12章認識jQueryMobile 276

◎本章教學微視頻：4個15分鐘

12.1jQueryMobile基礎 276

12.2jQueryMobile操作流程 277

12.2.1下載移動設備模擬器 277

12.2.2安裝jQueryMobile 279

12.2.3創建jQueryMobile頁面 280

12.3就業面試技巧與解析 281

12.3.1面試技巧與解析（一） 281

12.3.2面試技巧與解析（二） 281

第13章jQueryMobile頁面 282

◎本章教學微視頻：20個63分鐘

13.1jQueryMobile頁面結構 282

13.1.1jQueryMobile頁面的基本架構 282

13.1.2多容器jQueryMobile頁面 284

13.1.3jQueryMobile頁面間的連結 284

13.1.4在jQueryMobile頁面中實現後退

功能 286

13.1.5設定後退按鈕的文字 288

13.1.6彈出對話框 289

13.2預載入和快取jQueryMobile

頁面 290

13.2.1預載入jQueryMobile頁面 290

13.2.2頁面快取 290

13.3jQueryMobile頁面頭部欄 291

13.3.1頭部欄的基本結構 291

13.3.2添加按鈕 292

13.3.3設定按鈕位置 293

13.4jQueryMobile頁面導航欄 294

13.4.1導航欄的基本結構 294

13.4.2導航欄的圖示 296

13.4.3設定導航欄圖示的位置 298

13.5jQueryMobile頁面尾部欄 300

13.5.1添加按鈕 300

13.5.2添加表單元素 301

13.6結構化jQueryMobile頁面內容 301

13.6.1jQueryMobile格線布局 302

13.6.2可摺疊區塊 303

13.6.3可摺疊區塊的嵌套 304

13.6.4可摺疊區塊組 305

13.7就業面試技巧與解析 306

13.7.1面試技巧與解析（一） 306

13.7.2面試技巧與解析（二） 307

第14章jQueryMobile頁面組件 308

◎本章教學微視頻：16個42分鐘

14.1jQueryMobile按鈕組件 308

14.1.1內聯按鈕 308

14.1.2按鈕組 309

14.2jQueryMobile列表組件 310

14.2.1基本列表 310

14.2.2有序列表 311

14.2.3分割列表選項 311

14.2.4對列表項進行分類 312

14.2.5圖示與計數器 313

14.2.6列表項內容格式化處理 313

14.2.7過濾列表項 314

14.3jQueryMobile表單組件 315

14.3.1滑塊 315

14.3.2文本輸入組件 316

14.3.3翻轉切換開關 317

14.3.4單選按鈕 318

14.3.5複選框 319

14.3.6選擇選單 320

14.3.7多項選擇選單 321

14.4就業面試技巧與解析 322

14.4.1面試技巧與解析（一） 322

14.4.2面試技巧與解析（二） 322

第15章使用jQueryMobile主題 323

◎本章教學微視頻：6個26分鐘

15.1jQueryMobile頁面主題 323

15.1.1默認主題 323

15.1.2修改默認主題 325

15.2自定義jQueryMobile頁面和工具列

主題 326

15.2.1自定義頁面主題 326

15.2.2自定義工具列主題 328

15.2.3自定義內容主題 330

15.3使用ThemeRoller創建主題 331

15.4就業面試技巧與解析 335

15.4.1面試技巧與解析（一） 335

15.4.2面試技巧與解析（二） 335

第16章使用jQueryMobile事件 336

◎本章教學微視頻：8個27分鐘

16.1頁面事件 336

16.1.1初始化事件 336

16.1.2載入外部頁面事件 338

16.1.3頁面切換事件 339

16.2觸摸事件 341

16.2.1tap事件和taphold事件 341

16.2.2swipe事件 342

16.2.3swipeleft事件和swiperight事件 343

16.3螢幕滾動事件 344

16.4螢幕方向改變事件 346

16.5就業面試技巧與解析 347

16.5.1面試技巧與解析（一） 347

16.5.2面試技巧與解析（二） 347

第17章使用jQueryMobile外掛程式 348

◎本章教學微視頻：5個26分鐘

17.1Camera外掛程式 348

17.2SwipeBox外掛程式 350

17.3mmenu外掛程式 351

17.4DateBox外掛程式 353

17.5Mobiscroll外掛程式 354

17.6就業面試技巧與解析 356

17.6.1面試技巧與解析（一） 356

17.6.2面試技巧與解析（二） 356

第4篇項目實踐

第18章HTML5在遊戲開發行業中的套用 358

◎本章教學微視頻：5個23分鐘

18.1遊戲概述 358

18.2遊戲功能的實現 359

18.2.1遊戲基本的HTML5結構 359

18.2.2遊戲CSS樣式設計 359

18.2.3JavaScript編程 360

18.3運行效果 362

第19章HTML5在教育開發行業中的套用 363

◎本章教學微視頻：7個21分鐘

19.1項目概述 363

19.2美麗教育頁面的實現 364

19.2.1首頁 364

19.2.2關於賈美麗 365

19.2.3招生要求 366

19.2.4教學理念 367

19.2.5聯繫我們 369

19.3項目運行效果 370

第20章手機端案例——記事本App 371

◎本章教學微視頻：11個30分鐘

20.1項目概述 371

20.1.1功能梳理 371

20.1.2開發環境 372

20.1.3代碼結構 375

20.2項目解析 376

20.2.1首頁 376

20.2.2列表頁面 377

20.2.3查看與刪除 380

20.2.4添加事項 381

20.2.5完成事項 382

20.2.6右滑選單 382

20.2.7App打包 383

20.3運行效果 384

第21章人臉識別案例——年齡小偵探App 385

◎本章教學微視頻：9個37分鐘

21.1項目概述 385

21.1.1功能梳理 385

21.1.2開發環境 386

21.1.3代碼結構 386

21.2項目解析 386

21.2.1index.html檔案 386

21.2.2index.js檔案 387

21.2.3qiao.js檔案 389

21.2.4項目功能知識點詳解 396

21.3運行效果 401