HTML5+CSS3+JavaScript从入门到精通

第1篇 HTML5基础
第1章 HTML5入门 2
视频讲解：60分钟
1.1 HTML5概述 2
1.1.1 什么是HTML 2
1.1.2 HTML的发展历史 3
1.1.3 HTML5的新特性 3
1.1.4 HTML5的目标 5
1.2 HTML5的基本结构和语法 6
1.2.1 HTML5的基本结构 6
1.2.2 HTML5的语法 7
1.3 各浏览器对HTML5的支持 9
1.4 WebStorm简介 9
1.4.1 WebStorm的下载 10
1.4.2 WebStorm的安装 10
1.5 编写第一个HTML文件 12
1.5.1 HTML文件的编写方法 12
1.5.2 手工编写页面 12
1.5.3 使用WebStorm编写页面 13
1.6 实践与练习 15
第2章 HTML5文档结构 17
视频讲解：37分钟
2.1 文档基本结构 17
2.1.1 类型声明 17
2.1.2 文件开始标签 18
2.1.3 文件头部 18
2.1.4 文件主体 19
2.1.5 注释 21
2.2 主体结构元素 22
2.2.1 article元素 22
2.2.2 section元素 24
2.2.3 nav元素 25
2.2.4 aside元素 27
2.2.5 time元素 27
2.2.6 pubdate属性 28
2.3 非主体结构元素 28
2.3.1 header元素 28
2.3.2 hgroup元素 29
2.3.3 footer元素 29
2.3.4 address元素 30
2.4 全局属性 31
2.4.1 id、class、style属性 31
2.4.2 title属性 31
2.4.3 dir属性 31
2.4.4 contentEditable属性 32
2.4.5 designMode属性 33
2.4.6 hidden属性 34
2.4.7 spellcheck属性 35
2.5 实践与练习 36
第3章 HTML5文本 37
视频讲解：68分钟
3.1 标题文本 37
3.2 普通文本 39
3.2.1 文字的斜体、下画线、删除线 39
3.2.2 文字的上标与下标 40
3.2.3 设置等宽文字 41
3.3 段落文本 42
3.3.1 段落标签 42
3.3.2 段落的换行标签 43
3.3.3 保留原始排版方式 44
3.3.4 段落缩进 45
3.4 功能性文本 45
3.4.1 标记文本 46
3.4.2 展开/收缩信息 47
3.4.3 进度信息 49
3.4.4 刻度信息 50
3.4.5 地址信息 51
3.4.6 文字标注 52
3.4.7 作品标题信息 53
3.5 实践与练习 54
第4章 HTML5表格、列表和超链接 55
视频讲解：85分钟
4.1 表格应用 55
4.1.1 表格的基本构成 55
4.1.2 设置表格的标题 57
4.1.3 设置表头 58
4.1.4 合并单元格 59
4.2 列表应用 61
4.2.1 列表的标签 61
4.2.2 无序列表 61
4.2.3 有序列表 63
4.2.4 定义列表 65
4.2.5 嵌套列表 66
4.3 超链接 70
4.3.1 绝对路径和相对路径 70
4.3.2 文本链接 70
4.3.3 设置超链接的目标窗口 71
4.4 实践与练习 73
第5章 HTML5表单 74
视频讲解：111分钟
5.1 定义表单 74
5.1.1 处理动作 75
5.1.2 表单名称 75
5.1.3 传送方法 76
5.1.4 编码方式 76
5.1.5 目标显示方式 77
5.2 常用表单控件 77
5.2.1 文本框 78
5.2.2 密码框 79
5.2.3 单选按钮 81
5.2.4 复选框 82
5.2.5 普通按钮 83
5.2.6 提交按钮 84
5.2.7 重置按钮 85
5.2.8 图像域 87
5.2.9 隐藏域 88
5.2.10 文件域 89
5.2.11 标签 90
5.2.12 使用button定义按钮 91
5.2.13 菜单和列表 92
5.2.14 文本域 93
5.3 input元素的新类型和属性 94
5.3.1 input元素的新类型 95
5.3.2 input元素的新属性 101
5.3.3 output元素 103
5.4 表单验证 104
5.4.1 自动验证 104
5.4.2 checkValidity显式验证法 105
5.4.3 避免验证 106
5.4.4 自定义错误信息 108
5.5 实践与练习 109
第6章 HTML5图像与多媒体 110
视频讲解：150分钟
6.1 使用图像 110
6.1.1 图像的基本格式 111
6.1.2 添加图像 111
6.1.3 设置图像属性 112
6.1.4 图像的超链接 114
6.1.5 图像热区链接 115
6.2 多媒体简述 117
6.3 HTML5中的多媒体 117
6.3.1 video元素与audio元素 117
6.3.2 多媒体元素的属性 118
6.4 控制多媒体播放 122
6.4.1 媒体播放时的方法 122
6.4.2 canPlayType(type)方法 124
6.5 事件监听 124
6.5.1 事件处理方式 124
6.5.2 事件介绍 125
6.5.3 事件应用 125
6.6 实践与练习 127
第7章 HTML5绘图 128
视频讲解：119分钟
7.1 Canvas概述 128
7.2 绘制基本图形 129
7.2.1 绘制直线 129
7.2.2 绘制曲线 131
7.2.3 绘制矩形 133
7.2.4 绘制圆形 135
7.3 绘制变形图形 136
7.3.1 绘制平移效果的图形 136
7.3.2 绘制缩放效果的图形 137
7.3.3 绘制旋转效果的图形 138
7.4 绘制文字 139
7.4.1 文字的轮廓 139
7.4.2 文字的填充 140
7.4.3 文字相关属性 141
7.5 SVG基础 142
7.5.1 使用SVG的原因 142
7.5.2 使用SVG的方法 143
7.6 SVG绘制基本形状 143
7.6.1 绘制矩形 143
7.6.2 绘制圆形 145
7.6.3 绘制椭圆 145
7.6.4 绘制直线 146
7.6.5 绘制折线 147
7.6.6 绘制文本 148
7.6.7 绘制路径 149
7.7 SVG中的渐变 151
7.7.1 线性渐变 151
7.7.2 径向渐变 152
7.8 实践与练习 153
第2篇 CSS3基础
第8章 CSS3概述 156
视频讲解：21分钟
8.1 CSS的概念及发展 156
8.2 CSS规则 157
8.3 在页面中使用CSS 158
8.3.1 行内样式 158
8.3.2 内嵌式样式表 158
8.3.3 链接式样式表 159
8.3.4 样式表调用的优先顺序 160
8.4 CSS的继承 160
8.4.1 HTML的继承关系 160
8.4.2 CSS继承的应用 162
8.5 实践与练习 162
第9章 CSS3选择器 163
视频讲解：52分钟
9.1 选择器概述 163
9.2 基本选择器 164
9.2.1 元素选择器 164
9.2.2 类选择器 166
9.2.3 ID选择器 167
9.2.4 属性选择器 170
9.3 复合选择器 173
9.3.1 后代选择器 173
9.3.2 子元素选择器 174
9.3.3 相邻兄弟元素选择器 175
9.3.4 通用兄弟元素选择器 175
9.4 伪类选择器和伪元素选择器 177
9.4.1 伪类选择器 177
9.4.2 伪元素选择器 177
9.5 实践与练习 180
第10章 字体和文本相关属性 181
视频讲解：28分钟
10.1 字体属性 181
10.1.1 设置字体类型 181
10.1.2 设置字体大小 182
10.1.3 设置文字颜色 183
10.1.4 设置文字粗细 183
10.2 文本属性 184
10.2.1 设置水平对齐 184
10.2.2 设置文本间距 185
10.2.3 设置行高 185
10.2.4 设置首行缩进 186
10.2.5 设置文本换行 187
10.3 实践与练习 188
第11章 背景和列表相关属性 189
视频讲解：27分钟
11.1 背景属性 189
11.1.1 设置背景颜色 189
11.1.2 设置背景图像 190
11.1.3 设置背景图像平铺方式 190
11.1.4 设置背景图像是否固定 191
11.1.5 设置背景图像位置 192
11.1.6 设置背景图像大小 192
11.1.7 设置背景图像的起点 193
11.2 列表属性 194
11.2.1 设置列表项标记的类型 195
11.2.2 使用图像替换列表项标记 195
11.3 实践与练习 196
第12章 CSS3盒模型 198
视频讲解：30分钟
12.1 框模型概述 198
12.2 设置元素大小 199
12.3 设置外边距 199
12.3.1 设置一个值 200
12.3.2 设置两个值 200
12.3.3 设置三个值 201
12.3.4 设置四个值 201
12.4 设置边框 203
12.4.1 设置边框颜色 203
12.4.2 设置边框样式 203
12.4.3 设置边框宽度 204
12.5 设置内边距 205
12.6 实践与练习 207
第13章 网页布局 209
视频讲解：17分钟
13.1 浮动布局 209
13.1.1 定义浮动 209
13.1.2 清除浮动 211
13.2 定位属性 212
13.2.1 设置定位方式 212
13.2.2 设置元素位置 212
13.2.3 设置堆叠顺序 215
13.3 实践与练习 216
第14章 CSS3变形与动画 217
视频讲解：23分钟
14.1 变换效果 217
14.1.1 定义2D平移 218
14.1.2 定义2D缩放 219
14.1.3 定义2D旋转 219
14.1.4 定义2D倾斜 220
14.2 过渡效果 221
14.2.1 指定过渡属性 222
14.2.2 指定过渡时间 222
14.2.3 指定过渡的延迟时间 223
14.2.4 指定过渡的动画类型 223
14.3 动画效果 225
14.3.1 关键帧 225
14.3.2 动画属性 226
14.4 实践与练习 228
第15章 响应式网页设计 229
视频讲解：44分钟
15.1 响应式网页设计概述 229
15.1.1 响应式网页设计的概念 229
15.1.2 响应式网页设计的优缺点和技术原理 230
15.2 常用术语 231
15.2.1 像素 231
15.2.2 屏幕分辨率 231
15.2.3 设备像素 232
15.2.4 CSS像素 232
15.3 视口 233
15.3.1 视口的概念 233
15.3.2 viewport属性 234
15.3.3 媒体查询 234
15.4 布局设计 235
15.4.1 布局的类型 236
15.4.2 布局的实现方式 236
15.4.3 布局的设计与实现 237
15.5 实践与练习 238
第3篇 JavaScript基础
第16章 JavaScript语言基础 240
视频讲解：163分钟
16.1 JavaScript简述 240
16.1.1 JavaScript的发展史 241
16.1.2 JavaScript的特点 241
16.1.3 JavaScript的使用方法 242
16.1.4 基本语法 244
16.2 基本数据类型 246
16.2.1 数值型 246
16.2.2 字符串型 248
16.2.3 布尔型 250
16.2.4 特殊数据类型 250
16.3 变量 250
16.3.1 变量的命名 250
16.3.2 变量的声明和赋值 251
16.3.3 变量的类型 252
16.4 运算符 253
16.4.1 算术运算符 253
16.4.2 字符串运算符 254
16.4.3 比较运算符 255
16.4.4 赋值运算符 256
16.4.5 逻辑运算符 257
16.4.6 条件运算符 257
16.4.7 运算符优先级 258
16.5 数据类型的转换规则 259
16.6 实践与练习 261
第17章 流程控制 262
视频讲解：108分钟
17.1 条件判断语句 262
17.1.1 if语句 262
17.1.2 switch语句 267
17.2 循环语句 269
17.2.1 while循环语句 269
17.2.2 do…while循环语句 270
17.2.3 for循环语句 272
17.2.4 for…in循环语句 273
17.2.5 循环嵌套 274
17.3 跳转语句 275
17.3.1 continue语句 275
17.3.2 break语句 276
17.4 实践与练习 277
第18章 函数 278
视频讲解：66分钟
18.1 定义函数 278
18.2 调用函数 279
18.2.1 函数的简单调用 279
18.2.2 在事件响应中调用函数 280
18.2.3 通过链接调用函数 281
18.3 函数的参数和返回值 281
18.3.1 函数的参数 281
18.3.2 函数的返回值 282
18.4 函数的嵌套调用 284
18.5 全局变量和局部变量 285
18.6 匿名函数 285
18.7 内置函数 287
18.7.1 数值处理函数 287
18.7.2 字符串处理函数 289
18.8 实践与练习 290
第19章 JavaScript对象 291
视频讲解：225分钟
19.1 对象简介 291
19.1.1 对象的概念 292
19.1.2 对象的属性和方法 292
19.1.3 JavaScript对象的种类 293
19.2 创建自定义对象 293
19.2.1 直接创建自定义对象 293
19.2.2 通过构造函数创建对象 294
19.2.3 通过Object创建对象 296
19.3 Array对象 297
19.3.1 数组简介 297
19.3.2 定义数组 298
19.3.3 访问数组元素 299
19.3.4 获取数组的长度 301
19.3.5 操作数组 303
19.4 String对象 308
19.4.1 创建String对象 308
19.4.2 获取字符串的长度 309
19.4.3 操作字符串 309
19.5 Math对象 315
19.5.1 Math对象的属性 315
19.5.2 Math对象的方法 316
19.6 Date对象 317
19.6.1 创建Date对象 317
19.6.2 Date对象的方法 319
19.7 实践与练习 321
第20章 事件处理机制 323
视频讲解：41分钟
20.1 事件概述 323
20.1.1 事件简介 324
20.1.2 事件的调用 324
20.1.3 事件对象Event 325
20.2 表单事件 326
20.2.1 onblur事件与onfocus事件 326
20.2.2 onchange事件 326
20.2.3 onsubmit事件与onreset事件 327
20.3 鼠标事件和键盘事件 328
20.3.1 鼠标事件 329
20.3.2 键盘事件 331
20.4 页面事件 333
20.4.1 onload事件 333
20.4.2 onresize事件 334
20.5 实践与练习 334
第21章 BOM编程 336
视频讲解：80分钟
21.1 Window对象概述 336
21.1.1 Window对象的属性 337
21.1.2 Window对象的方法 337
21.1.3 Window对象的使用 338
21.2 对话框 338
21.2.1 警告对话框 338
21.2.2 确认对话框 339
21.2.3 提示对话框 340
21.3 打开窗口与关闭窗口 341
21.3.1 打开窗口 341
21.3.2 关闭窗口 342
21.4 控制窗口 344
21.4.1 移动窗口 344
21.4.2 窗口滚动 346
21.4.3 访问窗口历史 347
21.4.4 设置超时 347
21.5 Document对象概述 348
21.6 Document对象的应用 349
21.6.1 设置文档前景色和背景色 350
21.6.2 设置动态标题栏 350
21.6.3 获取URL 351
21.6.4 在文档中输出数据 351
21.6.5 动态添加一个HTML标记 352
21.6.6 获取文本框并修改其内容 353
21.7 实践与练习 354
第22章 DOM编程 355
视频讲解：60分钟
22.1 DOM概述 355
22.2 获取HTML元素 357
22.2.1 使用id属性获取元素 357
22.2.2 使用标签名获取元素 358
22.2.3 使用类名获取元素 358
22.3 DOM节点属性 358
22.4 操作节点 359
22.4.1 创建节点 359
22.4.2 插入节点 360
22.4.3 删除节点 361
22.4.4 替换节点 362
22.5 获取或设置元素的HTML内容 362
22.6 JavaScript操作元素样式 364
22.6.1 Style对象简介 364
22.6.2 样式标签属性和样式属性 364
22.6.3 颜色和背景属性 367
22.6.4 边框属性 369
22.6.5 定位属性 372
22.6.6 字体属性 373
22.6.7 表格布局属性 377
22.7 实践与练习 378
第4篇 高级开发
第23章 文件与拖放 380
视频讲解：36分钟
23.1 file对象 380
23.1.1 选择文件 380
23.1.2 获取文件的类型与大小 381
23.2 读取文件 383
23.2.1 FileReader接口 383
23.2.2 预览图片 384
23.2.3 读取文本文件 385
23.3 拖放文件 386
23.3.1 拖放页面元素 386
23.3.2 DataTransfer对象的属性与方法 388
23.3.3 设置拖放效果 389
23.4 实践与练习 390
第24章 本地存储 391
视频讲解：18分钟
24.1 Web Storage 391
24.1.1 Web Storage概述 391
24.1.2 数据的存储与获取 392
24.1.3 数据的删除与清空 393
24.2 本地数据库 395
24.2.1 Web SQL数据库概述 395
24.2.2 打开和创建数据库 395
24.2.3 创建数据表 395
24.2.4 插入和查询数据 396
24.3 实践与练习 399
第25章 离线应用 400
视频讲解：21分钟
25.1 离线Web应用 400
25.1.1 离线Web应用简介 400
25.1.2 本地缓存与浏览器网页缓存的区别 401
25.2 创建离线应用 401
25.2.1 缓存清单 402
25.2.2 applicationCache对象 404
25.2.3 离线应用的事件 404
25.3 实践与练习 406
第26章 线程的使用 407
视频讲解：24分钟
26.1 Web Workers概述 407
26.1.1 创建线程 407
26.1.2 处理线程的应用 409
26.1.3 与线程进行数据的交互 411
26.2 线程中可用的对象和方法 413
26.3 加载多个JavaScript文件 413
26.4 线程嵌套 414
26.4.1 线程的单层嵌套 414
26.4.2 子线程之间的数据交互 415
26.5 实践与练习 418
第27章 通信API 419
视频讲解：9分钟
27.1 跨文档消息通信 419
27.1.1 使用postMessageAPI 419
27.1.2 跨文档消息传输 420
27.1.3 跨域通信 421
27.2 实践与练习 423
第28章 Vue.js编程 424
视频讲解：39分钟
28.1 Vue.js概述 425
28.2 Vue.js的安装 425
28.2.1 使用CDN 425
28.2.2 使用NPM 426
28.2.3 使用Vue CLI 426
28.3 应用程序实例及选项 426
28.3.1 数据 427
28.3.2 方法 427
28.3.3 生命周期钩子函数 428
28.4 数据绑定 429
28.4.1 文本插值 429
28.4.2 插入HTML 430
28.4.3 使用表达式 430
28.5 指令 431
28.5.1 v-bind指令 431
28.5.2 v-on指令 432
28.5.3 v-if指令 433
28.5.4 v-else指令 434
28.5.5 v-else-if指令 435
28.5.6 v-for指令 436
28.5.7 v-model指令 437
28.6 实践与练习 438
第29章 Bootstrap应用 439
视频讲解：95分钟
29.1 Bootstrap概述 439
29.1.1 Bootstrap的概念 439
29.1.2 Bootstrap的优点 440
29.1.3 Bootstrap包含的内容 440
29.2 Bootstrap的下载和使用 440
29.2.1 Bootstrap的下载 440
29.2.2 Bootstrap的文件结构 442
29.2.3 Bootstrap的使用 443
29.3 通用样式 444
29.3.1 文本样式 444
29.3.2 颜色样式 446
29.3.3 设置内外边距 449
29.3.4 边框与浮动 450
29.4 网格布局 453
29.4.1 网格系统概述 453
29.4.2 自动布局列 455
29.4.3 项目的对齐处理 458
29.5 实践与练习 460
第5篇 项目实战
第30章 51购商城 462
视频讲解：10分钟
30.1 项目的设计思路 462
30.1.1 项目概述 462
30.1.2 界面预览 463
30.1.3 系统功能结构 465
30.1.4 系统业务流程 465
30.1.5 文件夹组织结构 466
30.2 主页的设计与实现 466
30.2.1 主页的设计 466
30.2.2 顶部区和底部区功能的实现 468
30.2.3 商品分类导航功能的实现 469
30.2.4 轮播图功能的实现 471
30.2.5 商品推荐功能的实现 473
30.2.6 适配移动端的实现 474
30.3 商品列表页面的设计与实现 475
30.3.1 商品列表页面的设计 475
30.3.2 分类选项功能的实现 476
30.3.3 商品列表区的实现 476
30.4 商品详情页面的设计与实现 478
30.4.1 商品详情页面的设计 478
30.4.2 图片放大镜效果的实现 479
30.4.3 商品概要功能的实现 481
30.4.4 商品评价功能的实现 482
30.4.5 猜你喜欢功能的实现 484
30.5 购物车页面的设计与实现 485
30.5.1 购物车页面的设计 485
30.5.2 购物车页面的实现 486
30.6 付款页面的设计与实现 487
30.6.1 付款页面的设计 487
30.6.2 付款页面的实现 487
30.7 登录页面和注册页面的设计与实现 489
30.7.1 登录页面和注册页面的设计 489
30.7.2 登录页面的实现 490
30.7.3 注册页面的实现 491
30.8 小结 493