第一篇 HTML5基础 2
第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 <ruby>标签 11
1.4.8 其他标签 11
1.5 HTML5中废弃的标签 11
1.6 本章小结 12
1.7 课后习题 12
第2章 HTML中的主体标签 13
2.1 HTML头部<head>标签设置 13
2.1.1 <title>标签 13
练习——为网页设置标题 13
2.1.2 <base>标签 14
2.1.3 <meta>标签 14
练习——设置网页关键字、说明以及页面的定时跳转 16
2.2 HTML主体<body>标签设置 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 <font>标签 24
练习——使用<font>标签设置网页文字效果 25
3.1.2 <b>和<strong>标签实现文字加粗 26
3.1.3 <i>和<em>标签实现文字倾斜 26
3.1.4 <u>标签实现文字下画线 26
练习——为文字添加加粗、倾斜和下画线修饰 27
3.1.5 其他文字修饰标签 28
练习——为文字添加上标和删除线 28
3.2 分行与分段标签 29
3.2.1 使用<br>标签为文本分行 29
练习——为网页中的文本进行分行处理 29
3.2.2 使用<p>标签为文本分段 31
练习——为网页中的文本进行分段处理 31
3.2.3 <h1>至<h6>标签 31
练习——设置文本标题 32
3.2.4 <hr>标签 32
练习——在网页中插入水平线 33
3.2.5 文本对齐设置 33
练习——设置网页文本对齐 34
3.2.6 在HTML中插入空格和特殊字符 35
练习——在网页中输入空格和特殊字符 35
3.3 图片标签设置 36
3.3.1 <img>标签 36
练习——在网页中插入图片 37
3.3.2 图文混排 38
练习——制作图文介绍页面 38
3.4 列表标签设置 39
3.4.1 使用<ul>标签创建项目列表 40
练习——制作新闻列表 40
3.4.2 使用<ol>标签创建编号列表 41
练习——制作编号有序列表 41
3.4.3 使用<dl>标签创建定义列表 43
练习——制作复杂的新闻列表 43
3.5 超链接标签设置 44
3.5.1 超链接<a>标签 44
3.5.2 相对链接和绝对链接 45
练习——在网页中创建超链接 45
3.5.3 网页中的特殊超链接 46
练习——在网页中创建特殊超链接 46
3.5.4 超链接标签中的其他属性设置 48
3.6 表格标签设置 49
3.6.1 表格的基本构成<table>、<tr>和<td>标签 49
3.6.2 表格标题<caption>标签 49
练习——创建数据表格 50
3.6.3 表头<thead>、表主体<tbody>和表尾<tfoot>标签 51
练习——设置表格中的表头、表主体和表尾 51
3.7 本章小结 52
3.8 课后习题 53
第4章 HTML中表单标签的应用 54
4.1 了解HTML中的表单 54
4.1.1 表单的作用 54
4.1.2 <form>标签 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 使用<embed>标签 74
5.1.1 使用<embed>标签嵌入音频 74
练习——在网页中嵌入音频 75
5.1.2 使用<embed>标签嵌入视频 75
练习——在网页中嵌入视频 76
5.2 了解HTML5中多媒体的应用 76
5.2.1 在线多媒体的发展 77
5.2.2 检查浏览器是否支持<audio>和<video>标签 77
5.3 HTML5新增<audio>标签的应用 77
5.3.1 <audio>标签所支持的音频格式 77
5.3.2 使用<audio>标签 77
练习——在网页中嵌入音频播放 78
5.4 HTML5新增<video>标签的应用 79
5.4.1 <video>标签所支持的视频格式 79
5.4.2 使用<video>标签 79
练习——在网页中嵌入视频播放 79
5.4.3 使用<source>标签 80
5.5 <audio>与<video>标签的属性 81
5.5.1 元素的标签属性 81
5.5.2 元素的接口属性 82
练习——实现网页中视频的快进控制 83
5.6 <audio>与<video>标签的接口方法 84
练习——控制网页中视频的播放和暂停 85
5.7 <audio>与<video>标签的事件 86
练习——自定义视频播放控制组件 87
5.8 本章小结 91
5.9 课后习题 91
第6章 HTML5中<canvas>标签的应用 93
6.1 <canvas>标签 93
6.1.1 了解<canvas>标签 93
6.1.2 在网页中使用<canvas>标签 93
6.1.3 使用<canvas>标签实现绘图的流程 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 文章<article>标签 111
7.1.2 章节<section>标签 113
7.1.3 导航<nav>标签 115
7.1.4 辅助内容<aside>标签 116
7.1.5 日期时间<time>标签 117
7.2 HTML5文档中的语义模块标签 117
7.2.1 标题<header>标签 117
7.2.2 标题分组<hgroup>标签 118
7.2.3 页脚<footer>标签 119
7.2.4 联系信息<address>标签 120
7.3 制作HTML5文章页面 121
练习——制作HTML5文章页面 121
7.4 本章小结 125
7.5 课后习题 125
第二篇 CSS样式 127
第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页面 266
第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