HTML5 CSS3 jQuery Mobile APP与移动网站设计从入门到精通
作者：新视角文化行编著
出版时间：2018年版
内容简介
本书全面、系统地讲解了HTML5、CSS3和jQuery Mobile相关知识，并涵盖从Web界面设计到移动应用开发的各种技术和知识点，内容由浅入深，讲解通俗易懂，并在知识点介绍过程中配合大量案例进行讲解，以帮助读者提高实战技能。本书共19章，分为3个部分。第一部分是第1～7章，介绍了HTML5各方面的知识点，重点介绍了文本、图像、canvas元素、音频、视频和新型表单等内容；第二部分是第8～14章，主要介绍了CSS3样式各属性的设置和使用方法，重点介绍了CSS3中新增的弹性盒模型、多列布局、动画效果和渐变填充等内容；第三部分是第15～19章，主要介绍了jQuery Mobile的相关知识，重点介绍了jQuery Mobile的页面、主题、组件、事件和插件等内容，并通过实际案例讲解了综合运用HTML5、CSS3和jQuery Mobile开发移动应用的方法和技巧。本书配套下载资源中提供了所有实例的源文件和素材，以及相关的教学视频，适合Web设计与开发的初学者和爱好者自学使用，也适合有一定Web前端开发基础的网页开发人员阅读，同时还可作为计算机培训班和各院校相关专业的教辅用书。
目录
目录
第 1章 从HTML到HTML5 15
1．1 HTML基础 15
1．1．1 HTML概述 15
1．1．2 HTML特性 16
1．1．3 HTML文档结构 16
1．1．4 HTML的基本语法 17
1．1．5 HTML编写注意事项 17
1．2 HTML5基础 18
1．2．1 HTML5概述 18
1．2．2 HTML5文档结构 18
1．2．3 HTML5的优势 19
1．2．4 HTML5精简的头部 20
1．3 HTML文件的编写方式 20
1．3．1 使用记事本编写 20
实战 使用记事本制作HTML页面 20
1．3．2 使用Dreamweaver编写 22
实战 使用Dreamweaver制作HTML页面 23
1．4 HTML5中的标签 25
1．5 关于移动Web应用 28
1．5．1 移动Web应用的发展 28
1．5．2 基于Web的应用开发 28
1．5．3 基于HTML5的移动应用 29
1．5．4 移动应用开发框架 29
1．6 本章小结 30
第 2章 HTML5文字与段落标签 31
2．1 设置文字效果 31
2．1．1 文字样式标签 31
实战 使用标签设置网页文字效果 33
2．1．2 文字加粗和标签 34
2．1．3 文字倾斜和标签 34
2．1．4 文字下划线#标签 34
实战 为文字添加加粗、倾斜和下划线修饰 35
2．1．5 其他文字修饰标签 36
实战 为文字添加上标和删除线 36
2．2 设置段落效果 37
2．2．1 文本分段标签 37
2．2．2 文本分行
标签 37
实战 为网页中的文本进行分段和分行处理 38
2．2．3 标签至标签 39
实战 设置网页文本标题 39
2．2．4 水平线标签 40
实战 在网页中插入水平线 40
2．2．5 文本对齐设置 41
实战 设置网页文本的对齐 41
2．3 创建列表 42
2．3．1 使用标签创建项目列表 42
实战 制作新闻列表 43
2．3．2 使用标签创建编号列表 43
实战 制作编号有序列表 44
2．3．3 使用标签创建定义列表 44
实战 制作复杂的新闻列表 45
2．4 本章小结 46
第3章 HTML5文档结构标签 47
3．1 认识HTML5文档结构 47
3．2 HTML5页面主体内容标签 49
3．2．1 标识文章标签 49
3．2．2 标识章节标签 51
3．2．3 标识导航标签 53
3．2．4 标识辅助内容标签 54
3．2．5 标识文章发布日期标签 55
3．3 页面语义模块标签 55
3．3．1 页眉标签 55
3．3．2 标题分组标签 56
3．3．3 页脚标签 57
3．3．4 联系信息标签 58
3．4 制作文章页面 58
实战 制作设计网站首页面 59
3．5 本章小结 64
第4章 HTML5图像与超链接标签 65
4．1 了解网页中的图像格式 65
4．1．1 网页常用图像格式 65
4．1．2 选择合适的图像格式 66
4．2 插入图像并设置图像属性 67
4．2．1 图像标签 67
实战 在网页中插入图像 67
4．2．2 图像属性设置 68
实战 制作图文混排页面 69
4．3 创建超链接 70
4．3．1 使用标签创建超链接 70
4．3．2 超链接打开方式target属性 70
4．3．3 相对链接和绝对链接 70
实战 为文字和图像设置超链接 71
4．4 创建特殊链接 72
4．4．1 空链接 72
4．4．2 文件下载链接 72
4．4．3 锚点链接 72
4．4．4 脚本链接 73
4．4．5 E-mail链接 73
实战 在网页中创建特殊超链接 73
4．5 本章小结 75
第5章 使用HTML5中的表单元素 76
5．1 关于表单 76
5．1．1 表单域标签 76
5．1．2 标签属性设置 77
5．2 传统表单元素 78
5．2．1 文本域 78
5．2．2 密码域 79
5．2．3 文本区域 79
5．2．4 隐藏域 79
5．2．5 复选框 79
5．2．6 单选按钮 80
5．2．7 选择域 80
5．2．8 文件域 80
5．2．9 按钮 80
5．2．10 图像域 81
实战 制作网站登录表单 81
5．3 关于HTML5新增表单元素 84
5．3．1 HTML5表单的优势 85
5．3．2 浏览器对HTML5表单的支持情况 85
5．3．3 新增表单输入类型 85
实战 制作留言表单页面 88
5．3．4 新增其他表单元素 90
5．4 HTML5新增表单属性 91
5．4．1 form属性 91
5．4．2 formaction属性 91
5．4．3 formmethod、formenctype、formnovalidate、formtarget属性 91
5．4．4 placeholder属性 91
实战 为表单元素设置默认提示内容 92
5．4．5 autofocus属性 93
5．4．6 autocomplete属性 93
5．5 HTML5提供的表单验证属性 93
5．5．1 required属性 93
5．5．2 pattern属性 93
5．5．3 min、max和step属性 94
5．5．4 novalidate属性 94
实战 验证网页中的表单元素 94
5．6 本章小结 95
第6章 使用HTML5画布元素 96
6．1 HTML5新增canvas元素 96
6．1．1 了解canvas元素 96
6．1．2 在网页中插入canvas元素 97
6．1．3 如何使用canvas元素实现绘图 97
6．2 绘制基本图形 98
6．2．1 绘制直线 98
实战 在网页中绘制直线 99
6．2．2 绘制矩形 100
实战 在网页中绘制矩形 101
6．2．3 绘制圆形 102
实战 在网页中绘制圆形 103
6．2．4 绘制三角形 104
实战 在网页中绘制三角形 104
6．2．5 绘制曲线 105
实战 在网页中绘制曲线 107
6．2．6 清除图形 108
实战 清除使用canvas元素所绘制的部分图形 108
6．3 绘制文本 109
6．3．1 使用文本 109
6．3．2 获取文字宽度 110
实战 在网页中绘制文字并获取文字宽度 110
6．4 图形的组合与裁切 112
6．4．1 图形组合 112
6．4．2 使用图像 113
实战 使用canvas元素在网页中绘制图像 114
6．4．3 使用图像模式 115
实战 设置图像平铺效果 115
6．4．4 裁切路径 116
实战 在网页中实现圆形裁切图像效果 117
6．5 图形颜色与样式设置 118
6．5．1 绘制线性渐变 118
实战 在网页中绘制矩形并填充线性渐变 119
6．5．2 绘制径向渐变 120
实战 在网页中绘制圆形并填充径向渐变 120
6．5．3 创建对象阴影 121
实战 为图形和文字添加阴影效果 122
6．6 本章小结 123
第7章 HTML5音频与视频标签 124
7．1 HTML5多媒体基础 124
7．1．1 在线多媒体的发展 124
7．1．2 HTML5音频和视频优势 125
7．1．3 HTML5音频和视频的不足 125
7．1．4 检查浏览器是否支持HTML5音频和视频 126
7．2 使用HTML5音频 126
7．2．1 标签所支持的音频格式 126
7．2．2 使用标签 126
实战 在网页中嵌入音频播放 127
7．3 使用HTML5视频 127
7．3．1 标签所支持的视频格式 128
7．3．2 使用标签 128
实战 在网页中嵌入视频播放 128
7．3．3 使用标签 129
7．4 与标签的属性 130
7．4．1 标签属性 130
7．4．2 元素的接口属性 131
实战 实现网页中视频的快进 133
7．5 与标签的方法和事件 134
7．5．1 接口方法 134
实战 控制视频的播放与暂停 134
7．5．2 接口事件 135
7．5．3 接口事件的使用方法 137
7．5．4 自定义视频播放控制组件 137
实战 自定义视频播放控制组件 137
7．6 本章小结 141
第8章 CSS样式的发展与选择器 142
8．1 CSS样式的发展 142
8．1．1 使用CSS样式的优势 142
8．1．2 CSS1与CSS2概述 143
8．1．3 全新的CSS3 143
8．1．4 浏览器对CSS3的支持情况 143
8．2 CSS样式语法 144
8．2．1 CSS样式基本语法 144
8．2．2 CSS样式规则构成 145
8．2．3 应用CSS样式的4种方式 145
实战 创建并链接外部CSS样式表文件 147
8．3 CSS选择器 149
8．3．1 通配选择器 149
8．3．2 标签选择器 150
实战 创建通配选择器和标签选择器 150
8．3．3 ID选择器 151
8．3．4 类选择器 152
实战 创建ID选择器和类选择器 152
8．3．5 伪类和伪对象选择器 154
实战 创建超链接伪类选择器 155
8．3．6 群组选择器 156
8．3．7 派生选择器 156
实战 创建派生选择器 157
8．4 CSS3新增选择器 158
8．4．1 属性选择器 158
实战 在网页中使用属性选择器 159
8．4．2 结构伪类选择器 160
8．4．3 UI元素状态伪类选择器 160
8．4．4 伪元素选择器 161
实战 在网页中使用伪元素选择器 161
8．5 本章小结 162
第9章 设置文字与段落样式 163
9．1 文字样式 163
9．1．1 字体—font-family属性 163
9．1．2 字体大小—font-size属性 164
9．1．3 字体颜色—color属性 164
实战 设置网页文字基本效果 164
9．1．4 字体粗细—font-weight属性 166
9．1．5 字体样式—font-style属性 166
实战 设置网页文字的加粗和倾斜效果 166
9．1．6 英文字体大小写—text-transform属性 167
实战 设置网页中英文字体大小写 168
9．1．7 文字修饰效果—text-decoration属性 169
实战 为网页文字添加修饰 169
9．1．8 字符间距—letter-spacing属性 170
实战 设置中文字符间距 170
9．2 CSS3新增文本样式属性 171
9．2．1 文本溢出处理—text-overflow属性 171
实战 控制文本溢出效果 171
9．2．2 文本换行—word-wrap和word-break属性 172
实战 控制英文内容强制换行 173
9．2．3 文字阴影—text-shadow属性 174
实战 为网页文字添加阴影效果 174
9．2．4 服务器端字体—@font-face规则 175
实战 在网页中实现特殊字体效果 175
9．3 段落样式 177
9．3．1 行间距—line-height属性 177
9．3．2 段落首行缩进—text-indent属性 177
实战 美化网页中的段落文字 177
9．3．3 水平对齐方式—text-align属性 178
实战 设置文本水平对齐 179
9．3．4 垂直对齐方式—vertical-align属性 179
实战 设置文本垂直对齐 180
9．4 列表样式 181
9．4．1 列表符号—list-style-type属性 181
实战 设置新闻列表效果 182
9．4．2 自定义列表符号—list-style-image属性 183
实战 自定义新闻列表符号 183
9．4．3 定义列表样式 184
实战 设置复杂新闻列表效果 184
9．5 本章小结 185
第 10章 设置背景样式 186
10．1 背景颜色—background-color属性 186
实战 为网页元素设置背景颜色 187
10．2 CSS3新增颜色设置 187
10．2．1 RGBA颜色值 187
实战 使用RGBA方式设置背景颜色 188
10．2．2 HSL颜色值 188
10．2．3 HSLA颜色值 189
实战 使用HSLA方式设置背景颜色 189
10．2．4 元素不透明度—opacity
属性 190
实战 实现网页元素的半透明效果 190
10．2．5 transparent颜色值 191
10．3 CSS3新增渐变背景 191
10．3．1 线性渐变背景 191
实战 为网页设置线性渐变背景颜色 192
10．3．2 径向渐变背景 194
实战 为网页设置径向渐变背景颜色 195
10．4 背景图像样式 195
10．4．1 背景图像—background-image属性 196
10．4．2 背景图像平铺方式—background-repeat属性 196
实战 为网页设置背景图像 196
10．4．3 背景图像位置—background-
position属性 198
实战 定位网页中的背景图像 199
10．4．4 背景图像固定—background-attachment属性 200
实战 固定网页中的背景图像 200
10．5 CSS3新增背景属性 201
10．5．1 多背景图像—background属性 201
实战 为网页设置多个背景图像 201
10．5．2 背景图像大小—background-size属性 202
实战 控制背景图像的大小 202
10．5．3 背景图像原点—background-origin属性 204
实战 控制背景图像开始显示的原点位置 204
10．5．4 背景图像显示区域—background-clip属性 205
实战 控制背景图像的显示区域 205
10．6 本章小结 206
第 11章 设置超链接和边框样式 207
11．1 超链接样式伪类 207
11．1．1 ：link伪类 207
11．1．2 ：hover伪类 208
11．1．3 ：active伪类 208
11．1．4 ：visited伪类 209
实战 设置网页中超链接文字效果 209
11．1．5 按钮式超链接 212
实战 制作网站导航菜单 212
11．2 鼠标指针样式 213
11．2．1 鼠标指针效果—cursor属性 214
11．2．2 设置网页中鼠标效果 214
实战 在网页中实现多种鼠标指针效果 214
11．3 边框样式 215
11．3．1 边框宽度—border-width属性 215
11．3．2 边框样式—border-style属性 216
11．3．3 边框颜色—border-color属性 216
实战 为网页元素添加边框效果 216
11．4 CSS3新增边框属性 218
11．4．1 多边框颜色—border-color属性 218
实战 实现网页元素多色彩边框效果 218
11．4．2 图像边框—border-image属性 219
实战 为网页元素添加图像边框效果 219
11．4．3 圆角边框—border-radius属性 220
实战 在网页中实现圆角边框效果 220
11．5 本章小结 221
第 12章 设置元素的定位与布局属性 222
12．1 元素定位样式 222
12．1．1 position属性 222
12．1．2 相对定位 223
实战 实现网页元素的叠加显示 223
12．1．3 绝对定位 224
实战 网页元素固定在右侧显示 224
12．1．4 固定定位 225
实战 实现网页元素显示在固定的位置 225
12．1．5 浮动定位—float属性 226
实战 制作顺序排列的图像列表 227
12．2 CSS3新增界面设计属性 229
12．2．1 改变元素尺寸—resize属性 229
实战 实现网页元素尺寸可任意缩放 229
12．2．2 轮廓外边框—outline属性 230
实战 为网页元素添加轮廓外边框 231
12．2．3 伪装元素—appearance属性 232
实战 将超链接文字伪装成按钮 233
12．2．4 赋予内容—content属性 233
实战 为网页元素赋予内容 234
12．3 CSS3新增多列布局属性 235
12．3．1 多列布局—columns属性 235
实战 快速将网页内容分为多列 235
12．3．2 列宽度—column-width属性 236
12．3．3 列数—column-count属性 236
12．3．4 列间距—column-gap属性 236
12．3．5 列分栏线—column-rule属性 237
12．3．6 横跨所有列—column-span属性 237
实战 实现网页内容的分栏显示效果 237
12．4 本章小结 239
第 13章 CSS3盒模型 240
13．1 传统CSS盒模型 240
13．1．1 什么是CSS盒模型 240
13．1．2 CSS盒模型要点 241
13．1．3 边距—margin属性 241
13．1．4 边框—border属性 242
13．1．5 填充—padding属性 242
实战 设置网页元素盒模型 242
13．2 CSS3弹性盒模型 244
13．2．1 开启弹性盒模型 245
13．2．2 布局方向—box-orient属性 246
13．2．3 布局顺序—box-direction属性 247
13．2．4 元素位置—box-ordinal-group属性 248
13．2．5 空间分配—box-flex属性 250
13．2．6 对齐方式—box-pack和box-align属性 251
13．2．7 实现网页元素水平和垂直居中对齐 251
实战 实现网页元素水平和垂直居中对齐 251
13．2．8 实现网页元素底部对齐 253
实战 实现网页元素底部对齐 253
13．3 增强的CSS3盒模型 254
13．3．1 元素阴影—box-shadow属性 254
实战 为网页元素添加阴影效果 254
13．3．2 元素尺寸大小—box-sizing属性 255
13．3．3 元素溢出处理—overflow-x和overflow-y属性 256
实战 设置内容溢出处理方式 256
13．4 本章小结 257
第 14章 CSS3动画效果 258
14．1 CSS3变换效果 258
14．1．1 transform属性 258
14．1．2 旋转 259
实战 实现网页元素的旋转 259
14．1．3 缩放 260
实战 实现网页元素的缩放和翻转 260
14．1．4 移动 261
实战 实现网页元素的移动 262
14．1．5 倾斜 263
实战 实现网页元素的倾斜效果 263
14．1．6 矩阵变形 264
14．1．7 定义变形中心点 264
实战 设置网页元素的变形中心点 265
14．1．8 同时使用多个变形函数 266
实战 为网页元素同时应用多个变形效果 266
14．2 CSS3变换过渡效果 267
14．2．1 transition属性 267
14．2．2 过渡效果—transition-property属性 268
14．2．3 过渡时间—transition-duration属性 268
14．2．4 过渡延迟时间—transition-delay属性 268
14．2．5 过渡方式—transition-timing-function属性 268
实战 设置网页元素的变换过渡动画效果 269
14．2．6 制作网页图片交互特效 271
实战 制作网页图片交互特效 271
14．3 CSS3动画效果 273
14．3．1 关键帧动画—@keyframes规则 274
14．3．2 animation属性—实现元素动画效果 274
实战 制作图片移动并旋转的关键帧动画 276
14．4 本章小结 277
第 15章 jQuery和jQuery Mobile基础 278
15．1 了解jQuery 278
15．1．1 jQuery概述 278
15．1．2 引用jQuery函数库的两种方法 279
15．1．3 jQuery基本语法 280
15．1．4 认识jQuery选择器 280
15．1．5 使用jQuery设置CSS样式属性 281
实战 使用jQuery改变列表第 一行效果 281
15．2 了解jQuery Mobile 282
15．2．1 jQuery Mobile概述 282
15．2．2 jQuery Mobile功能特点 283
15．2．3 jQuery Mobile的工作原理 283
15．3 jQuery Mobile操作流程 284
15．3．1 下载移动设备模拟器 284
15．3．2 加载jQuery Mobile函数库 285
15．3．3 创建jQuery Mobile页面 286
实战 制作第 一个jQuery Mobile页面 286
15．3．4 jQuery Mobile页面的基本架构 288
15．4 本章小结 289
第 16章 认识并创建jQuery Mobile页面 290
16．1 认识jQuery Mobile页面 290
16．1．1 多容器jQuery Mobile页面 290
16．1．2 jQuery Mobile页面链接 291
实战 创建jQuery Mobile页面多容器之间链接 291
16．1．3 链接外部jQuery Mobile页面 293
实战 链接外部jQuery Mobile页面 293
16．1．4 实现弹出对话框 294
实战 在jQuery Mobile页面中实现弹出对话框 295
16．2 jQuery Mobile页面头部栏 296
16．2．1 头部栏基本结构 296
16．2．2 在头部栏中添加后退按钮 296
16．2．3 在头部栏中添加其他功能按钮 298
实战 在头部栏中添加按钮实现页面跳转 298
16．2．4 设置按钮位置 300
16．3 jQuery Mobile页面导航栏 302
16．3．1 导航栏基本结构 302
实战 制作jQuery Mobile页面导航栏 302
16．3．2 为导航栏添加图标 304
16．3．3 设置导航栏图标位置 305
16．4 jQuery Mobile页面尾部栏 307
16．4．1 在尾部栏添加按钮 307
实战 制作jQuery Mobile页面尾部栏 307
16．4．2 添加表单元素 308
16．4．3 固定页面头部栏与尾部栏 309
实战 固定jQuery Mobile页面中头部栏和尾部栏的位置 309
16．5 jQuery Mobile页面内容区域 310
16．5．1 布局网格 310
实战 在jQuery Mobile页面中创建布局网格 310
16．5．2 可折叠区块 312
实战 在jQuery Mobile页面中创建可折叠内容 313
16．5．3 可折叠区块的嵌套 314
16．5．4 可折叠区块组 314
16．6 预加载和缓存jQuery Mobile页面 316
16．6．1 预加载jQuery Mobile页面 316
16．6．2 页面缓存 316
16．7 本章小结 316
第 17章 使用jQuery Mobile主题与组件 317
17．1 了解jQuery Mobile主题 317
17．1．1 了解主题 317
17．1．2 默认主题 318
实战 为页面应用默认主题效果 318
17．1．3 修改默认主题 319
17．2 自定义jQuery Mobile页面和工具栏主题 320
17．2．1 自定义页面主题 320
实战 制作APP欢迎页面背景 320
17．2．2 自定义工具栏主题 323
实战 设置APP欢迎页面工具栏 323
17．2．3 自定义内容主题 324
实战 为可折叠区块应用主题 324
17．3 按钮组件 325
17．3．1 内联按钮 325
实战 在jQuery Mobile页面中添加按钮 326
17．3．2 按钮组 327
实战 在jQuery Mobile页面中使用按钮组 327
17．4 列表组件 328
17．4．1 基本列表 328
17．4．2 有序列表 329
17．4．3 开启或禁用列表图标 329
17．4．4 对列表项进行分组 330
实战 制作餐厅列表页面 330
17．4．5 分割列表选项 334
17．4．6 图标与计数器 336
实战 为列表项添加图标和计数器 336
17．4．7 列表项内容格式化处理 337
实战 对列表项内容进行格式化处理 337
17．5 表单组件 339
17．5．1 文本输入组件 339
实战 制作移动APP登录界面 340
17．5．2 滑块 343
17．5．3 翻转切换开关 343
17．5．4 单选按钮 344
17．5．5 复选框 345
17．5．6 选择菜单 346
17．5．7 多项选择菜单 347
17．6 本章小结 348
第 18章 使用jQuery Mobile事件与插件 349
18．1 设置jQuery Mobile 349
18．2 使用jQuery Mobileg事件 351
18．2．1 加载外部页面事件 351
18．2．2 页面切换事件 351
实战 实现页面跳转的动画过渡效果 352
18．2．3 页面显示或隐藏事件 354
18．2．4 触摸事件 354
实战 通过滑动屏幕浏览图片 355
18．2．5 屏幕滚动事件 358
实战 滚动屏幕改变背景颜色 358
18．2．6 翻转事件 361
实战 判断移动设备手持方向 362
18．2．7 随机显示页面背景 363
实战 随机显示页面背景 363
18．3 使用jQuery Mobile插件 366
18．3．1 mmenu插件 366
实战 制作交互式侧边菜单 367
18．3．2 Mobiscroll插件 370
实战 实现滚动选择日期和时间 371
18．3．3 Camera插件 372
实战 在jQuery Mobile页面中实现焦点轮换图效果 373
18．3．4 Swipebox插件 375
实战 实现查看大图效果 375
18．4 本章小结 377
第 19章 移动应用制作实战 378
19．1 APP引导页面 378
19．1．1 功能分析 378
19．1．2 制作步骤 378
实战 制作APP引导页面 379
19．2 移动应用首页面 383
19．2．1 功能分析 383
19．2．2 制作可滑动的页面背景 383
实战 制作可滑动的页面背景 383
19．2．3 制作可滑动导航栏 386
实战 制作可滑动导航栏 386
19．3 电商APP界面 390
19．3．1 功能分析 390
19．3．2 制作启动页面 390
实战 制作电商APP启动页面 391
19．3．3 制作电商APP首页面 393
实战 制作电商APP首页面 393
19．4 本章小结 400
