WEB前端开发实战:HTML5+CSS3+JAVASCRIPT+VUE+BOOTSTRAP(微视频版)

第 1 章　HTML5基础 1
1.1　HTML5概述 2
1.1.1　HTML5发展历程 2
1.1.2　HTML5设计理念 2
1.2　新建HTML5文档 4
1.2.1　创建空白文档 4
1.2.2　添加网页内容 5
1.3　头部信息 7
1.3.1　网页标题 7
1.3.2　网页元信息 7
1.3.3　文档视口 8
1.4　基本结构 10
1.4.1　定义文档结构 10
1.4.2　使用div元素 11
1.4.3　使用id和class 12
1.4.4　使用title 12
1.4.5　使用role 13
1.4.6　HTML5注释 13
1.5　主体结构 14
1.5.1　页眉 14
1.5.2　导航 14
1.5.3　主要区域 15
1.5.4　文章块 15
1.5.5　区块 16
1.5.6　附栏 16
1.5.7　页脚 17
第 2 章　文本和图像 18
2.1　标题和段落 19
2.1.1　定义标题 19
2.1.2　定义段落 20
2.2　文本格式 20
2.2.1　字体 20
2.2.2　字号 21
2.2.3　颜色 22
2.2.4　强调 23
2.2.5　注解 23
2.2.6　备选 24
2.2.7　上下标 24
2.2.8　术语 25
2.2.9　代码 26
2.2.10　预定义格式 26
2.2.11　缩写词 27
2.2.12　编辑提示 27
2.2.13　引用 28
2.2.14　引述 28
2.2.15　修饰 29
2.2.16　换行显示 30
2.3　特殊效果 30
2.3.1　高亮 30
2.3.2　进度 31
2.3.3　刻度 31
2.3.4　时间 32
2.3.5　联系信息 33
2.3.6　旁注 34
2.4　网页图像 34
2.4.1　定义图像 34
2.4.2　定义流 35
2.4.3　定义图标 36
2.4.4　定义响应式图像 36
第 3 章　音频和视频 37
3.1　使用audio元素 38
3.2　使用video元素 39
3.3　使用embed元素 40
3.4　使用object元素 41
第 4 章　列表和超链接 43
4.1　列表 44
4.1.1　无序列表 44
4.1.2　有序列表 44
4.1.3　项目编号 45
4.1.4　嵌套列表 46
4.1.5　描述列表 47
4.1.6　菜单列表 47
4.2　超链接 48
4.2.1　页间链接 48
4.2.2　块级链接 49
4.2.3　锚记链接 50
4.2.4　目标链接 50
4.2.5　邮件链接 51
4.2.6　下载链接 51
4.2.7　图像热点 51
第 5 章　CSS3基础 53
5.1　CSS3概述 54
5.1.1　CSS3样式 54
5.1.2　应用CSS3样式 55
5.1.3　CSS3样式表 55
5.1.4　CSS3代码注释 57
5.1.5　CSS3代码格式化 57
5.1.6　CSS3继承性 57
5.1.7　CSS3层叠性 58
5.2　CSS3选择器 59
5.2.1　元素选择器 59
5.2.2　关系选择器 61
5.2.3　 属性选择器 63
5.2.4　伪类选择器 64
5.2.5　伪对象选择器 67
第 6 章　文本样式 68
6.1　字体样式 69
6.1.1　字体 69
6.1.2　大小 70
6.1.3　颜色 71
6.1.4　粗体 71
6.1.5　斜体 71
6.1.6　修饰线 71
6.1.7　变体 72
6.1.8　大小写 73
6.2　文本格式 73
6.2.1　对齐 73
6.2.2　间距 74
6.2.3　行高 75
6.2.4　缩进 75
6.2.5　换行 75
6.3　书写模式 77
6.4　特殊值 78
6.5　文本效果 80
6.5.1　文本阴影 81
6.5.2　文本特效 82
6.6　颜色模式 84
6.6.1　RGBA 84
6.6.2　HSL 85
6.6.3　HSLA 85
6.6.4　opacity 86
6.7　动态内容 86
第 7 章　图像和背景样式 90
7.1　美化图像 91
7.1.1　图像大小 91
7.1.2　图像边框 92
7.1.3　半透明图片 92
7.1.4　图像圆角 93
7.1.5　图像阴影 94
7.2　背景图像 95
7.2.1　定义背景图像 95
7.2.2　定义背景原点/位置/裁剪 96
7.2.3　控制背景图像显示大小 97
7.2.4　固定背景图像 99
7.3　渐变背景 100
7.3.1　线性渐变 100
7.3.2　径向渐变 102
第 8 章　表格 105
8.1　定义表格 106
8.1.1　普通表格 106
8.1.2　列标题 106
8.1.3　表格标题 107
8.1.4　表格行/列分组 107
8.2　表格属性 108
8.2.1　内/外框线 108
8.2.2　单元格间距 109
8.2.3　细线边框 110
8.2.4　内容摘要 110
8.3　单元格属性 110
8.3.1　跨单元格显示 110
8.3.2　单元格表头 111
8.3.3　绑定表头 111
8.3.4　信息缩写 112
8.3.5　单元格分类 112
8.4　表格样式 113
第 9 章　表单 116
9.1　定义表单 117
9.1.1　设计表单结构 117
9.1.2　表单对象分组 117
9.1.3　添加提示文本 119
9.2　表单控件 119
9.2.1　文本框 120
9.2.2　密码框 121
9.2.3　文本区域 121
9.2.4　单选按钮 122
9.2.5　复选框 122
9.2.6　选择框 123
9.2.7　文件域和隐藏域 124
9.2.8　按钮 124
9.2.9　数据列表 125
9.3　表单属性 126
9.3.1　名称和值 126
9.3.2　布尔型属性 126
9.3.3　必填属性 127
9.3.4　禁止验证 128
9.3.5　多选属性 129
9.3.6　自动完成 129
9.3.7　自动获取焦点 130
9.3.8　所属表单 131
9.3.9　表单重写 131
9.3.10　高和宽 131
9.3.11　*小值/*大值/步长 132
9.3.12　匹配模式 132
9.3.13　替换文本 132
9.4　表单样式与定制表单 133
第 10 章　CSS3盒子模型 134
10.1　显示方式 135
10.2　可控大小 136
10.3　内容溢出 137
10.4　轮廓线 137
10.5　圆角边框 138
10.6　图像边框 139
10.7　盒子阴影 140
10.8　布局方式 142
10.8.1　流式布局 142
10.8.2　浮动布局 143
10.8.3　定位布局 144
第 11 章　CSS3移动布局 146
11.1　多列布局 147
11.1.1　定义列宽 147
11.1.2　定义列数 148
11.1.3　定义列间距 149
11.1.4　定义列边框 149
11.1.5　定义跨列显示 150
11.1.6　定义列高度 150
11.2　盒布局模型 151
11.2.1　定义宽度 151
11.2.2　定义顺序 152
11.2.3　定义方向 153
11.2.4　定义自适应 153
11.2.5　定义对齐方式 153
11.3　弹性盒布局 155
11.3.1　定义弹性盒 155
11.3.2　定义伸缩方向 156
11.3.3　定义行数 157
11.3.4　定义对齐方式 158
11.3.5　定义伸缩项目 159
11.4　媒体查询 161
第 12 章　CSS3变形和动画 164
12.1　变形 165
12.1.1　2D旋转 165
12.1.2　2D缩放 166
12.1.3　2D移动 167
12.1.4　2D倾斜 167
12.1.5　2D矩阵 168
12.1.6　变形原点 168
12.1.7　3D变形 169
12.1.8　3D位移 170
12.1.9　3D缩放 171
12.1.10　3D旋转 172
12.2　过渡样式 174
12.2.1　定义过渡 175
12.2.2　定义过渡时间 175
12.2.3　定义延时 176
12.2.4　定义动画效果 176
12.2.5　定义触发时机 177
12.3　关键帧动画 178
12.3.1　定义关键帧 178
12.3.2　定义帧动画 179
第 13 章　JavaScript基础 181
13.1　JavaScript概述 182
13.1.1　JavaScript的主要特点 182
13.1.2　JavaScript的基本语法 182
13.1.3　JavaScript在HTML中的使用 183
13.2　JavaScript程序 185
13.2.1　语句和语句块 185
13.2.2　代码 186
13.2.3　消息框 186
13.2.4　JavaScript注释 188
13.3　标识符和变量 188
13.3.1　标识符 188
13.3.2　变量 189
13.4　数据类型 191
13.5　运算符 191
13.5.1　算术运算符 191
13.5.2　比较运算符 192
13.5.3　赋值运算符 192
13.5.4　逻辑运算符 193
13.5.5　条件运算符 193
13.5.6　其他运算符 194
13.5.7　运算符优先级 195
13.6　表达式和赋值语句 196
13.6.1　表达式 196
13.6.2　赋值语句 196
13.7　流程控制语句 196
13.7.1　条件判断语句 197
13.7.2　循环语句 201
13.7.3　跳转语句 203
13.8　JavaScript函数 204
13.8.1　常用系统函数 204
13.8.2　自定义函数 205
13.8.3　带参数返回的return语句 206
13.8.4　函数变量的作用域 206
第 14 章　事件处理 207
14.1　JavaScript事件概述 208
14.1.1　事件类型 208
14.1.2　事件句柄 208
14.1.3　事件处理 209
14.1.4　程序返回值 212
14.2　表单事件 212
14.2.1　获取与失去焦点 212
14.2.2　提交与重置 213
14.2.3　改变与选择 215
14.3　鼠标事件 216
14.4　键盘事件 216
14.5　窗口事件 217
第 15 章　BOM和DOM 218
15.1　JavaScript常用对象 219
15.1.1　Array对象 219
15.1.2　Date对象 221
15.1.3　Math对象 223
15.1.4　Number对象 224
15.1.5　String对象 225
15.1.6　Boolean对象 226
15.2　BOM 227
15.2.1　window对象 228
15.2.2　navigator对象 229
15.2.3　screen对象 229
15.2.4　history对象 230
15.2.5　location对象 230
15.3　DOM 231
15.3.1　DOM节点树 232
15.3.2　DOM节点 232
15.3.3　DOM节点访问 234
15.3.4　DOM节点操作 237
第 16 章　Bootstrap基础 239
16.1　Bootstrap概述 240
16.1.1　什么是Bootstrap 240
16.1.2　Bootstrap的优势 240
16.1.3　Bootstrap的构成模块 240
16.2　下载与安装 241
16.2.1　下载Bootstrap 241
16.2.2　安装Bootstrap 242
16.3　开发工具 243
16.4　基本架构 244
16.4.1　文件结构 244
16.4.2　布局基础 245
16.4.3　网格系统 248
16.4.4　布局工具类 253
16.5　排版优化 254
16.5.1　标题 254
16.5.2　段落 255
16.5.3　强调/对齐/列表 256
16.6　显示代码 256
16.6.1　行内代码 256
16.6.2　多行代码块 257
16.7　响应式图片 257
16.7.1　同步缩放 257
16.7.2　缩略图 257
16.7.3　图像对齐 258
16.8　表格样式 258
第 17 章　CSS通用样式 259
17.1　文本处理 260
17.1.1　文本对齐 260
17.1.2　文本换行 261
17.1.3　大小写转换 261
17.1.4　粗体和斜体 262
17.1.5　其他文本样式类 263
17.2　颜色样式 263
17.2.1　文本颜色 263
17.2.2　链接颜色 264
17.2.3　背景颜色 264
17.3　边框样式 264
17.3.1　添加边框 264
17.3.2　边框颜色 265
17.3.3　圆角边框 265
17.4　宽度和高度 266
17.4.1　相对于父元素 266
17.4.2　相对于视口 267
17.5　边距 268
17.5.1　定义边距 268
17.5.2　响应式边距 269
17.6　浮动样式 269
17.6.1　实现浮动样式 270
17.6.2　响应式浮动样式 270
17.7　display属性 271
17.7.1　隐藏/显示元素 271
17.7.2　响应式隐藏/显示元素 271
17.8　嵌入网页元素 272
17.9　内容溢出 273
17.10　定位元素 273
17.11　阴影效果 274
第 18 章　CSS组件 275
18.1　按钮和按钮组 276
18.1.1　按钮 276
18.1.2　按钮组 278
18.2　下拉菜单 281
18.2.1　设计分裂式按钮样式 282
18.2.2　设计菜单展开方向 282
18.2.3　设计菜单分割线 282
18.2.4　激活/禁用菜单项 283
18.2.5　设计菜单项对齐方式 283
18.2.6　设计菜单偏移量 283
18.2.7　设计更多菜单内容 283
18.3　导航组件 284
18.3.1　设计水平对齐布局 285
18.3.2　设计垂直对齐布局 285
18.3.3　设计标签页导航 285
18.3.4　设计胶囊式导航 286
18.3.5　设计导航内容填充和对齐 286
18.3.6　设计导航选项卡 286
18.4　超大屏幕 287
18.5　其他CSS组件 288
18.5.1　徽章 288
18.5.2　警告框 288
18.5.3　媒体对象 289
18.5.4　进度条 290
18.5.5　导航栏 291
第 19 章　JavaScript插件 292
19.1　JavaScript插件概述 293
19.1.1　安装插件 293
19.1.2　调用插件 294
19.1.3　事件 295
19.2　模态框 295
19.2.1　设计模态框垂直居中 297
19.2.2　设计模态框大小 298
19.2.3　添加模态框和工具提示 298
19.2.4　调用模态框 298
19.2.5　为模态框添加用户行为 299
19.3　下拉菜单 299
19.3.1　调用下拉菜单 300
19.3.2　设置下拉菜单 301
19.3.3　为下拉菜单添加用户行为 301
19.4　弹窗 301
19.4.1　设计弹窗方向 303
19.4.2　调用弹窗 303
19.4.3　为弹窗添加用户行为 304
19.5　工具提示 304
19.5.1　工具提示方向 305
19.5.2　调用工具提示 306
19.5.3　为工具提示添加用户行为 307
19.6　标签页 307
19.6.1　调用标签页 308
19.6.2　为标签页添加用户行为 309
19.7　其他JavaScript插件 310
19.7.1　按钮 310
19.7.2　警告框 310
19.7.3　折叠 311
第 20 章　使用Vue 313
20.1　Vue概述 314
20.1.1　Vue.js产生的背景 314
20.1.2　Vue.js的安装和导入 314
20.2　Vue实例和组件 315
20.2.1　Vue实例 315
20.2.2　Vue组件 316
20.3　Vue模板语法 324
20.3.1　插值表达式 324
20.3.2　指令 327
20.4　Vue的data属性 337
20.5　Vue方法 338
20.6　Vue计算属性 340
20.7　Vue监听器 341