HTML5应用开发与实战

领先的实用技能——打造前端开发工程师

科学的训练模式——授人以渔而不只是作品临摹

真实的项目驱动——行业知识与专业设计相呼应

便捷的学习体验——传统教材与二维码革命性携手

前 言

随着互联网技术的飞速发展，“互联网+”时代已经悄然到来，这自然催生了互联网行业工种的细分，前端开发工程师这个职业应运而生，各行业、企业对前端设计开发人才的需求也日益增长。与传统网页开发设计人员相比，新“互联网+”时代对前端开发工程师提出了更高的要求，传统网页开发设计人员已无法胜任。在这样的大环境下，这套“前端开发工程师系列”教材应运而生，它旨在帮助读者快速成长为符合“互联网+”时代企业需求的优秀的前端开发工程师。

“前端开发工程师系列”教材是由课工场（kgc.cn）的教研团队研发的。课工场是北京大学下属企业北京课工场教育科技有限公司推出的互联网教育平台，专注于互联网企业各岗位人才的培养。平台汇聚了数百位来自知名培训机构、高校的顶级名师和互联网企业的行业专家，面向大学生以及需要“充电”的在职人员，针对与互联网相关的产品设计、开发、运维、推广和运营等岗位，提供在线的直播和录播课程，并通过遍及全国的几十家线下服务中心提供现场面授以及多种形式的教学服务，并同步研发出版最新的课程教材。参与本书编写的还有于继武、李杰、于琳琳、李礼等院校教师。

课工场为培养互联网前端设计开发人才，特别推出“前端开发工程师系列”教育产品，提供各种学习资源和支持，包括：

 现场面授课程

 在线直播课程

 录播视频课程

 案例素材下载

 学习交流社区

 QQ讨论组（技术，就业，生活）

以上所有资源请访问课工场www.kgc.cn。

本套教材特点

（1）科学的训练模式

 科学的课程体系。

 创新的教学模式。

 技能人脉，实现多方位就业。

 随需而变，支持终身学习。

（2）真实的项目驱动

 覆盖80%的网站效果制作。

 几十个实训项目，涵盖电商、金融、教育、旅游、游戏等行业。

（3）便捷的学习体验

 每章提供二维码扫描，可以直接观看相关视频讲解和案例操作。

 课工场开辟教材配套版块，提供素材下载、学习社区等丰富在线学习资源。

读者对象

（1）初学者：本套教材将帮助你快速进入互联网前端开发行业，从零开始逐步成长为专业的前端开发工程师。

（2）初级前端开发者：本套教材将带你进行全面、系统的互联网前端设计开发学习，帮助你梳理全面、科学的技能理论，提供实用的开发技巧和项目经验。

课工场出品（kgc.cn）

前言
课程设计说明
关于引用作品版权说明

第1章 HTML5结构 1
1 什么是HTML5 2
2 HTML5新增元素 3
2.1 HTML5结构元素 3
2.2 HTML5网页元素 9
2.3 HTML5废除的元素 11
2.4 HTML5全局属性 11
2.5 HTML5废除的属性 12
3 CSS3高级选择器 13
本章总结 20
本章作业 20
第2章 HTML5表单 21
1 HTML5表单在网页中的应用 22
2 HTML5新增的input类型 23
2.1 新增的input类型 23
2.1.1 email类型的应用 23
2.1.2 url类型的应用 25
2.1.3 number类型的应用 26
2.1.4 range类型的应用 27
2.1.5 Date pickers类型的应用 28
2.2 浏览器对HTML5的支持 31
3 HTML5新增的input属性 33
4 自定义错误提示信息 37
4.1 validity属性 37
4.2 使用CSS设置验证样式 44
本章总结 44
本章作业 45
第3章 CSS3基础 46
1 CSS3边框效果 47
1.1 border-radius 47
1.2 border-image 53
1.3 box-shadow 55
2 CSS3文本效果 59
2.1 text-shadow 59
2.2 word-wrap 62
3 CSS3背景 63
4 CSS3字体 65
5 设置CSS3透明度 67
本章总结 71
本章作业 71
第4章 CSS3高级特效 73
1 2D转换 74
1.1 translate()方法 74
1.2 rotate()方法 77
1.3 scale()方法 80
1.4 skew()方法 84
2 3D转换 86
2.1 3D转换的介绍 86
2.2 3D转换方法 88
2.2.1 3D位移 88
2.2.2 3D旋转 90
2.2.3 3D缩放 92
本章总结 99
本章作业 99
第5章 CSS3动画 101
1 transition属性 102
2 animation属性 110
2.1 创建动画 110
2.2 使用动画 112
2.3 动画实战演练 118
本章总结 127
本章作业 127
第6章 多媒体播放 129
1 在网页中播放视频或音频 130
1.1 在网页中播放视频或音频 130
1.2 用canPlayType方法检测音频格式
支持情况 137
2 打造个性的视频播放器 138
本章总结 147
本章作业 147
第7章 使用canvas绘制图形 149
1 canvas基础 150
1.1 在页面上添加canvas元素 150
1.2 使用canvas绘制简单的图形 152
1.2.1 绘制直线 152
1.2.2 绘制三角形 154
1.2.3 绘制多边形 159
1.2.4 绘制矩形 160
1.2.5 绘制圆形 162
1.2.6 清空画布 166
2 绘制贝塞尔曲线 167
2.1 绘制二次方贝塞尔曲线 168
2.2 绘制三次方贝塞尔曲线 169
3 坐标变换 172
3.1 坐标位移 172
3.2 图形缩放 177
3.3 图形旋转 180
本章总结 183
本章作业 184
第8章 canvas高级功能 185
1 canvas高级功能 186
1.1 渐变 186
1.2 图形组合 194
1.3 创建阴影 196
1.4 绘制图像和文本 197
1.4.1 绘制图像 197
1.4.2 裁剪图像 201
1.4.3 画布状态的保存和恢复 202
1.4.4 createPattern方法 203
1.4.5 绘制文本 204
2 绘制风景时钟 207
本章总结 215
本章作业 215

1. C程序设计实践教程 [刘卫国]
2. C程序设计（慕课版） [刘卫国]
3. 程序设计基础实践教程（C/C++语言版） [张桂芬 葛丽娜]
4. C++案例项目精讲 [主编 杨国兴]
5. SwiftUI完全开发 [李智威 著]
6. MySQL数据库项目式教程 [陈亚峰]
7. C语言程序设计习题与实验指导（第二版） [主编 甄增荣 张宾]
8. C语言程序设计（第二版） [主编 甄增荣 田云霞]
9. Unity3D虚拟现实应用开发实践 [主 编 刘龙]
10. Python程序设计 [主编 姜春磊 陈虹洁]
11. C语言程序设计实践教程（活页式） [主编 郑茵 陈巍 滕泓虬]
12. 面向对象程序设计 [主编 张勇 张平华 赵小龙]
13. Python程序设计基础及实战 [主编　刘健]
14. C语言程序设计 [姜雪]
15. Python程序设计实践教程 [王鹤琴 蔡正保]
16. C++程序设计实践教程（第三版） [主编 刘卫国 曹岳辉]
17. C++程序设计（第三版） [主编 曹岳辉 刘卫国]
18. C语言程序设计项目化教程（活页式） [主编 张利华 潘晓利]
19. 机器人流程自动化（RPA）实战——基于UiPath [主编　金鑫]
20. Python 语言程序设计实践指导 [主编　张双狮]
21. Python程序设计案例教程 [主编 毛锦庚 钟肖英 周贤来 ]
22. 基于.NET Core框架的分布式系统架构设计 [汤佳 著]
23. Python语言程序设计教程 [郭其标 房宜汕]
24. Python程序设计 [李国燕 王新强 刘佳 等编著]
25. Python程序设计项目化教程（活页式） [主编　卢凤伟]
26. Java编程基础案例式教程 [主编 陈艳华 唐春兰]
27. Python语言同步案例习题精解 [主编 肖朝晖]
28. Unity应用开发与实战（微课版） [主 编 程永恒]
29. PHP程序设计项目化教程 [主 编 杜海颖]
30. 简单易懂的Python入门教程 [［日］大泽文孝　著]