HTML5 CSS3 jQuery Mobile APP与移动网站设计从入门到精通

目录
第 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