软件开发魔典HTML 5从入门到项目实践(超值版)

第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 元素 037
3.1.2 元素 038
3.1.3 元素 039
3.1.4 元素 039
3.1.5 元素 040
3.1.6 元素 041
3.2 分组元素 041
3.2.1 元素 041
3.2.2 元素 042
3.2.3 元素 043
3.3 文本语义元素 043
3.3.1 元素 043
3.3.2 、与元素 044
3.3.3 元素 045
3.3.4 元素 046
3.4 交互体验元素 046
3.4.1 元素 046
3.4.2 元素 047
3.4.3 元素 048
3.4.4 元素 048
3.5 新多媒体元素 049
3.5.1 元素 049
3.5.2 元素 049
3.5.3 元素 050
3.5.4 元素 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 元素 056
4.2.2 元素 057
4.2.3 元素 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 新属性 066
4.4.2 新属性 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