人民邮电出版社HTML5+CSS3+JQUERY MOBILE移动网站与APP开发实战(视频讲解版)

**篇 HTML5基础

第1章　HTML和HTML5基础　2

1.1　HTML基础　2

1.1.1　什么是HTML　2

1.1.2　HTML的主要功能　3

1.1.3　HTML的编辑环境　3

1.1.4　认识Dreamweaver中的代码工具　4

1.2　HTML5基础　6

1.2.1　HTML5概述　6

1.2.2　HTML5的优势　6

1.3　认识HTML5　7

1.3.1　HTML5的文档结构　7

1.3.2　HTML5的基本语法　8

1.3.3　HTML5精简的头部　8

1.4　HTML5中新增的标签　9

1.4.1　结构标签　9

1.4.2　文本标签　9

1.4.3　应用和辅助标签　10

1.4.4　进度标签　10

1.4.5　交互性标签　10

1.4.6　在文档和应用中使用的标签　10

1.4.7　标签　11

1.4.8　其他标签　11

1.5　HTML5中废弃的标签　11

1.6　本章小结　12

1.7　课后习题　12

第2章　HTML中的主体标签　13

2.1　HTML头部标签设置　13

2.1.1　标签　13

练习——为网页设置标题　13

2.1.2　标签　14

2.1.3　标签　14

练习——设置网页关键字、说明以及页面的定时跳转　16

2.2　HTML主体标签设置　17

2.2.1　边距属性margin　17

练习——设置网页整体边距　17

2.2.2　背景颜色属性bgcolor　18

练习——设置网页背景颜色　18

2.2.3　背景图像属性background　19

练习——设置网页背景图像　19

2.2.4　文字属性text　20

练习——设置网页文字默认颜色　20

2.2.5　默认链接属性link　21

练习——设置网页中超链接文字的默认颜色　21

2.3　在HTML代码中添加注释　22

2.4　本章小结　23

2.5　课后习题　23

第3章　HTML中基础标签的应用　24

3.1　文字设置标签　24

3.1.1　标签　24

练习——使用标签设置网页文字效果　25

3.1.2　和标签实现文字加粗　26

3.1.3　和标签实现文字倾斜　26

3.1.4　标签实现文字下画线　26

练习——为文字添加加粗、倾斜和下画线修饰　27

3.1.5　其他文字修饰标签　28

练习——为文字添加上标和删除线　28

3.2　分行与分段标签　29

3.2.1　使用
标签为文本分行　29

练习——为网页中的文本进行分行处理　29

3.2.2　使用标签为文本分段　31

练习——为网页中的文本进行分段处理　31

3.2.3　至标签　31

练习——设置文本标题　32

3.2.4　标签　32

练习——在网页中插入水平线　33

3.2.5　文本对齐设置　33

练习——设置网页文本对齐　34

3.2.6　在HTML中插入空格和特殊字符　35

练习——在网页中输入空格和特殊字符　35

3.3　图片标签设置　36

3.3.1　标签　36

练习——在网页中插入图片　37

3.3.2　图文混排　38

练习——制作图文介绍页面　38

3.4　列表标签设置　39

3.4.1　使用标签创建项目列表　40

练习——制作新闻列表　40

3.4.2　使用标签创建编号列表　41

练习——制作编号有序列表　41

3.4.3　使用标签创建定义列表　43

练习——制作复杂的新闻列表　43

3.5　超链接标签设置　44

3.5.1　超链接标签　44

3.5.2　相对链接和绝对链接　45

练习——在网页中创建超链接　45

3.5.3　网页中的特殊超链接　46

练习——在网页中创建特殊超链接　46

3.5.4　超链接标签中的其他属性设置　48

3.6　表格标签设置　49

3.6.1　表格的基本构成、和标签　49

3.6.2　表格标题标签　49

练习——创建数据表格　50

3.6.3　表头、表主体和表尾标签　51

练习——设置表格中的表头、表主体和表尾　51

3.7　本章小结　52

3.8　课后习题　53

第4章　HTML中表单标签的应用　54

4.1　了解HTML中的表单　54

4.1.1　表单的作用　54

4.1.2　标签　54

4.1.3　表单的数据传递方式　55

4.2　普通的HTML表单元素　55

4.2.1　文本域　55

4.2.2　密码域　55

4.2.3　文本区域　56

4.2.4　隐藏域　56

4.2.5　复选框　56

4.2.6　单选按钮　56

4.2.7　选择域　56

4.2.8　文件域　57

4.2.9　按钮　57

4.2.10　图像域　57

练习——制作登录表单　58

4.3　HTML5新增表单输入类型　61

4.3.1　url类型　61

4.3.2　email类型　61

4.3.3　range类型　61

4.3.4　number类型　61

4.3.5　tel类型　62

4.3.6　search类型　62

4.3.7　color类型　62

4.3.8　date类型　62

4.3.9　month、week、time、datetime、datetime-local类型　63

练习——制作留言表单页面　63

4.3.10　浏览器对HTML5表单的支持情况　65

4.4　HTML5新增表单属性　65

4.4.1　form属性　66

4.4.2　formaction属性　66

4.4.3　formmethod、formenctype、formnovalidate、formtarget属性　66

4.4.4　placeholder属性　66

4.4.5　autofocus属性　67

练习——为表单元素设置默认提示内容　67

4.4.6　autocomplete属性　68

4.5　使用HTML5表单验证　68

4.5.1　与验证有关的表单元素属性　68

练习——验证网页表单元素　69

4.5.2　表单验证方法　70

4.5.3　表单验证事件　72

4.6　本章小结　73

4.7　课后习题　73

第5章　HTML中多媒体标签的应用　74

5.1　使用标签　74

5.1.1　使用标签嵌入音频　74

练习——在网页中嵌入音频　75

5.1.2　使用标签嵌入视频　75

练习——在网页中嵌入视频　76

5.2　了解HTML5中多媒体的应用　76

5.2.1　在线多媒体的发展　77

5.2.2　检查浏览器是否支持和标签　77

5.3　HTML5新增标签的应用　77

5.3.1　标签所支持的音频格式　77

5.3.2　使用标签　77

练习——在网页中嵌入音频播放　78

5.4　HTML5新增标签的应用　79

5.4.1　标签所支持的视频格式　79

5.4.2　使用标签　79

练习——在网页中嵌入视频播放　79

5.4.3　使用标签　80

5.5　与标签的属性　81

5.5.1　元素的标签属性　81

5.5.2　元素的接口属性　82

练习——实现网页中视频的快进控制　83

5.6　与标签的接口方法　84

练习——控制网页中视频的播放和暂停　85

5.7　与标签的事件　86

练习——自定义视频播放控制组件　87

5.8　本章小结　91

5.9　课后习题　91

第6章　HTML5中标签的应用　93

6.1　标签　93

6.1.1　了解标签　93

6.1.2　在网页中使用标签　93

6.1.3　使用标签实现绘图的流程　94

6.2　绘制基本图形　95

6.2.1　绘制直线　95

练习——在网页中绘制直线　95

6.2.2　绘制矩形　96

练习——在网页中绘制矩形　97

6.2.3　绘制圆形　98

练习——在网页中绘制圆形　99

6.2.4　绘制三角形　100

练习——在网页中绘制三角形　100

6.2.5　图形组合　102

6.3　绘制文本　103

6.3.1　使用文本　103

练习——在网页中绘制文字　104

6.3.2　创建对象阴影　105

练习——为网页中所绘制文字添加阴影　105

6.4　在网页中实现特殊形状图像　106

6.4.1　绘制图像　106

练习——在网页中绘制图像　107

6.4.2　裁切区域　108

练习——在网页中实现圆形图像效果　108

6.5　本章小结　110

6.6　课后习题　110

第7章　HTML5中文档结构标签的应用　111

7.1　构建HTML5页面主体内容　111

7.1.1　文章标签　111

7.1.2　章节标签　113

7.1.3　导航标签　115

7.1.4　辅助内容标签　116

7.1.5　日期时间标签　117

7.2　HTML5文档中的语义模块标签　117

7.2.1　标题标签　117

7.2.2　标题分组标签　118

7.2.3　页脚标签　119

7.2.4　联系信息标签　120

7.3　制作HTML5文章页面　121

练习——制作HTML5文章页面　121

7.4　本章小结　125

7.5　课后习题　125

第二篇　CSS样式

第8章　CSS样式基础　127

8.1　了解CSS样式　127

8.1.1　什么是CSS样式　127

8.1.2　CSS样式的发展　127

8.2　CSS样式语法　128

8.2.1　CSS样式的基本语法　128

8.2.2　CSS规则构成　129

8.3　CSS样式选择器　130

8.3.1　通配选择器　130

8.3.2　标签选择器　130

练习——创建通配选择器和标签选择器　130

8.3.3　ID选择器　132

8.3.4　类选择器　132

练习——创建ID选择器和类选择器　132

8.3.5　伪类和伪对象选择器　135

练习——创建并应用超链接伪类样式　136

8.3.6　群组选择器　137

8.3.7　派生选择器　137

练习——在网页中创建并应用群组和派生CSS样式　138

8.4　在网页中应用CSS样式的4种方式　139

8.4.1　内联CSS样式　139

8.4.2　内部CSS样式　140

8.4.3　外部CSS样式　140

练习——创建并链接外部CSS样式表文件　141

8.4.4　导入外部CSS样式　143

8.5　CSS样式的特性　144

8.5.1　CSS样式的继承性　144

8.5.2　CSS样式的特殊性　144

8.5.3　CSS样式的层叠性　145

8.5.4　CSS样式的重要性　145

8.6　本章小结　145

8.7　课后习题　145

第9章　CSS布局　147

9.1　创建Div　147

9.1.1　了解Div　147

9.1.2　如何插入Div　148

9.1.3　块元素与行内元素　149

9.2　CSS盒模型　150

9.2.1　什么是CSS盒模型　150

9.2.2　CSS盒模型的特性　151

9.2.3　margin属性——边距　151

9.2.4　border属性——边框　151

9.2.5　padding属性——填充　151

练习——设置网页元素盒模型　152

9.3　网页元素定位属性　154

9.3.1　position属性——元素定位　154

9.3.2　网页元素相对定位　155

练习——实现网页元素的叠加显示　155

9.3.3　网页元素绝对定位　156

练习——网页元素固定在右侧显示　156

9.3.4　网页元素固定定位　157

练习——实现固定位置的导航菜单　157

9.3.5　网页元素浮动定位　159

练习——制作顺序排列的图像列表　159

9.4　网页常用布局方式　161

9.4.1　居中的布局　162

9.4.2　浮动的布局　163

9.4.3　自适应高度的解决方法　168

9.5　本章小结　169

9.6　课后习题　169

第10章　CSS样式属性详解　170

10.1　使用CSS设置文字样式　170

10.1.1　font-family属性——字体　170

10.1.2　font-size属性——字体大小　170

10.1.3　color属性——字体颜色　171

练习——设置网页文字基本效果　171

10.1.4　font-weight属性——字体粗细　173

10.1.5　font-style属性——字体样式　173

练习——设置网页文字的加粗和倾斜效果　174

10.1.6　text-transform属性——英文字体大小写　175

练习——设置网页中英文字体大小写　175

10.1.7　text-decoration属性——文字修饰　177

练习——为网页文字添加修饰　177

10.1.8　letter-spacing属性——字符间距　178

练习——设置中文字符间距　179

10.2　使用CSS设置段落样式　179

10.2.1　line-height属性——行间距　179

10.2.2　text-indent属性——段落首行缩进　180

练习——美化网页中的段落文本　180

10.2.3　text-align属性——文本水平对齐　181

练习——设置文本水平对齐　181

10.2.4　vertical-align属性——文本垂直对齐　183

练习——设置文本垂直对齐　183

10.3　使用CSS设置背景颜色和背景图像　185

10.3.1　background-color属性——背景颜色　185

10.3.2　background-image属性——背景图像　185

10.3.3　background-repeat属性——背景图像平铺方式　185

练习——设置网页背景效果　186

10.3.4　background-position属性——背景图像位置　188

练习——定位网页中的背景图像　188

10.3.5　background-attachment属性——背景图像固定　190

练习——固定网页中的背景图像　190

10.4　使用CSS设置列表样式　191

10.4.1　list-style-type属性——设置列表符号　191

练习——设置新闻列表效果　191

10.4.2　list-style-image属性——自定义列表符号　192

练习——自定义新闻列表符号　192

10.4.3　设置定义列表　194

练习——制作复杂新闻列表　194

10.5　使用CSS设置边框样式　195

10.5.1　border-width属性——边框宽度　195

10.5.2　border-style属性——边框样式　195

10.5.3　border-color属性——边框颜色　196

练习——为网页元素添加边框效果　196

10.6　超链接CSS样式伪类　197

10.6.1　:link伪类　197

10.6.2　:hover伪类　198

10.6.3　:active伪类　198

10.6.4　:visited伪类　199

练习——设置网页中超链接文字效果　199

10.6.5　按钮式超链接　202

练习——制作网站导航菜单　202

10.7　cursor属性——光标指针效果　204

练习——在网页中实现多种光标指针效果　204

10.8　本章小结　206

10.9　课后习题　206

第11章　CSS3.0新增属性详解　207

11.1　了解CSS3.0　207

11.1.1　CSS3.0的发展　207

11.1.2　浏览器对CSS3.0的支持情况　207

11.1.3　了解CSS3.0的全新功能　208

11.2　CSS3.0颜色设置方式　208

11.2.1　RGBA颜色值　208

练习——使用RGBA设置半透明背景颜色　209

11.2.2　HSL和HSLA颜色值　209

练习——使用HSLA设置半透明背景颜色　210

11.2.3　transparent颜色值　211

11.3　CSS3.0新增文字设置属性　211

11.3.1　text-overflow属性——文本溢出处理　211

练习——设置网页中溢出文本的处理方式　212

11.3.2　word-wrap和word-break属性——控制文本换行　213

练习——控制英文内容强制换行　213

11.3.3　text-shadow属性——文本阴影　214

练习——为网页文本添加阴影效果　215

11.3.4　@font-face规则——使用服务器端字体　215

练习——在网页中使用特殊字体　216

11.4　CSS3.0新增背景设置属性　217

11.4.1　线性渐变背景颜色　217

练习——为网页设置线性渐变背景颜色　218

11.4.2　径向渐变背景颜色　220

练习——为网页设置径向渐变背景颜色　221

11.4.3　background属性——设置多背景图像　222

练习——为网页设置多个背景图像　222

11.4.4　background-size属性——背景图像大小　223

练习——控制网页背景图像的大小　223

11.4.5　background-origin属性——背景图像原点　225

练习——控制背景图像开始显示的原点位置　226

11.4.6　background-clip属性——背景图像显示区域　226

练习——控制背景图像的显示区域　227

11.5　CSS3.0新增边框设置属性　228

11.5.1　border-colors属性——多重边框颜色　228

练习——实现网页元素多色彩边框效果　228

11.5.2　border-image属性——图像边框　229

练习——为网页元素添加图像边框效果　230

11.5.3　border-radius属性——圆角边框　231

练习——在网页中实现圆角边框效果　231

11.6　CSS3.0新增多列布局属性　233

11.6.1　columns属性——多列布局　233

练习——将网页内容分为多列　233

11.6.2　column-width属性——列宽度　234

11.6.3　column-count属性——列数　234

11.6.4　column-gap属性——列间距　234

11.6.5　column-rule属性——列分隔线　235

11.6.6　column-span属性——横跨所有列　235

练习——实现网页内容的分栏显示效果　235

11.7　CSS3.0新增其他属性　237

11.7.1　opaity属性——元素不透明度　237

练习——设置网页元素的半透明效果　238

11.7.2　box-shadow属性——元素阴影　239

练习——为网页元素添加阴影效果　239

11.7.3　resize属性——改变元素尺寸　240

练习——实现网页元素尺寸任意缩放　241

11.7.4　outline属性——轮廓外边框　242

练习——为网页元素添加轮廓外边框　243

11.7.5　appearance属性——伪装的元素　244

练习——将超链接文字伪装成按钮　245

11.7.6　content属性——为元素赋予内容　246

练习——为网页元素赋予文字内容　246

11.8　本章小结　247

11.9　课后习题　247

第12章　使用CSS3.0实现动画效果　248

12.1　实现元素变形　248

12.1.1　transform属性　248

12.1.2　使用rotate()函数实现元素旋转　248

练习——实现网页元素的旋转变形效果　249

12.1.3　使用scale()函数实现元素缩放和翻转变形　250

练习——实现网页元素的缩放和翻转效果　250

12.1.4　使用translate()函数实现元素移动　251

练习——实现网页元素的移动效果　251

12.1.5　使用skew()函数实现元素倾斜　253

练习——实现网页元素的倾斜效果　253

12.1.6　使用matrix()函数实现元素矩阵变形　254

练习——实现网页元素的矩阵变形效果　254

12.1.7　定义变形中心点　255

练习——设置网页元素的变形中心点　256

12.1.8　同时使用多个变形函数　257

练习——为网页元素同时应用多个变形效果　257

12.2　CSS3.0实现过渡动画效果　258

12.2.1　transition属性　258

12.2.2　transition-property属性——实现过渡效果　259

练习——实现网页元素旋转并放大动画　259

12.2.3　transition-duration属性——设置过渡时间　260

练习——设置网页元素变形动画持续时间　260

12.2.4　transition-delay属性——实现过渡延迟效果　262

练习——设置网页元素变形动画延迟时间　262

12.2.5　transition-timing-function属性——设置过渡方式　263

练习——设置网页元素变形动画过渡方式　263

12.3　本章小结　264

12.4　课后习题　264

第三篇　jQuery Mobile页面

第13章　初识jQuery Mobile　266

13.1　jQuery入门　266

13.1.1　什么是jQuery　266

13.1.2　如何引用jQuery函数库　267

13.1.3　jQuery基本语法　267

13.1.4　jQuery选择器　268

13.1.5　使用jQuery设置CSS样式属性　269

练习——使用jQuery改变CSS样式效果　269

13.2　jQuery Mobile基础　270

13.2.1　什么是jQuery Mobile　270

13.2.2　jQuery Mobile的优势　271

13.3　jQuery Mobile页面开发前的准备工作　271

13.3.1　如何测试所制作的移动页面　271

13.3.2　加载jQuery Mobile函数库文件　273

13.4　认识jQuery Mobile页面结构　274

13.4.1　创建jQuery Mobile页面　274

练习——创建jQuery　Mobile页面　274

13.4.2　jQuery Mobile页面的基本架构　276

13.4.3　多容器jQuery Mobile页面　277

13.5　jQuery Mobile页面的基本操作　277

13.5.1　jQuery Mobile页面中多容器之间的链接　277

练习——创建jQuery　Mobile页面多容器之间链接　278

13.5.2　链接外部jQuery Mobile页面　280

练习——链接外部jQuery　Mobile页面　280

13.5.3　预加载jQuery Mobile页面　282

13.5.4　页面缓存　282

练习——在jQuery　Mobile页面中实现预加载和缓存　283

13.5.5　在jQuery Mobile页面中实现后退功能　283

练习——在jQuery　Mobile页面中实现后退功能　284

13.5.6　弹出对话框　285

练习——以弹出窗口方式显示链接内容　285

13.6　本章小结　287

13.7　课后习题　287

第14章　jQuery Mobile页面详解　288

14.1　头部栏　288

14.1.1　头部栏的基本结构　288

14.1.2　设置后退按钮的文字　289

14.1.3　添加按钮　290

练习——在jQuery　Mobile页面头部栏中添加按钮　290

14.1.4　设置按钮位置　293

14.2　导航栏　294

14.2.1　导航栏的基本结构　295

练习——在jQuery　Mobile页面中创建导航栏　295

14.2.2　导航栏的图标　297

14.2.3　设置导航栏图标位置　299

14.3　尾部栏　300

14.3.1　添加按钮　300

练习——在jQuery　Mobile页面尾部栏中添加按钮　300

14.3.2　添加表单元素　301

练习——在jQuery　Mobile页面尾部栏中添加下拉列表　302

14.4　jQuery Mobile页面正文内容处理　303

14.4.1　jQuery Mobile布局网格　303

练习——创建布局网格　303

14.4.2　可折叠区块　305

练习——创建可折叠内容　306

14.4.3　嵌套可折叠区块　307

14.4.4　可折叠区块组　308

练习——创建可折叠区块组　308

14.5　本章小结　309

14.6　课后习题　309

第15章　使用jQuery Mobile页面组件和主题　311

15.1　列表组件　311

15.1.1　无序列表　311

练习——在jQuery　Mobile页面中创建列表　311

15.1.2　有序列表　312

15.1.3　分割列表选项　313

练习——分割jQuery　Mobile页面中的列表选项　313

15.1.4　列表选项分组　315

练习——实现列表选项的分组　315

15.1.5　开启或禁用列表项中的图标　317

练习——开启或禁用列表项中的图标　317

15.1.6　图标与计数器　319

练习——为列表项添加图标和计数器　319

15.1.7　列表项内容格式化处理　320

练习——列表项内容的格式化处理　321

15.2　按钮组件　323

15.2.1　使用按钮组件　323

练习——在jQuery　Mobile页面中添加按钮　323

15.2.2　使用按钮组　325

练习——在jQuery　Mobile页面中使用按钮组　325

15.3　表单组件　326

15.3.1　文本输入框　326

练习——在jQuery　Mobile页面添加不同类型输入框　326

15.3.2　滑块　327

练习——使用滑块修改页面元素的背景颜色　327

15.3.3　翻转切换开关　328

15.3.4　单选按钮　328

练习——制作投票表单　329

15.3.5　复选框　330

练习——制作调查表单　330

15.3.6　选择菜单　331

15.3.7　多项选择菜单　333

15.4　关于jQuery Mobile页面主题　334

15.4.1　什么是jQuery Mobile页面主题　334

15.4.2　jQuery Mobile页面主题的特点　334

15.4.3　默认的jQuery Mobile页面主题　335

练习——应用jQuery　Mobile页面的默认主题　335

15.4.4　如何修改默认的jQuery Mobile页面主题　336

练习——修改jQuery　Mobile页面的默认效果　336

15.5　自定义jQuery Mobile页面主题　338

15.5.1　自定义jQuery Mobile页面背景　338

练习——自定义jQuery　Mobile页面背景　338

15.5.2　自定义jQuery Mobile页面工具栏　341

练习——自定义jQuery　Mobile页面工具栏　341

15.5.3　自定义jQuery Mobile页面内容区域　343

练习——自定义可折叠区块主题　344

15.6　本章小结　345

15.7　课后习题　345

第16章　使用jQuery Mobile页面事件　346

16.1　应用jQuery Mobile事件　346

16.1.1　页面显示/隐藏事件　346

16.1.2　加载外部页面事件　347

16.1.3　页面切换事件　347

练习——设置jQuery　Mobile页面切换过渡动画效果　348

16.1.4　触摸事件　350

练习——使用触摸事件实现滑动屏幕浏览图片　351

16.1.5　滚动屏幕事件　354

练习——使用滚动屏幕事件改变元素的背景颜色　354

16.1.6　屏幕翻转事件　357

练习——通过屏幕翻转事件判断移动设备方向　357

16.2　jQuery Mobile页面的设置技巧　361

16.2.1　固定页面头部栏与尾部栏　361

练习——固定jQuery　Mobile页面中头部栏和尾部栏的位置　361

16.2.2　随机显示页面背景　362

练习——随机显示jQuery　Mobile页面的背景图片　362

16.3　本章小结　366

16.4　课后习题　366

第17章　移动端应用开发实战　367

17.1　移动APP引导页面　367

17.1.1　功能分析　367

17.1.2　制作步骤　368

练习——制作移动APP引导页面　368

17.2　电商APP页面　374

17.2.1　功能分析　374

17.2.2　制作电商APP页面　375

练习——制作电商APP页面　375

17.2.3　制作侧边导航菜单　381

练习——制作侧边导航菜单　381

17.3　可滑动操作的移动页面　386

17.3.1　功能分析　386

17.3.2　制作可滑动切换的背景　386

练习——制作可滑动切换的背景　386

17.3.3　制作可滑动底部导航栏　389

练习——制作可滑动底部导航栏　389

17.4　本章小结　393

17.5　课后习题　393