HTML5+CSS3+JavaScript网页设计经典课堂

目录
Chapter / 01
HTML5 入门
1.1 认识HTML5        2
1.1.1 HTML 发展历程        2
1.1.2 HTML5 和H5 的区别        2
1.2 新的特性         3
1.2.1 兼容性          3
1.2.2 化繁为简         3
1.2.3 通用访问         4
1.2.4 标准改进         4
1.3 为何使用HTML5        4
1.3.1 页面的交互性能更强大       5
1.3.2 字符集和DO CTYPE 的改进       6
1.3.3 HTML5 的优势        6
1.4 元素的分类        8
1.4.1 结构性元素          8
1.4.2 级块性元素          9
1.4.3 行内语义性元素        9
1.4.4 交互性元素          9
1.5 新增元素        10
1.6 新增属性        16
1.6.1 表单相关属性        16
1.6.2 其他相关属性        16
1.7 课堂练习        17
强化训练         18
Chapter / 02
在页面中绘图
2.1 canvas 入门       20
2.1.1 canvas 含义        20
2.1.2 canvas 坐标        20
2.2 使用canvas       21
2.2.1 在页面中加入canvas        21
2.2.2 绘制矩形和五角形       22
2.2.3 检测浏览器是否支持        25
2.3 绘制曲线路径        26
2.3.1 绘制路径的方法         26
2.3.2 描边样式的使用        27
2.3.3 填充和曲线的绘制方法       28
2.4 绘制图像        30
2.4.1 使用canvas 插入图片        30
2.4.2 渐变颜色的使用        31
2.4.3 变形图形的设置方法        33
2.4.4 组合图形的绘制方法        34
2.4.5 使用canvas 绘制文字        35
2.5 课堂练习        37
强化训练         39
Chapter / 03
制作新型的表单
3.1 新的表单元素        42
3.1.1 datalist 元素        42
3.1.2 keygen 元素        42
3.1.3 output 元素        43
3.2 新的表单属性        44
3.2.1 form 属性         44
3.2.2 formaction 属性         45
3.2.3 placeholder 属性        45
3.2.4 list 属性          46
3.2.5 min 和max 属性        46
3.2.6 novalidate 属性         47
3.2.7 multiple 属性        47
3.2.8 step 属性         48
3.3 表单的输入型控件      48
3.3.1 Input 类型E-mail        48
3.3.2 Input 类型url        49
3.3.3 Input 类型number       49
3.3.4 Input 类型range        50
3.3.5 Input 类型Date Pickers       50
3.3.6 Input 类型color         51
3.4 制作一个表单        52
3.5 课堂练习        54
强化训练         56
Chapter / 04
地理位置请求
4.1 关于地理位置信息      58
4.1.1 经度和纬度坐标         58
4.1.2 IP 地址定位数据        58
4.1.3 GPS 和Wi-Fi 地理定位数据      58
4.1.4 用户自定义的地理定位        59
4.2 浏览器对Geolocation 的支持     59
Contents
Contents
4.2.1 GeolocationAPI 概述       59
4.2.2 Geolocation 的浏览器支持情况      62
4.3 隐私处理        62
4.3.1 应用隐私保护机制        62
4.3.2 处理位置信息         62
4.4 使用Geolocation API       63
4.4.1 检测浏览器是否支持       63
4.4.2 位置请求         64
4.5 在地图上显示位置      66
4.6 课堂练习        69
强化训练         71
Chapter / 05
拖曳上传的应用
5.1 拖放API        74
5.1.1 实现拖放API 的过程       74
5.1.2 dataTransfer 对象的属性与方法      74
5.2 拖放API 的应用       75
5.2.1 拖放应用          75
5.2.2 拖放列表         76
5.3 课堂练习        78
强化训练         80
Chapter / 06
CSS3 选择器
6.1 CSS 选择器       82
6.1.1 三大基础选择器         82
6.1.2 集体选择器         85
6.1.3 属性选择器         86
6.2 CSS3 入门        88
6.2.1 CSS3 与之前版本的异同点      88
6.2.2 CSS3 新增的长度单位       88
6.2.3 CSS3 新增结构性伪类       90
6.2.4 CSS3 新增UI 元素状态伪类      95
6.2.5 CSS3 新增属性        97
6.3 课堂练习        101
强化训练         102
Chapter / 07
CSS3 设计动画
7.1 过渡基础        104 Contents
7.1.1 过渡属性          104
7.1.2 浏览器支持情况         104
7.2 实现过渡        105
7.2.1 单项属性过渡        105
7.2.2 多项属性过渡         105
7.2.3 利用过渡设计电脑桌面       107
7.3 实现动画        108
7.3.1 浏览器支持情况         108
7.3.2 动画属性         109
7.3.3 实现动画效果         111
7.4 课堂练习        112
强化训练         114
Chapter / 08
多彩的样式设计
8.1 设置多彩的文本样式       116
8.1.1 设置文本阴影        116
8.1.2 设置文本溢出        124
8.1.3 给文本换行         125
8.1.4 把单词拆分         127
8.1.5 设置圆角边框        128
8.1.6 设置盒子阴影        128
8.2 页面中多彩颜色的设置      130
8.2.1 使用HSL 颜色值        130
8.2.2 使用HSLA 颜色值        134
8.3 课堂练习        135
强化训练         137
Chapter / 09
CSS3 用户的交互界面
9.1 自适应显示效果       140
9.1.1 多媒体查询语法         140
9.1.2 多媒体查询方法         140
9.1.3 自适应的导航栏         142
9.2 用户界面简介        146
9.2.1 让用户自调尺寸         146
9.2.2 调整方框的大小        147
9.2.3 修饰外形轮廓样式       150
9.2.4 界面的多列布局        151
9.3 课堂练习        153
强化训练         154
Chapter / 10
弹性盒子模型
10.1 盒子模型       156
10.1.1 盒子简介         156
10.1.2 外边距设置        156
10.1.3 外边距合并        158
10.1.4 内边距设置        161
10.2 弹性盒子       161
10.2.1 弹性盒子基础         161
10.2.2 对父级容器的设置       162
10.2.3 对子级内容的设置       170
10.3 课堂练习       174
强化训练         176
Chapter / 11
颜色渐变和图形转换
11.1 渐变         178
11.1.1 浏览器支持        178
11.1.2 线性渐变         179
11.1.3 径向渐变         180
11.2 2D 转换        181
11.2.1 移动translate()        181
11.2.2 旋转rotate()        182
11.2.3 缩放scale()        183
11.2.4 倾斜skew()        185
11.3 3D 转换        186
11.3.1 rotateX() 方法         186
11.3.2 rotateY() 方法         188
11.3.3 转换属性         188
11.3.4 3D 转换方法        192
11.4 课堂练习       192
强化训练         194
Chapter / 12
JavaScript 入门必学
12.1 JavaScript 入门       196
12.1.1 JavaScript 的发展       196
12.1.2 JavaScript 的特点       196
12.1.3 JavaScript 应用方向        197
12.1.4 JavaScript 的用法       197
12.2 JavaScript 的基本语法      199
12.2.1 数据类型        200
12.2.2 常量和变量         202
12.2.3 运算符和表达式       203
12.2.4 基本语句        209
12.3 JavaScript 事件分析       213
12.3.1 事件类型         214
12.3.2 事件句柄         217
12.3.3 事件处理         218 Contents
12.4 课堂练习       219
强化训练         220
Chapter / 13
特效应用
13.1 JavaScript 函数       222
13.1.1 JavaScript 函数定义       222
13.1.2 JavaScript 函数参数       224
13.1.3 JavaScript 函数调用方法       227
13.2 JavaScript 应用表单       228
13.2.1 按钮对象        228
13.2.2 复选框对象         229
13.2.3 列表框对象         230
13.3 JavaScript 事件分析       231
13.3.1 轮播图效果        231
13.3.2 字体闪烁效果        235
13.3.3 鼠标滑过效果        235
13.4 JavaScript 特效制作       237
13.4.1 显示网页停留时间        237
13.4.2 制作定时关闭窗口        238
13.5 课堂练习       239
强化训练         240
Chapter / 14
综合实践应用
14.1 制作一颗流星       242
14.1.1 分析流星的尾部       242
14.1.2 绘制一颗流行        242
14.2 制作一场流星雨      244
14.2.1 制作流星星         244
14.2.2 鼠标移动的效果       246
参考文献         251