Web客户端开发 HTML5+CSS+JavaScript实例教程

第1章 网站前端设计知识准备 1
1.1 Web基础 2
1.1.1 Web的基本概念 2
1.1.2 了解“Web标准” 2
1.1.3 静态网页 4
1.1.4 动态网页 4
1.2 网站开发 4
1.2.1 网站开发的基本流程 4
1.2.2 网站开发的人才需求 5
1.2.3 网站开发的主要技术 6
1.3 Web前端工程师需要掌握的技能 6
1.3.1 Web前端工程师的工作内容 6
1.3.2 Web前端工程师需要掌握的
技术 6
1.4 网站开发工具介绍 8
1.4.1 原型设计工具 8
1.4.2 开发工具 9
1.4.3 调试工具 9
1.4.4 代码托管工具 10
本章小结 10
习题 11
第2章 HTML 5基础 13
2.1 HTML简介 14
2.1.1 了解HTML 14
2.1.2 HTML元素 15
2.2 初识HTML 5 16
2.2.1 了解HTML 5 16
2.2.2 HTML 5的新功能 17
2.2.3 HTML 5的废弃标记 18
2.2.4 HTML 5的新增标记 18
2.2.5 HTML 5的新增属性 19
2.3 HTML 5的结构 20
2.3.1 HTML 5的基本结构 20
2.3.2 编写第一个符合W3C标准的
HTML 5网页 21
2.4 HTML 5文档的常用标记 22
2.4.1 文本段落的相关标记 22
2.4.2 图像标记 23
2.4.3 超链接 24
2.4.4 列表 26
2.4.5 表格 27
2.4.6 HTML 5的音频和视频 29
2.5 HTML 5的表单元素 32
2.5.1 创建表单 32
2.5.2 input输入类型控件 32
2.5.3 列表框(select) 39
2.5.4 多行文本输入框(textarea) 39
2.5.5 表单控件综合示例 40
2.6 HTML 5语义化结构性元素 41
2.6.1 新增的主体结构元素 41
2.6.2 新增的非主体结构元素 46
2.7 小型案例实训：使用结构元素进行
网页布局 47
本章小结 49
习题 49
第3章 CSS基础 51
3.1 CSS概述 52
3.1.1 什么是CSS 52
3.1.2 CSS的发展史 52
3.1.3 CSS 3简介 53
3.2 CSS的组成 53
3.2.1 基本语法规则 53
3.2.2 选择符的分类 54
3.3 在HTML中使用CSS的方法 61
3.3.1 行内样式 61
3.3.2 内部样式 61
3.3.3 外部样式 62
3.3.4 CSS的优先级 63
3.3.5 常用的CSS 3属性前缀 63
本章小结 63
习题 64
第4章 CSS布局 65
4.1 CSS的盒模型 66
4.1.1 盒模型的结构 66
4.1.2 盒模型的元素类型 67
4.1.3 使用DIV 69
4.1.4　外边距、内边距与边框的
CSS设置 70
4.1.5 CSS 3对盒模型边框的完善 74
4.2 网页元素的定位 78
4.2.1 定位属性position 78
4.2.2 float浮动定位 81
4.2.3 其他CSS布局定位方式 83
4.3 DIV + CSS常用的布局方式 84
4.3.1 单列水平居中布局 85
4.3.2 浮动的布局 87
4.3.3 div嵌套布局 89
4.3.4 CSS 3多列布局 92
4.4 列表元素布局 94
4.5 小型案例实训——布局电商网站
首页(制作盒模型) 95
4.5.1 布局网页的总体结构 95
4.5.2 区域的
结构分析及布局 96
4.5.3
内容区域的设计 98
4.5.4 区域的
设计 100
本章小结 100
习题 101
第5章 CSS样式属性 103
5.1 CSS 3字体相关属性 104
5.1.1 设置字体属性 104
5.1.2 设置字体属性的综合示例 106
5.1.3 CSS 3新增字体属性 106
5.2 CSS控制文本的样式 107
5.2.1 文本属性 107
5.2.2 设置文本属性的综合示例 109
5.2.3 CSS 3新增的文本属性 110
5.3 使用CSS控制背景 114
5.3.1 背景属性 114
5.3.2 背景设置综合示例 116
5.3.3 CSS 3新增的与背景相关的
属性 116
5.4 使用CSS设置列表样式 121
5.4.1 CSS列表属性 121
5.4.2 列表属性的综合实例 122
5.5 小型案例实训 123
5.5.1 案例1：商品信息展示 123
5.5.2 案例2：CSS制作二级导航
下拉菜单 125
本章小结 128
习题 128
第6章 JavaScript入门 131
6.1 JavaScript概述 132
6.1.1 认识JavaScript 132
6.1.2 JavaScript的特点和作用 132
6.1.3 在网页中使用JavaScript 134
6.1.4 JavaScript代码规范 135
6.2 变量、数据类型 136
6.2.1 变量的声明和使用 136
6.2.2 JavaScript的基本数据类型 138
6.3 表达式与运算符 141
6.3.1 表达式 141
6.3.2 运算符 141
6.4 流程控制语句 148
6.4.1 分支结构 148
6.4.2 循环结构 151
6.5 JavaScript的函数 154
6.5.1 函数的定义 154
6.5.2 函数的调用 154
6.5.3 使用函数的返回值 157
6.5.4 函数的嵌套 158
6.5.5 内置函数 158
6.6 小型案例实训——制作简易
计算器 160
本章小结 162
习题 162
第7章 JavaScript中的对象 165
7.1 JavaScript的常用内置对象 166
7.1.1 数组对象 166
7.1.2 字符串(String)对象 170
7.1.3 日期(Date)对象 172
7.1.4 数学(Math)对象 174
7.2 常用文档对象 177
7.2.1 文档对象模型(DOM对象) 177
7.2.2 文档对象的节点树 178
7.2.3 文档对象(document) 185
7.2.4 表单及其控件对象 188
7.2.5 style对象 190
7.3 常用窗口对象 192
7.3.1 屏幕对象 192
7.3.2 window窗口对象 194
7.3.3 浏览器信息对象 196
7.3.4 网址对象 197
7.3.5 历史记录对象 198
7.4 小型案例实训 200
7.4.1 案例1：将英文单词首字母
改成大写 200

7.4.2 案例2：限制多行文本域
输入的字符个数 202
本章小结 204
习题 205
第8章 事件处理 209
8.1 了解JavaScript事件 210
8.1.1 JavaScript的常用事件 210
8.1.2 调用事件处理程序的方法 211
8.2 常用事件在网页中的应用 213
8.2.1 鼠标事件 213
8.2.2 表单事件 216
8.2.3 页面相关事件 221
8.2.4 键盘事件 222
8.3 小型案例实训：JavaScript实现
广告图像轮播 223
本章小结 227
习题 227
第9章 利用JavaScript实现Canvas
功能 229
9.1 创建Canvas元素 230
9.2 绘制基本图形 231
9.2.1 绘制直线 232
9.2.2 绘制圆形 232
9.2.3 绘制矩形 233
9.2.4 绘制多边形 234
9.3 图形的变换 235
9.3.1 保存与恢复Canvas状态 235
9.3.2 移动坐标位置 236
9.3.3 缩放图形 237
9.4 使用特效 237
9.5 绘制文本 239
9.6 小型案例实训：用Canvas绘制
时钟 240
9.6.1 绘制静态时钟 240
9.6.2 制作动态时钟 244
本章小结 244
习题 245
第10章 综合案例——购物车功能的
实现 247
10.1 案例介绍 248
10.2 设计思路 248
10.3 实施过程 249
10.3.1 购物车的HTML结构 249
10.3.2 购物车的样式设计 251
10.3.3 利用JavaScript实现购物车
功能 256
参考文献 262