移动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。
本书适合作为高等学校数字媒体类相关专业的本科生教材，也可作为相关开发人员的实践参考用书。

前 言

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月

目 录

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132

382