本书系统讲解HTML5程序设计需要掌握的HTML5、CSS3和JavaScript的基本知识,并按照循序渐进的科学原则组织内容,知识体系完整、结构清晰、叙述简洁、例题典型丰富、可操作性强。通过学习本书,读者能够掌握使用HTML5进行客户端页面设计和客户端程序开发的基本技术。全书分为4部分。第1部分详细介绍HTML5网页设计基础知识,包括网页设计概述、HTML5语言、HTML5表单;第2部分详细介绍CSS3相关知识,包括CSS基础,CSS盒子模型,CSS高级选择器,DIV+CSS布局,CSS过渡、转换与动画;第3部分详细介绍JavaScript程序设计,包括JavaScript基础、JavaScript对象、JavaScript事件处理和AJAX基础;第4部分详细介绍HTML5应用,包括HTML5 Canvas绘制图形、HTML5音频和视频技术。本书内容丰富,注重实际编程与开发能力的培养。本书包含配套源代码、习题参考答案、电子课件、教学大纲、实验指导等。本书可作为高等学校计算机科学与技术、计算机应用、网络工程、软件工程等专业的“网页设计与制作”“JavaScript程序设计”“HTML5程序设计”课程的教材,也可作为相关培训学校的培训教材,还可作为网页设计人员的参考书。
范伊红,河南科技大学软件学院副教授,软件技术教研室主任,曾获河南科技大学优秀教师、河南科技大学教学质量二等奖、河南省总工会教学技能竞赛二等奖。2020年获得河南省本科教育线上教学优秀课程三等奖。曾出版《数据通信与计算机网络》《Visual FoxPro程序设计》《基于HTML5的网页设计及应用》等于。
第1章 网页设计概述 1
1.1 网页的前生与今世 1
1.1.1 互联网和网页的诞生 1
1.1.2 网页的发展 2
1.1.3 网站和网页 3
1.2 网页相关术语 4
1.3 网页设计基础知识 5
1.3.1 网页的尺寸 5
1.3.2 网页的颜色 6
1.3.3 网页的布局 7
1.4 网站设计流程 9
小结 10
习题 10
第2章 HTML5语言 11
2.1 HTML5概述 11
2.1.1 HTML5的发展历程 11
2.1.2 HTML5的新特性 12
2.2 HTML5基础 13
2.2.1 创建第一个HTML5页面 13
2.2.2 HTML5标记及属性 15
2.2.3 HTML5语法 16
2.2.4 HTML5文档结构 17
2.3 HTML5常用标记 22
2.3.1 文本控制标记 22
2.3.2 图像标记 27
2.3.3 超链接标记 30
2.3.4 列表标记 34
2.3.5 结构标记 36
2.3.6 表格标记 39
2.3.7 浮动框架标记 44
2.3.8 多媒体标记 45
2.3.9 分组标记 47
2.3.10 交互标记 48
2.4 全局属性 51
小结 52
习题 52
第3章 HTML5表单 54
3.1 表单设计基础 54
3.2 表单标记 55
3.2.1 <form>标记 55
3.2.2 输入标记<input> 56
3.2.3 下拉列表框标记<select> 63
3.2.4 多行文本输入框标记<textarea> 64
3.2.5 表单分组标记<fieldset>与分组标题标记<legend> 64
3.2.6 按钮标记<button> 65
3.2.7 绑定标记<label> 65
3.2.8 输出标记<output> 66
3.2.9 生成密钥对标记<keygen> 66
3.3 综合示例 67
小结 68
习题 69
第4章 CSS基础 70
4.1 CSS概述 70
4.1.1 CSS的发展历史 70
4.1.2 CSS3的特点 70
4.2 CSS的基本语法 71
4.2.1 CSS的样式规则 71
4.2.2 CSS的引用方法 71
4.2.3 CSS基本选择器 74
4.2.4 CSS样式书写和命名规范 78
4.3 利用CSS设置文字样式与图像样式 79
4.3.1 设置文字样式 79
4.3.2 设置图像样式 90
4.4 CSS的继承特性 93
4.5 CSS的层叠特性 95
4.6 浏览器的兼容性 97
小结 99
习题 99
第5章 CSS盒子模型 101
5.1 盒子模型的概念 101
5.2 盒子模型的相关属性 101
5.2.1 border属性 102
5.2.2 内容属性 107
5.2.3 padding属性 109
5.2.4 margin属性 110
5.2.5 box-sizing属性 112
5.2.6 box-shadow属性 113
5.2.7 背景属性 113
5.2.8 渐变属性 119
5.2.9 设置颜色的不透明度 122
5.3 盒子模型之间的关系 123
5.3.1 标准文档流 123
5.3.2 div元素和span元素 124
5.3.3 元素类型的转换 127
5.3.4 盒子模型在标准流中的定位 128
5.3.5 盒子模型的浮动与定位 130
5.3.6 z-index空间位置 137
5.4 利用CSS设置列表、表格和表单样式 139
5.4.1 设置列表样式 139
5.4.2 设置表格样式 143
5.4.3 设置表单样式 147
5.4.4 鼠标指针特效 149
小结 149
习题 149
第6章 CSS高级选择器 151
6.1 属性选择器 151
6.2 关系选择器 152
6.2.1 子元素选择器 152
6.2.2 兄弟选择器 153
6.3 伪类与伪元素选择器 154
6.3.1 伪类选择器 154
6.3.2 伪元素选择器 162
小结 166
习题 166
第7章 DIV+CSS布局 168
7.1 常见网页布局 168
7.1.1 宽度固定且居中版式 168
7.1.2 “工”字形版式 172
7.2 响应式布局 176
7.2.1 什么是响应式布局 176
7.2.2 媒体查询 178
7.2.3 视口 179
7.2.4 响应式布局简单案例 180
小结 182
习题 183
第8章 CSS3过渡、转换与动画 184
8.1 CSS3过渡 184
8.1.1 transition属性需包含的内容 184
8.1.2 实现过渡效果需满足的条件 184
8.1.3 transition属性的分解 185
8.1.4 过渡应用案例——商品列表效果 186
8.2 CSS3 2D转换 188
8.2.1 transform属性 188
8.2.2 transform-origin属性 190
8.2.3 2D转换应用案例——任意元素在窗口中居中 191
8.3 CSS3 3D转换 192
8.3.1 CSS3中的3D坐标系 192
8.3.2 透视原理 193
8.3.3 3D转换方法 194
8.3.4 3D转换应用案例——立方体效果 194
8.4 CSS3动画 196
8.4.1 动画序列 196
8.4.2 animation属性 197
8.4.3 animation属性的分解 198
8.4.4 动画应用案例——旋转的立方体 198
小结 200
习题 200
第9章 JavaScript基础 202
9.1 JavaScript概述 202
9.1.1 JavaScript简介 202
9.1.2 JavaScript嵌入网页的方式 203
9.1.3 JavaScript的特点 207
9.1.4 JavaScript代码的编写习惯 207
9.2 JavaScript语法基础 208
9.2.1 数据类型、常量、变量 208
9.2.2 数据类型的转换 212
9.2.3 运算符和表达式 213
9.2.4 JavaScript程序流程控制 218
9.2.5 JavaScript函数 225
小结 234
习题 234
第10章 JavaScript对象 236
10.1 对象的基本概念 236
10.1.1 对象和类 236
10.1.2 使用对象 237
10.1.3 对象废除 238
10.2 内置对象 238
10.2.1 Math对象 238
10.2.2 Number对象 240
10.2.3 Boolean对象 241
10.2.4 String对象 241
10.2.5 Array对象 243
10.2.6 Date对象 248
10.2.7 Object对象 249
10.2.8 Function对象 251
10.2.9 RegExp对象 254
10.2.10 JavaScript JSON 256
10.2.11 Error对象 257
10.3 BOM对象 258
10.3.1 window对象 258
10.3.2 location对象 262
10.3.3 navigator对象 263
10.3.4 history对象 263
10.3.5 screen对象 264
10.3.6 document对象 265
10.4 DOM对象 270
10.4.1 DOM节点树 270
10.4.2 节点属性和节点 方法 271
10.4.3 获取节点 273
10.4.4 操作节点 278
小结 281
习题 281
第11章 JavaScript事件处理 284
11.1 事件模型 284
11.1.1 原始事件模型 284
11.1.2 DOM事件模型 286
11.2 event对象 289
11.3 HTML5事件 290
11.3.1 window事件 290
11.3.2 表单事件 291
11.3.3 键盘事件 292
11.3.4 鼠标事件 295
11.3.5 媒介事件 298
小结 299
习题 299
第12章 AJAX基础 301
12.1 AJAX简介 301
12.1.1 AJAX工作原理 301
12.1.2 AJAX的应用场景 302
12.2 XMLHttpRequest对象 302
12.2.1 XMLHttpRequest对象概述 302
12.2.2 AJAX示例 305
12.3 XMLHttpRequest Level 2 对象 309
12.3.1 XMLHttpRequest Level 2对象概述 309
12.3.2 发送和接收文本数据 311
12.3.3 文件上传和接收二进制数据 312
12.3.4 跨域资源共享 315
小结 317
第13章 HTML5 Canvas绘制图形 318
13.1 HTML5 Canvas概述 318
13.1.1 Canvas的发展历程 318
13.1.2 HTML5 Canvas标记 318
13.2 HTML5 Canvas API 319
13.2.1 检测浏览器支持情况 319
13.2.2 绘制简单图形 320
13.2.3 绘制路径 321
13.2.4 绘图样式 322
13.2.5 绘制矩形 324
13.2.6 绘制曲线 325
13.2.7 绘制图像 327
13.2.8 图形渐变 328
13.2.9 图形变形 330
13.2.10 绘制文本 333
13.2.11 绘制阴影 334
13.2.12 基本动画 335
13.3 HTML5 Canvas应用 337
小结 339
第14章 HTML5音频和视频技术 340
14.1 HTML5音频 340
14.1.1 音频格式 340
14.1.2 <audio>标记 340
14.1.3 使用JavaScript操控audio 对象 341
14.1.4 HTML5 audio对象示例 344
14.2 HTML5视频 347
14.2.1 视频格式 347
14.2.2 <video>标记 348
小结 350