HTML5移动Web开发任务教程（慕课版）"

目录

单元1　移动Web开发概述 1
1.1 移动Web开发简介 1
1.1.1　什么是移动Web开发 1
1.1.2　移动Web开发与PC端Web开发的区别 1
1.2　移动Web开发技术入门 2
1.2.1　HTML5简介 2
1.2.2　CSS3简介 3
1.2.3　Bootstrap简介 3
1.2.4　移动端的Web浏览器 3
1.3　基于HTML5的移动Web开发 4
1.4　开发工具HBuilderX的使用 6
1.5　单元案例—我的个人主页 7
1.5.1　页面效果分析 8
1.5.2　页面实现 8
1.5.3　页面样式设计 9
1.6 单元小结 9
1.7 动手实践 9
单元2　初识HTML5 11
2.1 HTML5的优势 11
2.2　HTML5网页文档结构 12
2.3　HTML5常用标签及其属性 13
2.3.1　标签的分类 13
2.3.2　标签属性 13
2.3.3　HTML5文档头部相关标签 14
2.3.4　HTML5常用的文本标签 15
2.4　HTML5新增的语义化结构标签 19
2.5　HTML5新增的属性 22
2.6　单元案例—“少壮不努力，老大徒伤悲”古诗赏析页面 24
2.6.1　页面效果分析 24
2.6.2　页面实现 25
2.6.3　页面功能设计 28
2.6.4　页面样式设计 28
2.7　单元小结 29
2.8　动手实践 29
单元3　CSS3基础 31
3.1 结构与表现分离 31
3.2　CSS发展史及CSS3性能预览 32
3.2.1　CSS发展史 32
3.2.2　CSS3性能预览 33
3.3　CSS3核心基础 37
3.3.1　CSS的样式规则 37
3.3.2　引入CSS 37
3.4　CSS3选择器 41
3.4.1　CSS3属性选择器 41
3.4.2　CSS3结构伪类选择器 46
3.4.3　CSS3 UI元素状态伪类选择器 53
3.5　单元案例—学院网站首页 57
3.5.1　搭建项目 57
3.5.2　主要模块开发 59
3.6　单元小结 67
3.7　动手实践 68
单元4　CSS3常用样式 69
4.1 盒子模型概述 69
4.1.1　认识盒子模型 69
4.1.2　盒子模型的宽度与高度 71
4.2　盒子模型的相关属性 72
4.2.1　边框属性 72
4.2.2　内边距属性 81
4.2.3　外边距属性 83
4.3　CSS3的弹性盒布局 85
4.3.1　定义弹性容器 85
4.3.2　弹性容器的属性 87
4.3.3　弹性子元素的属性 94
4.4　背景设置 101
4.4.1　背景图像的大小 101
4.4.2　背景的显示区域 103
4.4.3　背景图像的裁剪区域 104
4.4.4　多重背景图像 105
4.4.5　背景属性 106
4.5　CSS3的渐变属性 108
4.5.1　线性渐变 108
4.5.2　径向渐变 109
4.5.3　重复渐变 111
4.6　CSS3的盒子阴影与盒子倒影 113
4.6.1　盒子阴影 113
4.6.2　盒子倒影 115
4.7　单元案例—小信图书展示框 116
4.7.1　页面效果分析 117
4.7.2　制作页面结构 117
4.7.3　定义页面的CSS样式 119
4.8　单元小结 120
4.9　动手实践 121
单元5　CSS3高级应用 122
5.1 CSS3过渡 122
5.1.1　transition属性的子属性设置 122
5.1.2　transition属性的复合设置 126
5.2　CSS3变形 127
5.2.1　认识transform属性 127
5.2.2　2D变形 128
5.2.3　3D变形 132
5.2.4　自定义变形 135
5.3　CSS3动画 141
5.3.1　使用@keyframes规则创建动画 141
5.3.2 使用animation属性调用动画 142
5.4　单元案例—“爱我中华”动画制作 145
5.4.1　页面效果分析 145
5.4.2　页面动画定义 146
5.4.3　页面结构设计 147
5.4.4　页面样式设计 147
5.5　单元小结 149
5.6　动手实践 149
单元6　HTML5智能表单 151
6.1 表单 151
6.1.1　表单的构成 151
6.1.2　创建表单 152
6.2　表单控件 153
6.2.1　input控件 153
6.2.2　textarea控件 156
6.2.3　select控件 158
6.3　HTML5表单新特性 160
6.3.1　HTML5的input控件 161
6.3.2　HTML5新增的表单控件 166
6.3.3　HTML5新增的表单属性 167
6.4　单元案例——志愿者注册页面 173
6.4.1　表单注册页面效果分析 174
6.4.2　搭建表单注册页面结构 174
6.4.3　定义表单注册页面CSS样式 177
6.5　单元小结 178
6.6　动手实践 178
单元7　基于HTML5的移动
　　　 Web应用（上） 180
7.1 HTML5的音频与视频 180
7.1.1　HTML5多媒体技术概述 180
7.1.2　HTML5的音频 183
7.1.3　HTML5的视频 185
7.1.4　音频与视频相关的属性、方法与事件 188
7.2　HTML5的拖放操作 190
7.2.1　HTML5的拖放 191
7.2.2　拖放事件 192
7.2.3　dataTransfer对象 194
7.3　文件操作 196
7.3.1　选择文件 196
7.3.2　操作文件 197
7.4　单元案例—DIY视频播放器 200
7.4.1　页面功能分析 200
7.4.2　页面效果展示 200
7.4.3　页面设计与实现 201
7.5　单元小结 205
7.6　动手实践 205
单元8　基于HTML5的移动Web应用（下） 206
8.1 认识Canvas 206
8.2　绘制简单图形 209
8.2.1　绘制直线 210
8.2.2　绘制三角形 211
8.2.3　绘制矩形 213
8.2.4　清空画布 215
8.3　绘制曲线 216
8.3.1　绘制圆 217
8.3.2　绘制其他曲线 218
8.4　图形的变换 220
8.4.1　移动坐标空间 220
8.4.2　旋转坐标空间 222
8.5　操作与使用图像 223
8.5.1　绘制图像 223
8.5.2　改变图像大小 225
8.5.3　创建图像切片 226
8.6　绘制文字 227
8.6.1　绘制填充文字 227
8.6.2　绘制轮廓文字 229
8.7　图形的组合与裁切 232
8.7.1　图形的组合 232
8.7.2　图形的裁切 233
8.8　更多的颜色和样式选择 235
8.8.1　绘制线性渐变 235
8.8.2　绘制放射性渐变 237
8.8.3　绘制图案 238
8.9　使用SVG创建2D图形 239
8.9.1　在页面中添加SVG 240
8.9.2　应用SVG 240
8.10　单元案例—绘制桌面时钟 242
8.10.1　页面效果分析 242
8.10.2　页面实现 243
8.11　单元小结 246
8.12　动手实践 246
单元9　响应式Web设计“神器”Bootstrap 247
9.1 Bootstrap环境安装 247
9.2　Bootstrap常用CSS样式 251
9.2.1　Bootstrap栅格系统 251
9.2.2　Bootstrap排版 252
9.2.3　Bootstrap表格 255
9.2.4　Bootstrap表单 257
9.2.5　Bootstrap按钮 260
9.3　Bootstrap布局组件 262
9.3.1　Bootstrap字体图标 262
9.3.2　Bootstrap下拉列表与按钮组 263
9.3.3　Bootstrap导航 264
9.3.4　Bootstrap导航栏 266
9.3.5　Bootstrap分页和列表组 267
9.4　Bootstrap常用插件 269
9.4.1　Bootstrap标签页 269
9.4.2　Bootstrap轮播图插件 270
9.4.3　Bootstrap折叠 273
9.5　单元案例—流感疫苗预约网站登录页面 275
9.5.1　页面效果分析 275
9.5.2　页面实现 276
9.6　单元小结 278
9.7　动手实践 278
单元10　实战开发——英语学习网 279
10.1 Bootstrap项目的搭建 279
10.2　首页效果预览与首页结构搭建 280
10.3　首页导航栏与轮播图实现 282
10.3.1　首页导航栏实现 282
10.3.2　首页轮播图实现 283
10.4　首页主体内容及底部菜单实现 286
10.4.1　主体内容实现 286
10.4.2　底部菜单实现 288
10.5　在线学习页面实现 290
10.5.1　导航栏与底部菜单实现 290
10.5.2　主体内容实现 293
10.6　英语新闻页面实现 295
10.6.1　导航栏与底部菜单实现 295
10.6.2　主体内容实现 298
10.7　单元小结 302
10.8　动手实践 302