① 教学内容与当前国家、社会就业市场需求紧密结合；
② 突出实用性，强调“技能”，面向问题，面向应用；
③ 应用性和概念性、知识性内容相结合，且均与时俱进，具有先进性；
④ 知识内容模块化组织，可供不同院校根据专业需求进行选用，具有良好的教学适用性，文理兼顾；
⑤ 在教材的编写风格上，将教材的严肃性和学生的阅读兴趣相结合，让读者能融入案例所设定的人物角色，更容易理解人物角色的工作思路。

移动Web前端开发是移动互联网时代触屏网站、App等互联网产品开发中重要的组成部分。移动Web前端开发技术日新月异，本书立足技术标准和教学需要，注重基础知识，并且辅助持续更新的线上实际案例。全书共分10章：第1～2章介绍移动Web前端的发展和现状以及开发环境的搭建；第3章介绍标准的HTML 5语言；第4～5章介绍CSS语言，涵盖标准的属性和布局方法；第6～7章介绍移动Web前端的核心语言JavaScript；第8章讲解响应式框架Bootstrap；第9～10章讲解HTML 5的API和Vue。
本书适合作为高等学校数字媒体类相关专业的本科生教材，也可作为相关开发人员的实践参考用书。

陈童，男，硕士，工程师，2002年毕业于哈尔滨工业大学。多年从事网站设计与实现、站技术演进与形态构造、用户体验设计、广告效果研究、二维动画软件系统、网页设计软件系统的教学。参与国家社科项目、省部级项目多项。李颖，硕士，安徽工程大学教师，从事网站设计与开发课程教学多年，教学经验丰富。王妍，博士，教授，哈尔滨工业大学教师，从事设计心理学教学多年，教学经验非常丰富。

目 录

Contents





第1章初识移动Web前端1


11移动Web前端的发展历程1

111Web前端开发的历史1

112Web前端的定义2

113Web前端的工作范畴2

114移动Web前端的定义3

12移动Web前端现状与未来4

121移动Web前端开发的价值4

122移动Web前端开发需要掌握的知识体系5

123成为卓越的移动Web前端工程师的途径6

13相关问题的释疑7

131移动Web前端工程师缺乏的原因7

132提高移动Web前端开发能力的方法8

小结8

习题8

第2章移动Web开发环境的搭建9

21Sublime Text编辑器9

22Emmet插件的使用15

221使用方法15

222语法15

23使用Nodejs18

24NPM包管理器21

小结22

习题22

第3章Web前端的结构层：HTML 523

31HTML简介23

311HTML的定义23

312HTML标签23

32HTML 5的定义24

33HTML 5文档24

34HTML术语和概念25

341HTML元素语法25

342HTML属性26

343HTML的全局属性26

35HTML的基础标签27

36HTML中关于文字格式的标签28

37有关列表的标签31

38有关图像的标签31

381 32

38233

38333

39有关链接的标签33

移动Web前端开发基础
目录
391 34

39234

310表格34

3101









40

41

31154231164231174331174331184431194431110453111145

3111245

312样式/节46

3121语义的定义46

3122HTML 5大纲算法47

313元信息47

313147

313247

313348

小结48

习题49

第4章Web前端的表现层：CSS50

41CSS简介50

411为文档添加样式的三种方法50

412CSS命名规则51

42CSS选择符51

421基本选择符52

422层次选择符52

423伪类选择符53

424伪元素选择符54

425属性选择符55

43取值和单位55

44CSS的字体属性（Font）57

45文本属性（Text）60

46文本修饰（TextDecoration）66

47颜色和背景（Color and Background）69

48轮廓和边框（Outline and Border）73

49列表（List）80

410表格（Table）82

411内容（Content）84

412尺寸与补白（Dimension）85

小结89

习题89

第5章Web前端的表现层：CSS布局90

51定位（Positioning）90

52布局（Layout）93

53伸缩盒（Flexible Box Layout）97

54多列布局（Multicolumn）102

55渐变（Gradient）106

56变换（Transform）108

57过渡（Transition）112

58动画（Animation）115

59打印（Print）120

510媒体查询（Media Queries）121

小结126

习题126

第6章Web前端的行为层：JavaScript语言128

61词法结构128

611字符集128

612注释129

613直接量129

614标识符129

615保留字129

616可选的分号130

62数据类型和值131

621数字132

622字符串133

623布尔值133

624null和undefined134

625全局对象134

626包装对象134

627类型转换135

628变量135

629变量作用域136

63表达式和运算符136

631表达式137

632表达式运算141

633其他操作符141

64语句142

641声明语句143

642条件语句143

643循环144

644跳转145

645其他类型语句145

646JavaScript语句小结146

65对象147

651创建对象148

652属性的查询和设置148

653删除属性149

654检测属性149

655枚举属性149

656属性getter和setter150

657属性的特性150

658对象的三个属性150

659序列化对象151

6510对象方法151

66数组152

661创建数组152

662数组遍历152

663多维数组153

664数组方法153

665ECMAScript 5中的数组方法155

666数组类型156

67函数156

671函数定义157

672函数调用157

673函数的实参和形参158

674作为命名空间的函数158

675闭包159

676函数属性、方法和构造函数159

677function（）构造函数160

小结160

习题161

第7章Web前端的行为层：Web浏览器中的JavaScript165

71客户端JavaScript165

711在HTML中嵌入JavaScript165

712JavaScript程序的执行166

713兼容性和互用性167

72Window对象168

721计时器168

722浏览器定位和导航168

723浏览历史169

724浏览器和屏幕信息169

725对话框170

726错误处理170

727多窗口和窗体170

73脚本化文档171

731DOM概览171

732选取文档元素172

733文档结构和遍历173

734属性174

735元素的内容174

736创建、插入和删除节点175

737文档和元素的几何形状和滚动176

738HTML表单177

74脚本化CSS179

741脚本化内联样式179

742查询计算出的样式180

743脚本化CSS类180

744脚本化样式表180

75事件处理181

751事件类型182

752注册事件处理程序184

753事件处理程序的调用186

754鼠标事件187

755鼠标滚轮事件187

756拖放事件188

757文本事件188

758键盘事件188

76脚本化HTTP189

761使用XMLHttpRequest189

762编码请求主体191

763HTTP进度事件192

764中止请求和超时192

765跨域HTTP请求192

766借助35310236

3103、和36311表单3731113831123831133114

前 言

Preface

Web前端技术发展日新月异，涉及的知识面极为广泛，本书以移动互联网背景下的前端技术为背景，总结提炼了移动Web前端的实战经验，全面涵盖了移动Web前端包括的所有知识点，其中主要包括：
处于移动Web前端结构层的HTML 5：涵盖了创建标准兼容、语义化的新一代HTML 5网站的所有基础知识，并囊括实现HTML 5核心语言的HTML 5生态系统和相关API。
处于移动Web前端表现层的CSS3：详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性。
处于移动Web前端行为层的JavaScript：JavaScript正以惊人的速度成为各种应用程序的通用语言，包括Web、桌面、云和移动设备上的应用程序。本书内容涵盖JavaScript语言的所有细节，以及客户端JavaScript，包括HTML5和相关标准定义的JavaScript API以及Web浏览器实现的API。
响应式框架Bootstrap：Bootstrap是流行的Web前端开发框架，在帮助交付稳定成果的同时，能大幅提升工作效率。本书详尽地介绍了Bootstrap框架相关技术在Web和移动Web开发领域的应用，深入理解Bootstrap框架相关的知识点。
前端框架Vuejs：Vue作为发展最为迅速的前端MVVM框架，越来越受到前端开发工程师的青睐。本书涵盖Vuejs的基础知识、组件以及过渡动画等内容。
移动Web前端技术发展迅速，初学者容易迷失在各种实战和案例之中，往往忽视对技术标准、基础知识以及基本概念的理解和掌握，只有深刻理解国际现行的技术标准，夯实对基础知识和基本概念的理解，才能更加游刃有余地应对不断变化的前端技术栈。
本书主要针对高等学校数字媒体类相关专业的本科教学而编写，适合作为网页设计和开发等相关课程的教材，同时也适合移动开发者和Web前端开发者，以及其他对移动Web前端技术感兴趣的读者阅读。
本书共分10章，每章的具体内容如下所述：
第1章概述移动Web前端，讲述了移动Web前端的发展历程与现状，针对移动Web前端的相关疑问做了相应解答。
第2章讲述移动Web开发环境的搭建，包括Sublime Text编辑器、Emmet插件以及Nodejs环境的安装。
第3章讲述移动Web前端的结构层——HTML 5，从国际标准和语义化的角度全面讲解了HTML 5所涵盖的标签和属性。
第4章讲述Web前端的表现层——CSS，详细解读了CSS的标准语法、引入方式和基本属性的使用。
第5章进一步讲解CSS的布局方式，讲解了CSS的定位、布局方式、伸缩盒布局以及过渡、动画等内容。
第6章讲述Web前端的行为层——JavaScript语言，JavaScript语言可以说是移动Web前端的核心开发语言，本章详细讲解了JavaScript的语法细节。
第7章讲述作为Web客户端的JavaScript语言，讲解了使用JavaScript语言操纵文档、CSS、事件以及Ajax等内容。
第8章讲述响应式CSS框架——Bootstrap，详细讲解了Bootstrap的环境搭建、网格原理以及各种样式的使用方法。
第9章讲述了HTML 5的API，包括使用JavaScript语言来脚本化音视频、画布、离线应用等内容。
第10章讲述了前端框架Vuejs，讲解了Vuejs的基础知识，包括实例、模板语法、计算属性、组件以及过渡动画等内容。
通过本书的学习，读者可对移动Web前端包含的主要技术有全面的认识，书中对每个知识点的国际标准和知识点都做了详细的讲解，为后续的学习打下良好的基础。
本书由陈童、李颖、王妍任主编，李佳宾、晏家和、吕慎花和尹春泽任副主编，其中第1章由陈童、李颖编写，第2章由陈童、王妍编写，第3～5章由陈童、李佳宾、晏家和编写，第6、7章和第9章由陈童、吕慎花和尹春泽编写，第8章和第10章由李佳宾编写，全书由陈童负责统稿。本书主要由工大极客（http：//wwwhitgeekercom/）前端团队编写，在编写过程中参考了很多相关书籍和资料，在此向这些书籍及资料的作者表示感谢。
由于编者技术及学识水平有限，书中难免有疏漏之处，恳请广大读者批评指正。意见或建议请发邮箱：tonghit@vip163com。
读者也可以关注我们的微信公众号：哈工大Web前端。编者博客：http：//wwweveryinchnet/，本书相关勘误或与本书相关的信息都发布在上面。书中源码下载地址：http：//wwwtdpresscom/51eds或https：//giteecom/tonghit/mobile_frontend。
最后，感谢李松林老师、王占清编辑对本书出版工作的付出。同时，感谢我的父母和家人对我工作的支持；特别感谢我的女儿，你的笑容是我不断前行的动力。
陈童
2019年8月