第1章 移动互联网时代HTML5概述 1
1.1 移动互联网Web技术发展 1
1.2 HTML5概述 4
1.2.1 HTML5的诞生和发展 4
1.2.2 HTML5新特性 6
1.2.3 跨越浏览器的HTML5 10
1.3 HTML5在移动开发中的应用 11
1.3.1 Web前端开发技术简介 12
1.3.2 移动Web应用发展 14
1.3.3 HTML5移动端开发前景和优势 15
本章小结 16
实践与练习 16
实验指导 16
实验1 使用浏览器下载和查看网页源代码 17
实验2 快速制作简单网页 18
第2章 移动开发工具和开发框架 19
2.1 使用HTML5开发移动端应用程序 19
2.2 PC浏览器中模拟移动开发与测试 21
2.3 主流移动开发工具 22
2.3.1 HBuilder 22
2.3.2 Sublime Text 27
2.3.3 Atom 32
2.3.4 WebStorm 36
2.3.5 Visual Studio Code 40
2.4 HTML5移动Web开发框架 42
2.4.1 jQuery Mobile 42
2.4.2 Sencha Touch 42
2.4.3 Junior 44
2.4.4 其他HTML5移动Web开发框架 45
2.5 案例:使用HBuilder框架设计精美窗体 47
本章小结 48
实践与练习 49
实验指导 49
实验1 使用HBuilder创建MUI框架页面 50
实验2 用jQuery Mobile框架实现框架抽屉布局效果 51
第3章 移动开发常用的HTML5标签 53
3.1 HTML5文件基本标记 53
3.1.1 头部元素 53
3.1.2 标题元素 56
3.1.3 元信息标记 57
3.1.4 页面主体 61
3.1.5 页面注释标记 63
3.2 页面主体标签 63
3.2.1 文字格式 63
3.2.2 跨越浏览器的HTML5 65
3.3 列表 67
3.3.1 有序列表 67
3.3.2 无序列表 67
3.3.3 定义列表 68
3.3.4 菜单列表 68
3.3.5 目录列表 69
3.4 层标记 69
3.4.1 div标签 69
3.4.2 iframe标签 70
3.4.3 layer和ilayer标签 71
3.5 表格 72
3.5.1 标题和表头 72
3.5.2 表格的基本属性 73
3.5.3 表格样式的设定 74
3.6 多媒体 75
3.6.1 audio标签 75
3.6.2 video标签 77
3.7 图像效果 81
3.7.1 图像的基本格式 81
3.7.2 图像属性 82
3.7.3 图像文字和链接 84
3.8 文件与拖放 84
3.8.1 file对象选择文件 84
3.8.2 图像属性blob接口获取文件的类型与大小 86
3.8.3 FileReader接口 87
3.8.4 拖放API 90
3.8.5 实现拖放的步骤 91
3.9 案例:实现购物车功能 93
本章小结 95
实践与练习 96
实验指导 96
实验1 列表——简单的ul标签小应用 97
实验2 iframe——使用iframe实现简单导航栏切换效果 98
实验3 将自己的课表显示在页面上 99
第4章 HTML5高级开发标签 101
4.1 HTML5 canvas概述 101
4.2 canvas标签 101
4.2.1 绘制矩形 102
4.2.2 使用路径绘制图形 102
4.2.3 使用arc绘制弧形 103
4.2.4 填充及填充样式 104
4.2.5 绘制曲线 105
4.2.6 canvas变换及文本 106
4.2.7 渐变 106
4.3 Geolocation(地理定位) 108
4.4 HTML5主要新增标签 109
4.4.1 语义化标记 109
4.4.2 input新增属性 111
4.4.3 button标签 112
4.4.4 HTML5其他新增标签 113
4.4.5 HTML5废除的元素 116
4.5 案例:创建魔方玩具效果 116
本章小结 121
实践与练习 122
实验指导 122
实验1 用canvas绘制一个笑脸图案 122
实验2 用canvas实现简单滤镜效果 124
第5章 HTML5表单设计 126
5.1 表单属性标签 126
5.2 添加类控件 137
5.2.1 文本控件 137
5.2.2 密码域 138
5.2.3 单选按钮 139
5.2.4 复选框 140
5.2.5 普通按钮 141
5.2.6 提交按钮 141
5.2.7 重置按钮 142
5.3 表单输出元素和验证 143
5.3.1 表单的输出元素 143
5.3.2 表单验证 143
5.4 案例:E-M在线注册应用 144
本章小结 146
实践与练习 146
实验指导 146
实验1 CRM系统注册页面实现 147
实验2 QQ登录系统实现 147
第6章 CSS3样式 149
6.1 CSS概述 149
6.2 CSS的属性和背景 149
6.2.1 CSS属性 149
6.2.2 CSS3背景 152
6.3 选择器 155
6.4 CSS的定位 157
6.5 页面设计案例 161
6.6 案例:DIV+CSS精美窗口设计 162
本章小结 166
实践与练习 167
实验指导 167
实验1 创建手风琴效果 167
实验2 仿九宫格排列的按钮组 168
第7章 JavaScript基础 169
7.1 JavaScript概述 169
7.2 JS基础元素和功能 170
7.2.1 JS注释 170
7.2.2 JS输出 171
7.2.3 JS运算符 173
7.2.4 流程控制语句 176
7.2.5 JS循环语句 178
7.2.6 JS错误和验证 180
7.3 JS函数与内置对象 182
7.3.1 JS函数 183
7.3.2 JS对象 186
7.4 JS窗口对象 205
7.4.1 window对象 206
7.4.2 document对象 208
7.4.3 timing对象 210
7.4.4 navigator对象 211
7.4.5 history对象 212
7.4.6 location对象 213
7.5 表单交互 214
7.6 Cookie存储信息 217
7.7 案例:在线书店购物车 220
本章小结 223
实践与练习 223
实验指导 225
实验1 JS编程环境及代码调试方法 225
实验2 用JS实现在线电子商务购物 226
第8章 移动框架jQuery Mobile 228
8.1 实现第一个Hello World 228
8.2 UI页面设计 231
8.2.1 页面与视图 232
8.2.2 基本控件 235
8.2.3 列表 238
8.2.4 工具栏 247
8.3 动态事件 252
8.3.1 表单实现 252
8.3.2 实现的工具和方法 259
8.3.3 Event事件 264
8.4 案例:唱片购买 270
本章小结 275
实践与练习 276
实验指导 277
实验1 基于jQuery Mobile的简单的记事本 277
实验2 基于jQuery Mobile的全键盘界面 278
第9章 HBuilder开发工具 279
9.1 移动开发工具概述 279
9.2 实现第一个Hello World程序 281
9.3 MUI框架实现 283
9.3.1 主要的UI组件 285
9.3.2 窗口管理 289
9.3.3 事件管理 291
9.3.4 刷新加载 294
9.4 设计自己的HBuild程序 296
9.4.1 需求分析 296
9.4.2 App设计 297
9.5 案例:使用AJAX实现App与服务器之间的交互 307
本章小结 308
实践与练习 309
实验指导 309
实验1 掌握MUI框架的实现及其相应组件的功能 310
实验2 设计App,完善用户体验 311
第10章 综合实例——C2C交易平台前端设计 313
10.1 需求分析 313
10.2 系统功能模块设计 313
10.3 开发环境 314
10.4 前端UI设计 314
10.4.1 材料准备 314
10.4.2 项目准备 316
10.4.3 移动端设计 317
10.4.4 流程设计 318
10.4.5 商品展示模块 318
10.4.6 购物车设计 320
10.4.7 登录模块 325
10.4.8 订单功能模块 329
10.4.9 联系功能模块 334
本章小结 335
实践与练习 335
参考文献 336