任务1　实现猜拳游戏首页界面　1
　1.1　Web前端简述　2
　　1.1.1　前端工程师　2
　　1.1.2　页面结构、样式和行为　3
　　1.1.3　HTML5的优势　3
　　1.1.4　CSS3的优势　3
　　1.1.5　JavaScript及相关框架　3
　　1.1.6　Web前端学习路线　4
　1.2　开发工具　5
　　1.2.1　选择开发工具　5
　　1.2.2　新建项目和文件　7
　　1.2.3　开发工具的调试技巧　10
　任务训练　13

任务2　实现问卷调查页面静态布局　15
　2.1　HTML的基本概念　15
　　2.1.1　HTML简介　15
　　2.1.2　HTML基本格式　18
　　2.1.3　HTML注释语句　19
　2.2　HTML5文档常用标签　19
　　2.2.1　文字段落相关标签　20
　　2.2.2　HTML图像<img>元素　21
　　2.2.3　列表　22
　　2.2.4　表格　23
　　2.2.5　超链接　26
　　2.2.6　DIV标签介绍　27
　　2.2.7　多媒体元素　27
　　2.2.8　HTML5语义化标签　28
　　2.2.9　HBuilder编辑器常用的快捷方式　31
　2.3　HTML5 表单相关元素和属性　32
　　2.3.1　表单的定义　32
　　2.3.2　表单控件　33
　　2.3.3　HTML5表单常用新属性　37
　任务训练　40

任务3　CSS3实现简洁立体菜单效果　43
　3.1　CSS3介绍　44
　　3.1.1　样式表简介　44
　　3.1.2　样式表的规则　44
　　3.1.3　样式表注释方法　45
　3.2　样式表的使用　45
　　3.2.1　常用添加CSS的方法　45
　　3.2.2　选择器的分类　47
　　3.2.3　选择器的优先级　49
　3.3　字体、颜色、背景与文字属性　49
　　3.3.1　设置样式表的字体属性　49
　　3.3.2　颜色及背景属性　51
　　3.3.3　文本属性　53
　3.4　边距、填充与边框属性　55
　　3.4.1　边距与填充属性　55
　　3.4.2　边框属性　56
　3.5　列表属性　58
　3.6　CSS布局基础　63
　　3.6.1　CSS布局元素类型　63
　　3.6.2　盒模型　63
　　3.6.3　定位及尺寸属性　63
　3.7　常用布局结构　65
　　3.7.1　单行单列结构　65
　　3.7.2　二列布局结构　66
　3.8　CSS3常用特效　68
　　3.8.1　CSS3盒阴影　68
　　3.8.2　CSS3文字阴影　70
　　3.8.3　CSS3渐变背景　71
　3.9　弹性布局　73
　3.10　兼容性处理　75
　任务训练　78

任务4　实现猜拳游戏功能　81
　4.1　JavaScript简述　82
　　4.1.1　常用的引入JavaScript的方式　83
　　4.1.2　JavaScript输出语句　83
　　4.1.3　调试JavaScript程序　85
　　4.1.4　页面结构、样式和行为　87
　4.2　数据类型和运算符　87
　　4.2.1　数值型　87
　　4.2.2　字符串型　88
　　4.2.3　布尔型　88
　　4.2.4　未定义值和空值　89
　　4.2.5　数据类型的自动转换　89
　　4.2.6　JavaScript常用运算符　89
　4.3　变量和函数　91
　　4.3.1　变量的命名与声明　91
　　4.3.2　函数的定义与调用　92
　　4.3.3　变量的作用域　93
　4.4　常用的内置函数　94
　4.5　基本语句　95
　　4.5.1　编写JavaScript语句注意事项　95
　　4.5.2　流程控制语句：分支结构　95
　　4.5.3　流程控制语句：循环结构　97
　4.6　日期(Date)对象和数学(Math)对象　99
　　4.6.1　日期(Date)对象　99
　　4.6.2　数学(Math)对象　99
　4.7　DOM基础　100
　　4.7.1　DOM对象意义　100
　　4.7.2　获取元素对象的一般方法　101
　　4.7.3　DOM元素的innerHTML属性的应用　102
　　4.7.4　DOM事件　102
　4.8　动态改变元素样式　104
　任务训练　107

任务5　实现注册|登录验证效果　110
　5.1　DOM进阶　112
　　5.1.1　DOM节点常用的属性和方法　112
　　5.1.2　导航节点关系　113
　　5.1.3　新增的几种常用方法和属性　114
　5.2　表格动态操作　116
　　5.2.1　动态插入行和单元格　116
　　5.2.2　动态删除某行　117
　5.3　数组(Array)对象　117
　　5.3.1　数组的创建与访问　117
　　5.3.2　数组对象的常用属性与方法　118
　　5.3.3　定时器函数　122
　5.4　字符串(String)对象　124
　　5.4.1　使用字符串对象　124
　　5.4.2　字符串对象的属性与方法　125
　　5.4.3　字符串对象应用案例　126
　5.5　JavaScript正则表达式　126
　　5.5.1　正则表达式中常用符号　126
　　5.5.2　正则表达式对象常用方法　128
　　5.5.3　表单应用　128
　5.6　本地存储　130
　　5.6.1　Web存储简介　130
　　5.6.2　Web存储的使用　130
　5.7　jQuery简介　131
　　5.7.1　jQuery工厂函数　132
　　5.7.2　jQuery选择器　132
　　5.7.3　创建jQuery应用　133
　任务训练　140

任务6　实现响应式详情页面　143
　6.1　Bootstrap4初体验　144
　　6.1.1　Bootstrap4相关文件的引用　144
　　6.1.2　移动设备优先　145
　　6.1.3　布局容器样式类　146
　　6.1.4　响应式图像　147
　6.2　Bootstrap4颜色设置　148
　　6.2.1　Bootstrap4颜色　148
　　6.2.2　Bootstrap4各色按钮　148
　　6.2.3　Bootstrap4信息提示框　150
　　6.2.4　Bootstrap4 Jumbotron　151
　任务训练　154

任务7　实现响应式商品优惠列表　156
　7.1　Bootstrap4网格系统　157
　　7.1.1　Bootstrap4网格样式类　157
　　7.1.2　Bootstrap4网格系统的使用　157
　7.2　Bootstrap4常用组件　159
　　7.2.1　Bootstrap4导航　159
　　7.2.2　Bootstrap4选项卡　161
　　7.2.3　Bootstrap4导航栏　163
　　7.2.4　Bootstrap4列表组　168
　　7.2.5　Bootstrap4卡片　169
　　7.2.6　Bootstrap4折叠　170
　　7.2.7　Bootstrap4表格　173
　　7.2.8　Bootstrap4轮播　176
　任务训练　180

任务8　实现响应式购物列表展示和管理　182
　8.1　Bootstrap4表单相关组件　183
　　8.1.1　Bootstrap4表单　183
　　8.1.2　Bootstrap4单、复选框　188
　　8.1.3　Bootstrap4模态框　192
　8.2　Bootstrap4弹性布局　195
　　8.2.1　Bootstrap4内外边距样式类的引用　195
　　8.2.2　Bootstrap4 Flex(弹性)布局　196
　　8.2.3　Bootstrap4多媒体对象实现服饰列表页　197
　任务训练　213

任务9　实现商品优惠列表评价信息滑入效果　215
　9.1　CSS3过渡(transition)　216
　　9.1.1　CSS3过渡(transition)简介　216
　　9.1.2　过渡效果的使用　216
　9.2　CSS3 2D转换(transform)　221
　　9.2.1　scale()方法　221
　　9.2.2　translate()方法　222
　　9.2.3　rotate()方法　223
　　9.2.4　skew()方法　224
　9.3　CSS3动画(animation)　225
　　9.3.1　CSS3动画简介　225
　　9.3.2　动画效果的使用　225
　　9.3.3　动画效果综合应用　231
　9.4　拓展：常用的3D转换　234
　　9.4.1　3D转换常用属性和方法　234
　　9.4.2　3D转换rotateX()和rotateY()的使用　234
　　9.4.3　3D转换综合应用　236
　任务训练　242

参考文献　244

全部下载