第1篇　基础知识

第1章　步入HTML 5移动开发新世界 002

◎ 本章教学微视频：24个  34分钟

1.1  HTML 5概述 002

1.1.1  HTML 5的由来 002

1.1.2  XML及XHTML 003

1.1.3  HTML 5能做什么 003

1.1.4  HTML 5的标签特性 004

1.2  熟悉HTML 5的特殊之处 004

1.3  在iOS和Android设备中使用

         HTML 5 004

1.4  HTML 5移动开发辅助工具 004

1.4.1  Animatron移动开发软件 004

1.4.2  Lungo移动开发软件 005

1.4.3  DevExtreme移动开发软件 005

1.4.4  RazorFlow移动开发软件 006

1.4.5  Literally Canvas移动开发软件 006

1.5  HTML 5移动开发编辑器 006

1.5.1  程序员必备神器——

               Sublime Text 3 006

1.5.2  可配置的编辑器——Atom 007

1.5.3  微软良心之作——VS Code 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章　HTML 5快速上手 026

◎ 本章教学微视频：22个  28分钟

2.1  HTML 5的语法结构 026

2.1.1  文档类型说明 027

2.1.2  HTML标记 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.2  HTML 5的新技术改进 030

2.2.1  新增多个元素 030

2.2.2  新增多条属性 031

2.2.3  Video和Audio 032

2.2.4  2D/3D制图特性 032

2.2.5  浏览器支持特性 032

2.2.6  本地存储特性 032

2.2.7  本地SQL数据 033

2.2.8  WebSocket技术 033

2.2.9  Web Worker技术 033

2.2.10  SVG新特性 033

2.2.11  地理地位特性 034

2.2.12  拖放API新特性 034

2.3  HTML 5给移动Web开发带来的

        优势 035

2.3.1  HTML 5包含了性能优良的API 035

2.3.2  HTML 5便捷的开发环境 035

2.3.3  备受青睐的Web应用程序 035

2.4  就业面试技巧与解析 036

2.4.1  面试技巧与解析（一） 036

2.4.2  面试技巧与解析（二） 036

第3章　使用HTML 5设计移动页面结构 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.1  contenteditable属性 051

3.6.2  data-*属性 051

3.6.3  draggable属性 052

3.6.4  spellcheck属性 053

3.7  就业面试技巧与解析 054

3.7.1  面试技巧与解析（一） 054

3.7.2  面试技巧与解析（二） 054

第4章　使用HTML 5设计移动页面表单 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.1  url类型 058

4.3.2  tel类型 059

4.3.3  color类型 060

4.3.4  email类型 060

4.3.5  range类型 061

4.3.6  search类型 062

4.3.7  number类型 062

4.3.8  datepickers类型 063

4.4  表单的属性 066

4.4.1  <form>新属性 066

4.4.2  <input>新属性 068

4.5  表单的验证 072

4.5.1  认识表单验证 072

4.5.2  CheckValidity()验证 073

4.5.3  SetCustomValidity()验证 074

4.6  典型案例——制作用户反馈页面 075

4.7  就业面试技巧与解析 076

4.7.1  面试技巧与解析（一） 076

4.7.2  面试技巧与解析（二） 076

第5章　使用HTML 5绘制移动页面元素 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.1  CSS 3简介 107

6.2  CSS 3的核心概念 108

6.2.1  CSS 3的语法结构 108

6.2.2  盒模型 108

6.2.3  CSS 3的编写方法 109

6.3  CSS 3选择器的应用 111

6.3.1  标签选择器 111

6.3.2  类选择器 112

6.3.3  ID选择器 113

6.3.4  属性选择器 113

6.3.5  子选择器 114

6.4  调用CSS 3的方式 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章　使用CSS 3设计移动页面样式 121

◎ 本章教学微视频：20个  114分钟

7.1  和图片说再见 121

7.1.1  背景和边框 121

7.1.2  渐变和阴影 126

7.2  CSS 3布局之道 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.1  CSS 3变形模块 144

7.4.2  CSS过渡属性 147

7.4.3  CSS动画属性 149

7.5  响应式页面设计 150

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

7.5.2  从media到media queries 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章　设计Web App页面布局 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.1  iScroll页面结构下的侧边栏 164

8.3.2  iScroll页面结构下的封面图 165

8.3.3  iScroll对内容刷新的支持 167

8.4  等比缩放布局 168

8.5  viewport/meta标签 169

8.6  rem/vw的使用 172

8.6.1  使用rem响应设计 172

8.6.2  VW视窗宽度百分比 175

8.7  移动Web特别样式处理 176

8.8  就业面试技巧与解析 178

8.8.1  面试技巧与解析（一） 178

8.8.2  面试技巧与解析（二） 178

第9章　原生JavaScript交互功能开发 179

◎ 本章教学微视频：41个  146分钟

9.1  JavaScript基础语法 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.1  while循环 184

9.2.2  do/while循环 184

9.2.3  for循环 184

9.2.4  for/in循环 185

9.2.5  continue和break 185

9.3  数组与函数 186

9.3.1  数组 186

9.3.2  函数 187

9.4  String与Date 188

9.4.1  String对象 188

9.4.2  Date对象 189

9.5  BOM与DOM 192

9.5.1  BOM浏览器对象模型 192

9.5.2  DOM文档对象模型 194

9.6  事件 196

9.6.1  事件对象 196

9.6.2  事件类型 197

9.6.3  事件流 199

9.7  拖动效果 201

9.8  cookie存储 203

9.8.1  cookie简介 203

9.8.2  cookie分类 204

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

　　　　　　　 删除 204

9.8.4  cookie属性 205

9.8.5  cookie案例 206

9.9  正则表达式 208

9.9.1  定义正则表达式对象 208

9.9.2  正则表达式——传参 209

9.9.3  正则表达式常用方法 209

9.9.4  元字符和修饰符 210

9.10  Ajax技术 212

9.10.1  Ajax简介 212

9.10.2  创建Ajax对象 213

9.10.3  Ajax请求和响应 213

9.10.4  onreadystatechange事件 214

9.10.5  Ajax案例 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.1  jQuery框架介绍 219

10.1.1  jQuery的选择器 220

10.1.2  jQuery创建DOM节点 220

10.1.3  jQuery添加DOM节点 220

10.1.4  jQuery操作DOM属性 221

10.1.5  jQuery操作DOM样式 221

10.2  jQuery插件扩展原理及自定制设计 221

10.3  时间轴特效 223

10.4  tab页面切换效果 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.2  ng-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.1  ng-repeat 252

11.2.2  ng-class 253

11.2.3  ng-show和ng-hide 253

11.3  过滤器 254

11.3.1  date过滤器 255

11.3.2  limitTo过滤器 255

11.3.3  filter过滤器 256

11.4  表单验证 257

11.4.1  ngModelController 257

11.4.2  表单验证 258

11.5  服务 259

11.5.1  自定义服务 259

11.5.2  AngularJS提供的服务 260

11.6  模型 263

11.6.1  ng-model指令 263

11.6.2  双向绑定 264

11.6.3  CSS类 264

11.7  事件机制 265

11.8  数据存储 266

11.9  其他 267

11.9.1  Controller as语法 267

11.9.2  安全的依赖注入方法 268

11.10  路由 269

11.11  标准项目结构设计 271

11.11.1  angular-cli环境搭建 271

11.11.2  使用Angular-cli创建项目 272

11.12  就业面试技巧与解析 273

11.12.1  面试技巧与解析（一） 273

11.12.2  面试技巧与解析（二） 274

第3篇  高级应用

第12章  认识jQuery Mobile 276

◎ 本章教学微视频：4个  15分钟

12.1  jQuery Mobile基础 276

12.2  jQuery Mobile操作流程 277

12.2.1  下载移动设备模拟器 277

12.2.2  安装jQuery Mobile 279

12.2.3  创建jQuery Mobile页面 280

12.3  就业面试技巧与解析 281

12.3.1  面试技巧与解析（一） 281

12.3.2  面试技巧与解析（二） 281

第13章  jQuery Mobile页面 282

◎ 本章教学微视频：20个  63分钟

13.1  jQuery Mobile 页面结构 282

13.1.1  jQuery Mobile页面的基本架构 282

13.1.2  多容器jQuery Mobile页面 284

13.1.3  jQuery Mobile页面间的链接 284

13.1.4  在jQuery Mobile页面中实现后退

                功能 286

13.1.5  设置后退按钮的文字 288

13.1.6  弹出对话框 289

13.2  预加载和缓存jQuery Mobile

          页面 290

13.2.1  预加载jQuery Mobile页面 290

13.2.2  页面缓存 290

13.3  jQuery Mobile页面头部栏 291

13.3.1  头部栏的基本结构 291

13.3.2  添加按钮 292

13.3.3  设置按钮位置 293

13.4  jQuery Mobile页面导航栏 294

13.4.1  导航栏的基本结构 294

13.4.2  导航栏的图标 296

13.4.3  设置导航栏图标的位置 298

13.5  jQuery Mobile页面尾部栏 300

13.5.1  添加按钮 300

13.5.2  添加表单元素 301

13.6  结构化jQuery Mobile页面内容 301

13.6.1  jQuery Mobile网格布局 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章  jQuery Mobile页面组件 308

◎ 本章教学微视频：16个  42分钟

14.1  jQuery Mobile按钮组件 308

14.1.1  内联按钮 308

14.1.2  按钮组 309

14.2  jQuery Mobile列表组件 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.3  jQuery Mobile表单组件 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章  使用jQuery Mobile主题 323

◎ 本章教学微视频：6个  26分钟

15.1  jQuery Mobile页面主题 323

15.1.1  默认主题 323

15.1.2  修改默认主题 325

15.2  自定义jQuery Mobile页面和工具栏

          主题 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章  使用jQuery Mobile事件 336

◎ 本章教学微视频：8个  27分钟

16.1  页面事件 336

16.1.1  初始化事件 336

16.1.2  加载外部页面事件 338

16.1.3  页面切换事件 339

16.2  触摸事件 341

16.2.1  tap事件和taphold事件 341

16.2.2  swipe事件 342

16.2.3  swipeleft事件和swiperight事件 343

16.3  屏幕滚动事件 344

16.4  屏幕方向改变事件 346

16.5  就业面试技巧与解析 347

16.5.1  面试技巧与解析（一） 347

16.5.2  面试技巧与解析（二） 347

第17章  使用jQuery Mobile插件 348

◎ 本章教学微视频：5个  26分钟

17.1  Camera插件 348

17.2  SwipeBox插件 350

17.3  mmenu插件 351

17.4  DateBox插件 353

17.5  Mobiscroll插件 354

17.6  就业面试技巧与解析 356

17.6.1  面试技巧与解析（一） 356

17.6.2  面试技巧与解析（二） 356

第4篇  项目实践

第18章  HTML 5在游戏开发行业中的应用 358

◎ 本章教学微视频：5个  23分钟

18.1  游戏概述 358

18.2  游戏功能的实现 359

18.2.1  游戏基本的HTML 5结构 359

18.2.2  游戏CSS样式设计 359

18.2.3  JavaScript编程 360

18.3  运行效果 362

第19章  HTML 5在教育开发行业中的应用 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.7  App打包 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.1  index.html文件 386

21.2.2  index.js文件 387

21.2.3  qiao.js文件 389

21.2.4  项目功能知识点详解 396

21.3  运行效果 401