HTML5+CSS3+JavaScript+jQuery程序设计基础教程 第2版
作者: 闫俊伢,耿强 主编
出版时间: 2018年版
内容简介
本书涵盖了HTML5的各种新特性,主要内容包括HTML5概述、JavaScript、HTML5表单及文件处理、CSS、拖放、Canvas API画图、绘制可伸缩矢量图形、播放多媒体、Web通信、本地存储、开发支持离线的Web应用程序、获取浏览器的地理位置信息、支持多线程编程的Web Workers、jQuery等。读者在阅读本书时可以充分了解和体验HTML5的强大功能。
目录
第1章 HTML5概述 1
1.1 HTML基础 2
1.1.1 什么是HTML 2
1.1.2 HTML的历史 2
1.2 HTML4基础 3
1.2.1 设置网页背景和颜色 3
1.2.2 设置字体属性 4
1.2.3 超级链接 4
1.2.4 图像和动画 6
1.2.5 表格 6
1.2.6 使用框架 8
1.2.7 其他常用标签 9
1.3 HTML5的新特性 12
1.3.1 简化的文档类型和字符集 12
1.3.2 HTML5的新结构 13
1.3.3 HTML5的新增内联元素 16
1.3.4 支持动态页面 18
1.3.5 全新的表单设计 21
1.3.6 强大的绘图和多媒体功能 21
1.3.7 打造桌面应用的一系列新功能 22
1.3.8 获取地理位置信息 22
1.3.9 支持多线程 23
1.3.10 small?元素 23
1.3.11 contenteditable属性 23
1.3.12 placeholder属性 23
1.3.13 废弃的标签 24
1.4 支持HTML5的浏览器 25
练习题 26
第2章 JavaScript编程 28
2.1 在HTML中使用JavaScript语言 29
2.1.1 在HTML中插入JavaScript代码 29
2.1.2 使用js文件 29
2.2 基本语法 30
2.2.1 数据类型 30
2.2.2 变量 30
2.2.3 注释 31
2.2.4 运算符 31
2.3 常用语句 34
2.3.1 条件分支语句 34
2.3.2 循环语句 38
2.4 函数 41
2.4.1 创建自定义函数 42
2.4.2 调用函数 42
2.4.3 变量的作用域 43
2.4.4 函数的返回值 44
2.5 面向对象程序设计 44
2.5.1 面向对象程序设计思想简介 44
2.5.2 JavaScript内置类 45
2.5.3 HTML DOM 53
2.5.4 Window对象 54
2.5.5 Navigator对象 58
2.5.6 document对象 60
2.6 JavaScript事件处理 61
2.6.1 常用的HTML事件 61
2.6.2 Window对象的事件处理 63
2.6.3 Event对象 63
2.7 渐进式前端框架Vue.js 64
2.7.1 下载和安装Vue.js 64
2.7.2 MVVM开发模式 65
2.7.3 Vue.js的开发流程 66
2.7.4 Vue.js的常用指令 67
2.8 使用webpack+Vue构建模块化项目 72
2.8.1 webpack 72
2.8.2 Babel 76
练习题 81
第3章 HTML5表单及文件处理 83
3.1 HTML4表单 84
3.1.1 定义表单 84
3.1.2 文本框 84
3.1.3 文本区域 85
3.1.4 单选按钮 86
3.1.5 复选框 86
3.1.6 组合框 87
3.1.7 按钮 87
3.2 HTML5表单的新特性 89
3.2.1 新的标签类型 89
3.2.2 新的表单元素 92
3.2.3 新的表单属性 94
3.2.4 表单验证 95
3.3 在Vue.js表单控件上实现双向数据绑定 97
3.3.1 在input和textarea元素上实现双向数据绑定 97
3.3.2 在复选框上实现双向数据绑定 99
3.3.3 在select列表上实现双向数据绑定 100
3.3.4 在单选按钮上实现双向数据绑定 101
3.3.5 修饰符 102
3.4 文件处理 102
3.4.1 选择文件的表单控件 102
3.4.2 检测浏览器是否支持HTML5 File API 103
3.4.3 FileList接口 103
3.4.4 FileReader接口 105
练习题 107
第4章 最新版本的层叠样式表——CSS3 109
4.1 CSS基础 110
4.1.1 什么是CSS 110
4.1.2 在HTML文档中应用CSS 111
4.1.3 颜色与背景 113
4.1.4 设置字体 114
4.1.5 设置文本属性 115
4.1.6 超链接 120
4.1.7 列表 122
4.1.8 表格 124
4.1.9 CSS 轮廓 127
4.1.10 浮动元素 129
4.2 CSS3的新技术 130
4.2.1 实现圆角效果 130
4.2.2 多彩的边框颜色 134
4.2.3 阴影 135
4.2.4 背景图片 136
4.2.5 多列 138
4.2.6 嵌入字体 142
4.2.7 透明度 143
4.2.8 HSL和HSLA颜色表现方法 145
4.3 CSS3应用实例 146
4.3.1 HTML5+CSS3设计页面布局 147
4.3.2 设计漂亮的导航菜单 151
4.3.3 设计登录页面 153
4.4 前端CSS框架Bootstrap 156
4.4.1 下载和使用Bootstrap 156
4.4.2 布局容器 159
4.4.3 栅格系统 159
4.4.4 Bootstrap布局组件 160
练习题 163
第5章 HTML5拖放 165
5.1 概述 166
5.1.1 什么是拖放 166
5.1.2 设置元素为可拖放 166
5.1.3 拖放事件 166
5.2 传递拖曳数据 167
5.2.1 dataTransfer对象的属性 167
5.2.2 dataTransfer对象的方法 168
5.3 HTML5拖放的实例 169
5.3.1 拖放HTML元素 169
5.3.2 拖放文件 170
5.4 在Vue.js中实现拖曳功能 171
5.4.1 require.js 171
5.4.2 注册vuedraggable.js组件 172
5.4.3 在HTML中使用vuedraggable.js组件 172
5.4.4 应用实例 174
练习题 176
第6章 使用Canvas API画图 177
6.1 Canvas元素 178
6.1.1 Canvas元素的定义语法 178
6.1.2 使用JavaScript获取网页中的Canvas对象 178
6.2 坐标与颜色 179
6.2.1 坐标系统 179
6.2.2 颜色的表示方法 179
6.3 绘制图形 180
6.3.1 绘制直线 180
6.3.2 绘制贝塞尔曲线 182
6.3.3 绘制矩形 185
6.3.4 绘制圆弧 187
6.4 描边和填充 188
6.4.1 描边 189
6.4.2 填充图形内部 192
6.4.3 渐变颜色 193
6.4.4 透明颜色 197
6.5 绘制图像与文字 198
6.5.1 绘制图像 198
6.5.2 输出文字 200
6.6 图形的操作 203
6.6.1 保存和恢复绘图状态 204
6.6.2 移动 205
6.6.3 缩放 206
6.6.4 旋转 206
6.6.5 变形 207
6.7 组合和阴影 209
6.7.1 组合图形 209
6.7.2 绘制阴影 212
6.8 HTML5 Canvas应用实例 213
6.8.1 绘制漂亮的警告牌 213
6.8.2 动画实例:小型太阳系模型 215
练习题 218
第7章 绘制可伸缩矢量图形(SVG) 220
7.1 SVG概述 221
7.1.1 SVG的特性 221
7.1.2 XML基础 221
7.1.3 SVG实例 222
7.1.4 SVG坐标系统 223
7.1.5 在HTML5中使用SVG 223
7.2 SVG形状 224
7.2.1 绘制直线 224
7.2.2 绘制折线 225
7.2.3 绘制矩形 226
7.2.4 绘制圆形 226
7.2.5 绘制椭圆 227
7.2.6 绘制多边形 227
7.2.7 路径 228
7.3 线条和填充 230
7.3.1 设置线条的属性 230
7.3.2 填充 233
7.4 SVG文本与图片 234
7.4.1 输出文本 234
7.4.2 SVG图片 237
7.5 SVG滤镜 237
7.5.1 定义滤镜 237
7.5.2 应用滤镜 238
7.6 渐变颜色 239
7.6.1 线性渐变 239
7.6.2 放射性渐变 240
7.7 变换坐标系 241
7.7.1 视窗变换——viewBox属性 241
7.7.2 用户坐标系的变换——transform属性 242
练习题 244
第8章 播放多媒体 245
8.1 HTML5音频 246
8.1.1 audio标签 246
8.1.2 播放背景音乐 247
8.1.3 设置替换音频源 247
8.1.4 使用JavaScript语言访问audio对象 248
8.2 HTML5视频 252
8.2.1 video标签 252
8.2.2 使用JavaScript语言访问video对象 253
8.3 视频播放插件video.js 259
练习题 260
第9章 Web通信 261
9.1 跨文档消息机制 262
9.1.1 检测浏览器对跨文档消息机制的支持情况 262
9.1.2 使用postMessage API发送消息 262
9.1.3 监听和处理消息事件 264
9.2 XMLHttpRequest Level 2 265
9.2.1 创建XMLHttpRequest对象 265
9.2.2 发送HTTP请求 266
9.2.3 从服务器接收数据 266
9.2.4 进行HTTP头(HEAD)请求 269
9.2.5 超时控制 272
9.2.6 使用FormData对象向服务器发送数据 272
9.2.7 使用FormData对象上传文件 274
9.3 WebSocket 279
9.3.1 什么是Socket 279
9.3.2 WebSocket API概述 281
9.3.3 WebSocket API编程 282
9.3.4 WebSocket服务器 284
练习题 286
第10章 本地存储 287
10.1 概述 288
10.1.1 HTML4的本地数据存储方式 288
10.1.2 HTML5本地存储技术概述 289
10.2 localstorage 290
10.2.1 浏览器对localstorage的支持情况 290
10.2.2 使用localstorage保存数据 290
10.2.3 获取localstorage中的数据 291
10.2.4 删除localstorage中的数据 292
10.2.5 storage事件 292
10.3 sessionstorage 294
10.3.1 判断浏览器是否支持sessionstorage 294
10.3.2 使用sessionstorage保存数据 295
10.3.3 获取sessionstorage中的数据 295
10.3.4 删除sessionstorage中的数据 296
10.4 Web SQL Database API 296
10.4.1 判断浏览器是否支持Web SQL Database API 296
10.4.2 新建数据库 297
10.4.3 执行SQL语句 297
10.5 IndexedDB 300
10.5.1 数据库的相关概念 300
10.5.2 判断浏览器是否支持IndexedDB 302
10.5.3 创建和打开数据库 302
10.5.4 创建对象存储空间ObjectStore 303
10.5.5 创建索引 305
10.5.6 事务 306
10.5.7 游标 309
练习题 313
第11章 开发支持离线的Web应用程序 315
11.1 HTML5离线Web应用程序概述 316
11.1.1 什么是离线Web应用程序 316
11.1.2 开发离线Web应用程序需要完成的工作 317
11.2 开发HTML5离线Web应用程序 317
11.2.1 Application Cache API 318
11.2.2 Cache Manifest文件 318
11.2.3 更新缓存 320
11.2.4 检测在线状态 323
练习题 324
第12章 获取浏览器的地理位置信息 325
12.1 概述 326
12.1.1 什么是浏览器的地理位置 326
12.1.2 浏览器对获取地理位置信息的支持情况 326
12.2 获取地理位置信息 327
12.2.1 getCurrentPosition()方法 327
12.2.2 watchPosition()方法 329
12.2.3 clearWatch()方法 330
12.3 数据保护 330
12.3.1 在Internet Explorer 9中配置共享地理位置 330
12.3.2 在Chrome中配置共享地理位置 332
12.3.3 在Firefox中配置共享地理位置 334
练习题 335
第13章 支持多线程编程的Web Workers 336
13.1 概述 337
13.1.1 什么是线程 337
13.1.2 什么是HTML5 Web Workers 338
13.1.3 浏览器对Web Workers的支持情况 338
13.2 Web Workers编程 339
13.2.1 创建Web Workers对象 339
13.2.2 终止Web Workers对象 341
13.2.3 共享线程 341
练习题 343
第14章 jQuery程序设计 344
14.1 jQuery基础 345
14.1.1 下载jQuery 345
14.1.2 初识jQuery 345
14.2 jQuery选择器 347
14.2.1 基础选择器 347
14.2.2 层次选择器 350
14.2.3 基本过滤器 354
14.2.4 内容过滤器 355
14.2.5 可见性过滤器 357
14.2.6 属性过滤器 357
14.2.7 子元素过滤器 359
14.3 设置HTML元素的属性与CSS样式 360
14.3.1 设置HTML元素的属性 360
14.3.2 设置CSS样式 363
14.4 表单编程 367
14.4.1 表单选择器 367
14.4.2 表单过滤器 369
14.4.3 表单API 371
14.5 事件和Event对象 375
14.5.1 事件处理函数 375
14.5.2 Event对象 375
14.5.3 绑定到事件处理函数 377
14.5.4 键盘事件 378
14.5.5 鼠标事件 379
14.5.6 文档加载事件 380
14.5.7 浏览器事件 380
14.6 jQuery动画 382
14.6.1 执行自定义的动画 382
14.6.2 显示和隐藏HTML元素 383
14.6.3 淡入淡出效果 384
14.6.4 滑动效果 388
14.6.5 动画队列 391
14.7 jQuery Mobile 394
练习题 400
第15章 HTML5移动Web开发 401
15.1 移动Web开发的原则 402
15.1.1 响应式网页与自适应网页 402
15.1.2 设计原则 403
15.1.3 使用响应式图像 405
15.1.4 使用谷歌浏览器Chrome测试响应式网页 405
15.1.5 通过JavaScript判断移动设备的屏幕尺寸 409
15.1.6 响应式导航插件Mmenu 410
15.2 HTML5前端框架 413
15.2.1 跨平台的移动App开发框架PhoneGap 413
15.2.2 使用Framework7开发混合移动应用 417
练习题 444