本书採用“基础知识→核心技术→高级套用→项目实践”结构和“从入门到项目实践”的学习模式进行讲解。全书共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