第1章 Web前端开发快速入门 1
1.1 初识Web 2
1.1.1 什么是Web 2
1.1.2 Web页的分类 2
1.1.3 Web的工作过程 2
1.1.4 URL统一资源定位器 3
1.2 Web前端开发语言 3
1.2.1 HTML标记语言 4
1.2.2 CSS样式 5
1.2.3 JavaScript脚本语言 6
1.3 Web前端集成开发软件 10
1.3.1 Sublime Text概述 10
1.3.2 Sublime Text 3的下载 10
1.3.3 Sublime Text 3的安装 12
1.3.4 利用Sublime Text 3创建HTML文档 13
第2章 HTML网页中的文本和图像 15
2.1 HTML中的元素 16
2.1.1 标题元素 16
2.1.2 段落元素和水平线元素 16
2.1.3 实例:在网页中排版一首古诗 17
2.2 元素的属性 17
2.2.1 属性的语法格式 17
2.2.2 实例:对网页中的古诗进一步排版 18
2.3 文本元素 19
2.3.1 常用的文本元素 19
2.3.2 实例:文本元素的应用 19
2.4 文本的超链接 20
2.4.1 相对地址与绝对地址 21
2.4.2 超链接元素及其属性 21
2.4.3 实例:超链接的应用 22
2.4.4 实例:文件下载链接 23
2.4.5 实例:锚链接 24
2.5 图像元素 25
2.5.1 GIF格式 26
2.5.2 JPEG格式 26
2.5.3 图像元素的属性 26
2.5.4 实例:图像的显示 27
2.5.5 实例:图像的大小和对齐方式 28
2.5.6 图像的超链接 29
2.6 列表元素 30
2.6.1 无序列表元素 30
2.6.2 有序列表元素 31
2.6.3 定义列表元素 31
2.6.4 列表元素的应用 31
第3章 HTML网页中的表格和框架 33
3.1 HTML中的表格 34
3.1.1 表格的三个基本元素 34
3.1.2 表格的标题和列头 35
3.1.3 表格的合并单元格 36
3.1.4 表格的属性 38
3.1.5 表格的表头、主体和页脚元素 40
3.1.6 表格列的美化 42
3.2 HTML中的框架 43
3.2.1 框架组元素 43
3.2.2 框架元素 44
3.2.3 实例:窗口的上下设置 44
3.2.4 实例:窗口的左右设置 45
3.2.5 实例:窗口的嵌套设置 46
3.2.6 窗口的名称和链接 47
3.2.7 内联框架元素 49
第4章 HTML网页中的表单 51
4.1 初识表单 52
4.2 表单中的常用控件元素 52
4.2.1 文本框控件 52
4.2.2 按钮控件 53
4.2.3 实例:用户登录界面 53
4.2.4 单选框控件 54
4.2.5 复选框控件 55
4.2.6 实例:个人信息统计 55
4.2.7 下拉列表框控件 56
4.2.8 datalist控件 57
4.2.9 实例:下拉列表框和datalist控件的应用 57
4.3 电子邮箱控件和图像提交按钮 58
4.4 网址控件 60
4.5 number控件和range控件 61
4.6 日期时间类控件 62
4.6.1 日期控件和时间控件 63
4.6.2 月份控件和星期控件 63
4.6.3 日期+时间控件和本地日期时间控件 63
4.6.4 实例:日期时间类控件的应用 63
4.7 搜索控件、颜色控件和选择文件控件 66
4.8 多行文本框控件 67
4.9 output控件 69
4.10 进度条控件和度量条控件 70
4.11 label控件和button控件 71
4.12 fieldset控件和legend控件 72
第5章 HTML网页中的canvas绘图 75
5.1 利用canvas绘制画布 76
5.2 利用canvas绘制基本图形 77
5.2.1 绘制线段 77
5.2.2 线段的样式 78
5.2.3 绘制矩形 79
5.2.4 绘制圆和圆弧 80
5.2.5 实例:绘制扇面 82
5.3 利用canvas绘制文本 83
5.4 填充渐变色 84
5.4.1 线性渐变色 85
5.4.2 放射状渐变色 86
5.5 创建带有阴影的图形和文字 87
5.6 利用canvas操作图像 89
5.6.1 绘制图像 89
5.6.2 利用图像填充图形 90
第6章 HTML网页中的音频和视频 93
6.1 HTML网页中的音频 94
6.2 HTML网页中的视频 95
6.2.1 利用video元素播放视频 95
6.2.2 利用source元素解决浏览器播放视频的兼容问题 96
6.2.3 实例:自定义按钮实现视频的控制操作 97
6.3 利用embed元素嵌入Flash动画 99
第7章 HTML网页中的布局元素 101
7.1 初识HTML网页中的布局 102
7.2 header元素和footer元素 102
7.2.1 header布局元素 102
7.2.2 footer布局元素 103
7.2.3 利用header和footer元素布局网页页面 103
7.3 article元素 104
7.4 section元素 106
7.5 aside元素 107
7.6 nav元素 108
7.7 hgroup、address和time元素 109
7.8 figure和figcaption元素 111
7.9 实例:手机端HTML网页的布局 112
7.9.1 制作手机端的HTML网页 112
7.9.2 测试手机端的HTML网页 113
7.9.3 制作section元素内容 114
7.9.4 制作header元素内容 116
7.9.5 制作aside元素内容 117
7.9.6 制作footer元素内容 118
第8章 CSS基础 121
8.1 初识CSS 122
8.1.1 什么是CSS 122
8.1.2 CSS样式的作用 122
8.2 CSS的语法 122
8.2.1 CSS的基本语法 123
8.2.2 选择器的类型 124
8.2.3 CSS的注释 128
8.3 CSS的引用方式 129
8.3.1 嵌入样式表 129
8.3.2 链接外部样式表 129
8.3.3 内嵌样式 131
8.3.4 CSS样式的优先级 132
第9章 CSS中的各种样式 133
9.1 字体样式 134
9.1.1 font-family字体类型 134
9.1.2 font-size字体大小 135
9.1.3 font-weight字体粗细 137
9.1.4 font-style字体倾斜 137
9.1.5 color字体颜色 137
9.2 段落样式 138
9.2.1 text-decoration文本修饰 139
9.2.2 text-transform大小写转换 140
9.2.3 text-indent首行缩进 140
9.2.4 text-align对齐方式 142
9.2.5 line-height行高 142
9.3 边框样式 143
9.3.1 边框的宽度和颜色 144
9.3.2 边框的外观 144
9.3.3 边框的局部样式 145
9.4 背景样式 147
9.4.1 background-color背景颜色 148
9.4.2 背景图像 149
9.5 图像样式 151
9.5.1 图像的大小、边框和水平对齐方式 151
9.5.2 图像的垂直对齐方式 152
9.5.3 文字环绕效果 154
9.5.4 设置文字与图像的间距 155
第10章 CSS盒子模型和布局 157
10.1 CSS盒子模型 158
10.1.1 CSS盒子模型的4个属性 158
10.1.2 实例:CSS盒子模型的应用 159
10.2 CSS定位布局 161
10.2.1 固定定位 161
10.2.2 相对定位 162
10.2.3 绝对定位 163
10.2.4 静态定位 164
10.3 CSS浮动布局 164
10.3.1 浮动属性float 164
10.3.2 清除浮动属性clear 167
第11章 CSS特殊效果与动画 169
11.1 CSS圆角效果 170
11.1.1 border-radius属性 170
11.1.2 为4个圆角设置不同的弧度 171
11.2 CSS渐变色效果 172
11.2.1 线性渐变色 172
11.2.2 复杂的线性渐变色 174
11.2.3 径向渐变色 176
11.3 CSS阴影效果 177
11.4 过渡动画 178
11.4.1 过渡属性 179
11.4.2 过渡动画效果实例 179
11.5 2D转换动画 180
11.5.1 2D缩放动画效果 181
11.5.2 2D移动动画效果 182
11.5.3 2D旋转动画效果 183
11.5.4 2D拉伸动画效果 184
11.6 3D转换动画 185
11.6.1 3D转换常用属性 185
11.6.2 3D旋转动画效果 185
11.6.3 3D缩放动画效果 187
11.6.4 3D移动动画效果 189
11.7 animation动画 191
11.7.1 animation属性 191
11.7.2 制作animation动画的流程 192
第12章 JavaScript编程的初步知识 195
12.1 基本数据类型 196
12.1.1 数值型 196
12.1.2 字符串型 198
12.1.3 布尔型 201
12.1.4 空值型 202
12.1.5 未定义值 202
12.2 变量 203
12.2.1 什么是变量 204
12.2.2 变量的命名规则 204
12.2.3 变量的声明 204
12.2.4 变量的赋值 206
12.3 数据类型的转换 208
12.3.1 数据类型的自动转换 208
12.3.2 数据类型的强制转换 208
12.3.3 基本数据类型转换 208
12.3.4 提取整数的parseInt()方法 210
12.3.5 提取浮点数的parseFloat()方法 210
12.3.6 计算表达式值的eval()方法 210
12.4 运算符的应用 211
12.4.1 算术运算符的应用 212
12.4.2 赋值运算符的应用 215
12.4.3 位运算符的应用 217
12.5 JavaScript的语法规则 218
12.5.1 大小写敏感性 219
12.5.2 可选的分号 219
12.5.3 代码注释 220
第13章 JavaScript编程的判断结构 221
13.1 if语句 222
13.1.1 if语句的一般格式 222
13.1.2 实例:任意输入两个数,显示两个数的大小关系 222
13.2 if......else语句 224
13.2.1 if......else语句的一般格式 224
13.2.2 实例:任意输入两个学生的成绩,显示成绩较高的学生成绩 224
13.2.3 实例:任意输入一个正数,判断奇偶性 225
13.3 多个if&else语句 227
13.3.1 实例:企业奖金发放系统 227
13.3.2 实例:每周计划系统 229
13.4 关系运算符 230
13.4.1 关系运算符及意义 230
13.4.2 实例:成绩评语系统 231
13.5 逻辑运算符 233
13.5.1 逻辑运算符及意义 234
13.5.2 实例:判断是否是闰年 234
13.5.3 实例:剪刀、石头、布游戏 235
13.6 嵌套if语句 237
13.6.1 嵌套if语句的一般格式 237
13.6.2 实例:判断一个数是否是5或7的倍数 237
13.6.3 实例:用户登录系统 239
13.7 条件运算符和条件表达式 240
13.8 switch语句 242
13.8.1 switch语句的一般格式 242
13.8.2 实例:根据输入的数显示相应的星期几 242
第14章 JavaScript编程的循环结构 245
14.1 while循环 246
14.1.1 while循环的一般格式 246
14.1.2 实例:利用while循环显示100之内的自然数 246
14.1.3 实例:随机产生10个随机数,并显示最大的数 247
14.1.4 实例:猴子吃桃问题 248
14.2 do-while循环 249
14.2.1 do-while循环的一般格式 249
14.2.2 实例:计算1+2+3+&+100的和 250
14.2.3 实例:阶乘求和 250
14.3 for循环 252
14.3.1 for循环的一般格式 252
14.3.2 实例:利用for循环显示100之内的偶数 252
14.3.3 实例:小球反弹的高度 253
14.4 for...in语句 254
14.5 循环嵌套 255
14.5.1 实例:九九乘法表 256
14.5.2 实例:分解质因数 256
14.5.3 实例:绘制“#”号的菱形 258
14.5.4 实例:杨辉三角 259
14.5.5 实例:弗洛伊德三角形 261
14.6 break语句 262
14.7 continue语句 263
第15章 JavaScript编程的函数和正则表达式 265
15.1 初识函数 266
15.2 函数的定义与调用 266
15.2.1 定义函数 266
15.2.2 调用函数 267
15.3 函数参数的使用 268
15.3.1 值传递 269
15.3.2 地址传递 270
15.4 函数的返回值 273
15.4.1 return语句的语法格式 273
15.4.2 实例:显示数组中的最大数 274
15.5 递归函数 275
15.6 正则表达式 276
15.6.1 什么是正则表达式 276
15.6.2 正则表达式的语法格式 277
15.6.3 RegExp对象 277
15.6.4 RegExp对象的属性 278
15.6.5 String对象的4个方法 278
15.6.6 高级正则表达式 283
第16章 JavaScript的对象编程 287
16.1 初识对象编程 288
16.1.1 面向对象 288
16.1.2 基于对象 289
16.1.3 基于对象的JavaScript 289
16.2 对象的属性和方法 289
16.2.1 对象的属性 290
16.2.2 对象的方法 290
16.3 预定义对象 291
16.4 自定义对象 291
16.4.1 创建对象 291
16.4.2 创建对象的方法 294
16.4.3 对象的删除 297
16.5 Array对象 297
16.5.1 创建Array对象 297
16.5.2 访问数组元素 298
16.5.3 多维数组 299
16.5.4 Array对象的常用属性和方法 300
16.6 Math对象 302
16.7 Date对象 304
16.7.1 Date对象的创建方式 304
16.7.2 Date对象的方法 304
16.8 Object对象 307
第17章 JavaScript的表单验证和Cookie处理 309
17.1 JavaScript的表单验证 310
17.1.1 获得表单信息 310
17.1.2 检验表单的方法 311
17.1.3 利用JavaScript获取个人信息统计 312
17.1.4 利用JavaScript获取下拉列表框和datalist控件中的信息 313
17.1.5 利用JavaScript获取电子邮箱信息 314
17.1.6 利用JavaScript改变网页的背景色 315
17.1.7 利用JavaScript实现文本框的智能输入 317
17.2 JavaScript的Cookie处理 318
17.2.1 什么是Cookie 318
17.2.2 Cookie的属性 319
17.2.3 Cookie的储存 320
17.2.4 Cookie的读取 322
第18章 JavaScript的网页特效 325
18.1 JavaScript的文字特效 326
18.1.1 文字的跑马灯动画效果 326
18.1.2 打字动画效果 327
18.1.3 大小不断变化的文字动画效果 330
18.1.4 颜色不断变化的文字动画效果 331
18.1.5 来回升降的文字动画效果 333
18.2 JavaScript的图像特效 335
18.2.1 动态改变图像的位置 335
18.2.2 图像不断闪烁的动画效果 336
18.2.3 拖动鼠标改变图像大小 338
18.3 JavaScript的时间特效 339
18.3.1 分时问候时间特效 339
18.3.2 动态显示当前日期和时间效果 340
18.3.3 时间倒计时页面效果 342
18.4 JavaScript的鼠标事件特效 343
18.4.1 不允许单击鼠标左右键特效 343
18.4.2 动态显示鼠标的当前坐标 345
18.5 JavaScript的菜单特效 346
18.5.1 下拉菜单特效 346
18.5.2 滚动的导航菜单特效 347
第19章 JavaScript窗口的控制和提醒功能 349
19.1 JavaScript的window对象 350
19.1.1 window对象的属性 350
19.1.2 window对象的方法 351
19.1.3 在JavaScript中引用window对象属性和方法 352
19.2 窗口的基本操作 352
19.2.1 打开窗口 352
19.2.2 关闭窗口 355
19.2.3 移动或改变窗口大小 356
19.3 与用户交互的对话框 357
19.3.1 提示对话框 357
19.3.2 询问对话框 358
19.3.3 输入对话框 360
第20章 JavaScript的DOM编程 363
20.1 初识文档对象模型 364
20.1.1 DOM中的节点 364
20.1.2 Node对象 365
20.1.3 Node对象的常用属性和方法 365
20.1.4 实例:HTML文档的节点属性 366
20.2 访问文档中的对象 368
20.2.1 getElementsByTagName()方法 368
20.2.2 getElementById()方法 369
20.2.3 getElementsByName()方法 370
20.3 节点的基本操作 371
20.3.1 节点的生成 371
20.3.2 节点的添加和插入 372
20.3.3 节点的替换 375
20.3.4 节点的删除 376
20.4 对属性进行操作 377
20.5 事件驱动及处理 379
第21章 JavaScript的框架库jQuery 383
21.1 初识框架库jQuery 384
21.1.1 jQuery的下载 384
21.1.2 jQuery的使用 385
21.2 jQuery的常用选择器 386
21.3 jQuery的常用事件方法 389
21.3.1 $(document).ready()事件方法 389
21.3.2 鼠标常用事件方法 390
21.3.3 键盘常用事件方法 392
21.4 jQuery的动画效果 394
21.4.1 显示和隐藏动画效果 394
21.4.2 淡入和淡出动画效果 395
21.4.3 滑动动画效果 397
21.4.4 自定义动画 399