模 块1 前端开发技术综述
1.1 前端开发概述 2
1.2 前端开发的发展历程 3
1.3 Web 前端开发技术介绍
3
1.3.1 HTML 3
1.3.2 CSS 4
1.3.3 JavaScript 4
1.3.4 前端框架简介 5
1.4 Web 前端开发工具介绍
6
1.4.1 Visual Studio
Code 7
1.4.2 WebStorm 8
1.4.3 HBuilder X 9
1.4.4 Sublime Text
11
1.4.5 浏览器 12
1.5 前端开发工具的安装 13
练习题 14
模 块2 HTML 基础知识
2.1 HTML 概述
16
2.1.1 HTML 的主要功能
16
2.1.2 HTML 的发展历史
17
2.1.3 HTML 的编辑环境
17
2.2 HTML 的文档结构
18
2.3 HTML 基本语法
19
2.4 HTML 文档类型声明
20
2.5 注释和特殊符号 22
2.6 HTML 常用标签与属性
23
2.6.1 HTML 的常用标签
23
2.6.2 HTML 的属性
29
练习题 30
模 块3 HTML5 基础知识
3.1 HTML5
入门 32
3.1.1 HTML5 的发展与优势
32
3.1.2 HTML5 的新功能
33
3.1.3 HTML5 新增的元素
34
3.1.4 HTML5 新增的元素属性
36
3.1.5 HTML5 废弃的元素
37
3.1.6 HTML5 废弃的属性
37
3.2 HTML5
的文本与段落 37
3.2.1 文本的基本标签与用法 38
3.2.2 段落的基本标签与用法 43
3.3 HTML5
的列表和表格 45
3.3.1 列表结构与标签 45
3.3.2 表格结构与标签 47
3.4 HTML5
的图片与超链接 49
3.4.1 网页中的图片 50
3.4.2 图片标签 50
3.4.3 定义超链接 53
3.5 HTML5
的表单 55
3.5.1 表单的结构和基本标签 55
3.5.2 表单元素的基本属性 60
3.6 注册类表单示例 62
练习题 64
模 块4 HTML5 的进阶应用
4.1 画布功能 68
4.1.1 canvas 元素与坐标
68
4.1.2 canvas 绘制路径
70
4.1.3 canvas 文本
75
4.1.4 canvas 渐变
76
4.2 HTML5
的音频和视频 77
4.2.1 audio 标签
78
4.2.2 video 标签
79
4.3 拖放功能 82
练习题 84
模 块5 CSS 样式基础
5.1 CSS 概述
86
5.1.1 CSS 的基本语法
86
5.1.2 CSS 的特点
86
5.1.3 使用CSS 87
5.1.4 CSS 的注释
88
5.2 CSS 选择器
89
5.2.1 简单选择器 89
5.2.2 组合器选择器 91
5.2.3 属性选择器 94
5.2.4 伪类选择器 95
5.2.5 伪元素选择器 98
5.3 盒子模型 99
5.3.1 盒子模型简介 99
5.3.2 盒子模型的属性 100
5.4 CSS 的浮动与定位
102
5.4.1 浮动 102
5.4.2 定位 104
5.5 字体样式 105
5.6 段落样式 108
5.6.1 字符间距 108
5.6.2 单词间距 109
5.6.3 段落缩进 109
5.6.4 文本行间距 110
5.6.5 横向对齐 111
5.6.6 纵向对齐 111
5.7 边框样式 111
5.8 轮廓样式 114
练习题 118
模 块6 CSS3 样式表应用
6.1 CSS3 简介
120
6.1.1 CSS3 与CSS 的异同 120
6.1.2 CSS3 浏览器的支持情况
120
6.2 CSS3 的新增功能
120
6.2.1 CSS3 新增的rem 120
6.2.2 新增结构性伪类 122
6.2.3 新增UI 元素状态伪类
126
6.2.4 新增属性伪类和其他伪类 128
6.3 CSS3 文本效果
131
6.3.1 text-shadow 文本阴影
131
6.3.2 text-overf
low 文本溢出 132
6.3.3 word-wrap 文本换行
133
6.3.4 单词拆分 134
6.4 CSS3 边框样式
135
6.4.1 border-radius
圆角边框 135
6.4.2 box-shadow 盒子阴影
137
6.5 背景样式 138
6.5.1 background-size
背景尺寸 138
6.5.2 background-origin
背景的绘制区域 140
6.6 渐变 142
6.6.1 线性渐变 142
6.6.2 径向渐变 144
6.7 转换 146
6.7.1 2D 转换 146
6.7.2 3D 转换 152
6.8 CSS3 动画
157
6.8.1 动画属性 157
6.8.2 实现动画 159
练习题 162
模 块7 JavaScript 语言基础
7.1 JavaScript
简介 164
7.1.1 网页中的JavaScript
164
7.1.2 JavaScript 脚本块在网页中的处理
166
7.2 JavaScript
语法规则 168
7.3 JavaScript
中的数据类型 170
7.4 运算符和表达式 172
7.4.1 运算符概述 172
7.4.2 运算符的优先级 175
7.4.3 表达式 176
7.5 JavaScript
对象 176
7.5.1 对象的创建 176
7.5.2 属性的设置和读取 177
7.5.3 对象的方法 177
7.5.4 对象的继承 178
7.6 数组 179
7.7 流程控制 180
7.7.1 条件语句 180
7.7.2 循环语句 182
7.8 函数 187
7.8.1 定义函数 187
7.8.2 调用函数 187
7.8.3 函数的返回值 188
7.9 作用域 188
7.10 事件 190
7.10.1 事件类型 190
7.10.2 事件句柄 192
7.10.3 事件处理 193
7.10.4 HTML 标签与事件
194
7.10.5 常用事件 195
练习题 198
模 块8 浏览器对象模型与窗口内置对象
8.1 浏览器对象模型 200
8.1.1 窗口对象window 概述
200
8.1.2 窗口的打开和关闭 201
8.1.3 窗口的移动 203
8.1.4 窗口尺寸的调整 204
8.1.5 与时间有关的窗口调整 204
8.2 窗口的内置对象 205
8.2.1 location 对象
205
8.2.2 history 对象
205
8.2.3 navigator 对象
206
8.2.4 screen 对象
206
练习题 207
模 块9 文档对象模型与表单
9.1 文档对象模型 210
9.1.1 HTML DOM 简介
210
9.1.2 文档对象document
212
9.1.3 DOM 的元素对象
213
9.1.4 DOM 的属性对象
215
9.2 form 对象
219
9.2.1 <form> 标签
219
9.2.2 表单对象 220
9.2.3 表单对象的方法和事件 220
9.3 表单元素 222
9.3.1 给表单元素命名 222
9.3.2 <input>
标签 223
9.3.3 文本框 224
9.3.4 按钮 225
9.3.5 单选按钮 226
9.3.6 复选框 228
9.3.7 多行文本域 229
9.3.8 选择列表 230
9.4 表单验证示例 232
练习题 234
模块10 Bootstrap 基础及简单应用
10.1 Bootstrap 概述 236
10.2 Bootstrap 的引入和文件结构 236
10.2.1 引入Bootstrap
236
10.2.2 基本文件结构 237
10.3 Bootstrap 的布局 237
10.3.1 布局基础 238
10.3.2 栅格系统 240
10.3.3 布局工具类 240
10.4 Bootstrap 的实用工具类 241
10.4.1 文本处理 241
10.4.2 颜色 242
10.4.3 边框 243
10.4.4 宽度和高度 244
10.4.5 边距 245
10.4.6 浮动 245
10.4.7 嵌入 246
10.5 Bootstrap 的CSS 组件 247
10.5.1 按钮 247
10.5.2 导航 249
10.5.3 表单 250
10.5.4 卡片 251
10.5.5 列表组 253
10.5.6 面包屑 254
10.5.7 分页 255
10.5.8 进度条 256
10.6 Bootstrap
应用示例 257
练习题 259
参考文献 262