《HTML5跨平台开发基础与实战》是“十三五”江苏省高等学校重点教材(编号：2020-2-101)，也是新世纪高职高专教材编审委员会组编的软件专业系列规划教材之一。
通过本教材的学习，学生将掌握使用HTML5、CSS3、JavaScript及Bootstrap框架进行响应式Web应用程序开发的知识。本教材以培养职业能力为核心，以工作实践为主线，以项目为导向，采用案例式教学，兼顾界面布局样式与交互性，增加课程内容的视觉冲击力，以创建出更富交互性、更有趣、对用户更友好的前端应用。
本教材涉及的是国家“1+X”Web前端开发职业技能证书考试的核心内容。本教材在编写过程中，既强调基础理论学习，结合前端技术的不断发展，通过相关案例详细介绍前端开发相关理论的实践运用，实现了理论学习的体系化，又与实践应用进行了结合，强化了对相关知识的理解。本教材以丰富的案例为载体，精心编排教学内容，设计了由易到难、层次递进的教学项目，并设计了贯穿知识体系的实战项目，让读者学以致用；实现了技术讲解与训练的合二为一，有助于“教、学、做”一体化教学的实施。本教材内容设计框架如下：
本教材作者有着多年的实际项目开发经验，并有着丰富的高职高专教育教学经验，完成了多轮次、多类型的教育教学改革与研究工作。
本教材可以利用互联网信息技术开展线上与线下教学，包含了大量的微课视频、教学PPT等配套资源，方便教师教学和学生学习。
在编写本教材的过程中，编者参考、引用和改编了国内外出版物中的相关资料以及网络资源，在此对他们表示深深的谢意！相关著作权人看到本教材后，请与出版社联系，出版社将按照相关法律的规定支付稿酬。
由于时间仓促，书中难免存在不妥之处，请读者原谅，并欢迎提出宝贵意见。
编 者
2021年8月
任务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
0
样
荐
