《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