移动Web前端应用开发（HTML5+CSS3+JavaScript）.pdf

移动Web前端应用开发（HTML5+CSS3+JavaScript）徐 枫 主 编 唐雪涛 仇 雅 副主编 高等职业院校教学改革创新示范教材软件开发系列 内 容 简 介 本书从移动Web前端页面开发者的角度，详细介绍关于前端开发中所涉及的全部知识内容。全书分为四个部分共16章，第一部分为HTML5与CSS3的基础知识，分别介绍HTML5的基础知识和CSS3的基础应用；第二部分为JavaScript编程，分别介绍JavaScript基本语法、面向对象编程、对象模型和开发框架等内容；第三部分为HTML5与CSS3的高级开发，分别介绍HTML5中的推送、视频、存储和CSS3中的动态布局等进阶内容；第四部分为实战项目，分别介绍移动端、PC端两个完整案例开发的全过程。本书适合作为高等院校和职业院校移动Web前端开发教材，也适合初学HTML页面开发的读者自学，还可供各类想自己动手开发Web应用程序的自学者使用。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据 移动Web前端应用开发：HTML5+CSS3+JavaScript/徐枫主编.北京：电子工业出版社，2018.3 ISBN 978-7-121-33784-0.移 .徐 .移动终端应用程序程序设计高等学校教材 .TN929.53 中国版本图书馆CIP数据核字（2018）第039905号 策划编辑：程超群 责任编辑：刘真平 印 刷：三河市良远印务有限公司 装 订：三河市良远印务有限公司 出版发行：电子工业出版社 北京市海淀区万寿路 173 信箱 邮编 100036 开 本：7871 092 1/16 印张：17.25 字数：441.6 千字 版 次：2018 年 3 月第 1 版 印 次：2018 年 3 月第 1 次印刷 定 价：45.00 元 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。质量投诉请发邮件至 ，盗版侵权举报请发邮件至 。本书咨询联系方式：（010）88254577，。1创作背景 当今时代是互联网发展的最好时期，无论从网络通信技术的高速发展，还是从各行业对网络的认知和支持来看，互联网都是眼下最炙手可热的行业。然而，互联网产业与其他传统行业有着明显的区别，它多以技术为主，因此，对从事这一产业的人员提出了更高的要求，要求从业人员必须了解和掌握互联行业的技术。前端页面的开发是互联网行业的基础技术，也是相关从业人员都必须掌握的基础知识，随着互联技术的高速发展，前端开发已不再是简单的页面制作，而是赋予了更多的新功能，如与 MVC 框架的结合、移动端的项目制作、CSS3 效果的应用。而这些技术的实现，都需要开发人员更加全面地了解和掌握前端开发的整体技术，再将技术运用到一个个完整的项目中进行巩固，从而达到最终掌握的目的。从目前图书市场来看，与这一类型需求相配套的图书并不是太多，有的侧重某个前端框架的介绍，有的并非主流的开发模式，市场需要一本更全面、更完整、更主流的图书。针对这一图书市场的现状，我们联合电子工业出版社，推出了这本图书。2本书内容概述 全书共分为四个部分，第一部分介绍 HTML5 和 CSS3 的基础内容，由此引入对最前沿知识的整体了解；第二部分介绍前端开发的核心语言JavaScript 编程的基础知识，这是全书的重点内容，详细介绍语法与框架的应用开发；第三部分讲述 HTML5 与 CSS3 的高级应用，以案例的形式，详细介绍时下最为流行的移动项目开发的完整过程；最后一部分是两个完整的案例，一个侧重移动端，另一个以 PC 端为主，完整、全面地介绍项目开发的全部实现过程。3本书特点 以案例为主、注重实战性，这是本书的显著特点，全书的每个知识点都通过一个完整的示例进行介绍；用前沿技术、做完整项目，又是本书的另外一个特点，全书无论是知识点还是案例，都注重技术的前沿性、示例的完整性。全书通过 200 余个真实、实用的示例及两个大型的综合案例进行讲述，使读者能通过对一个个知识点的扎实学习，真正、彻底地掌握和理解前端开发的流程及核心技术。4本书面向的读者 本书内容以基础入门为主，面向初级页面制作人员，可作为从事 Web 开发人员的参考用书；此外，还可作为高等院校相关课程的教材，适合应用型人才培养，也可作为科技工作者的工具图书。5编者 本书由广西金融职业技术学院徐枫老师担任主编，广西金融职业技术学院唐雪涛、仇雅老师担任副主编。参与编写的还有广西金融职业技术学院杨吉才、卜一川、胡秀娟、黄凡等老师，以及中软国际教育科技公司陶国荣、王辉老师。6联系方式 本书配有教学资源 PPT 课件，若有需要，请登录华信教育资源网（）免费下载。同时，读者也可以通过邮箱 tao_guo_ 与作者联系。由于作者水平所限，加之时间仓促，本书难免有错误和不足之处，恳请读者批评指正。编 者 目 录 V 第 1 章 HTML5 基础知识（1）1.1 HTML5 概述（1）1.2 HTML5 的程序结构和语法（5）1.3 利用 Dreamweaver 调试 HTML5 代码（7）1.4 文本控制标记及属性（16）1.5 图像标记及属性（17）1.6 音频、视频标记及属性（21）1.7 超链接标记及属性（23）1.8 HTML5 页面标记及属性（26）1.9 个人信息展示（30）第 2 章 CSS3 基础应用（32）2.1 CSS3 基本概念（32）2.2 CSS3 的引入方式（34）2.3 CSS3 语法介绍（36）2.4 CSS3 选择器（39）2.5 CSS3 文本相关样式（43）2.6 盒子模型相关样式（46）2.7 背景边框样式（47）2.8 CSS3 动画功能（51）2.9 CSS3 浮动与定位（54）2.10 企业官网首页（58）第 3 章 JavaScript 基本语法（60）3.1 JS 的发展历史、使用场景（60）3.2 JavaScript 内部模型结构层次（62）3.3 开发及调试方法（65）3.4 JavaScript 代码编写、加载及调用（67）3.5 JavaScript 语法规则（70）3.6 标识符、变量声明（72）3.7 数据类型（74）VI 3.8 操作符（76）3.9 分支语句（79）3.10 循环语句（82）3.11 函数的定义（87）3.12 函数调用、参数传递和返回值（88）3.13 本息计算（90）第 4 章 JavaScript 面向对象（92）4.1 变量的作用域（92）4.2 类型定义与对象创建（94）4.3 对象属性、方法的内存结构（96）4.4 prototype 及其内存结构（98）4.5 属性定义及封装（100）4.6 继承的实现（102）4.7 this 对象（104）4.8 闭包（106）4.9 异常处理（108）4.10 JS 和 CSS 文件的压缩（110）4.11 内置对象（111）4.12 面向对象遛狗（113）第 5 章 JavaScript 对象模型（115）5.1 BOM 浏览器对象模型（115）5.2 Core DOM 核心对象模型（118）5.3 HTML Tag DOM 标签对象模型（119）5.4 Event DOM 事件对象模型（121）5.5 网站登录（124）第 6 章 JavaScript 框架（126）6.1 jQuery Core（126）6.2 jQuery UI 框架介绍（129）6.3 jQuery Mobile（134）6.4 EasyUI（142）6.5 Bootstrap（147）6.6 项目实战BS 导航及滚动监听（152）第 7 章 HTML5 的相关变化（155）7.1 HTML 的发展历程及 HTML5 发生的重大变革（155）7.2 HTML5 在各大浏览器的兼容性（156）7.3 HTML5 中已经废弃或不建议使用的标签（158）7.4 HTML5 中增加的语义化标签的使用（160）7.5 网页中第三方插件的调用方式（161）7.6 HTML5 中新增的全局属性（163）7.7 企业官方首页（165）目 录 VII 第 8 章 HTML5 多媒体相关处理（168）8.1 适合多媒体的事件类型（168）8.2 HTML5 中扩展的表单控件（170）8.3 操作视频和音频控件的全局接口（172）8.4 音/视频中字幕的显示方式及错误处理方式（175）8.5 播放多媒体文件（177）第 9 章 HTML5 图形图像相关处理（179）9.1 画布功能（179）9.2 svg 功能（184）9.3 Canvas 绘制图形（189）第 10 章 文件操作与数据存储（192）10.1 文件操作 API（192）10.2 浏览器缓存（196）10.3 浏览器数据格式化存储方式 indexdb（198）10.4 文件操作（201）第 11 章 多线程与服务器推送（203）11.1 webworker 的使用（203）11.2 web socket 的使用（206）11.3 服务器端推送（208）11.4 运用线程方式判断奇偶性 （211）第 12 章 CSS 布局应用（213）12.1 CSS3 新增的布局类属性（213）12.2 响应式布局及自适应（215）12.3 熟练掌握 CSS3 弹性魔盒的全部属性（218）12.4 熟练掌握 CSS3 中新增的文本属性（221）12.5 运用 CSS 绘制图形（223）第 13 章 CSS 高级应用（225）13.1 用户界面新增的属性（225）13.2 CSS 中新增的多列属性（228）13.3 2D、3D 转换的相关属性（230）13.4 CSS3 的过渡属性（232）13.5 CSS3 中的动画制作和效果以及小游戏（235）13.6 运动的图片（238）第 14 章 CSS 选择符的高级应用（240）14.1 媒体查询完成响应式布局（240）14.2 属性选择符中新增的属性（242）14.3 伪类选择符（245）14.4 伪对象选择符（247）14.5 函数类型取值方式（249）14.6 图像类型取值属性（252）14.7 CSS3 中的 hack 属性（254）VIII 14.8 选择器的高级用法（257）第 15 章 旅友网（259）15.1 首页实现（259）15.2 攻略页面（261）15.3 注册页面（263）第 16 章 企业金融平台（265）16.1 项目首页（265）16.2 功能列表详情页（266）16.3 产品列表详情页（267）第 1 章 HTML5 基础知识 001 第 1 章 HTML5 基础知识 本章学习目标：了解万维网的发展历史及其与 HTML 的关系。理解 HTML 版本的迭代过程。了解 HTML5 的兴起和作为未来发展方向的原因。掌握 Web 页面开发环境构建的过程。1.1 HTML5 概述 HTML5 是万维网的核心语言，是未来 Web 发展的方向，同时也是 HTML4.0.1 的一个升级版本，它与 HTML 有着密不可分的关系。因此，掌握 HTML5 的基础知识，是进一步学习HTML 知识的必要条件。1万维网与 HTML 万维网（World Wide Web）也可简写为 Web、WWW、3W，它的功能是通过浏览器访问服务端中的页面；在此访问过程中，服务端的页面称为“资源”，浏览器通过资源统一标识的URL（Uniform Resource Locator）地址来识别并解析页面。在整个浏览器打开并解析页面的过程中，还有一个非常重要的概念，就是如何将页面从服务端传输到客户端，而它则是由超文本传输协议（Hypertext Transfer Protocol）来完成的。整个过程如图 1-1-1 所示。图 1-1-1 浏览器访问页面的过程 HTML 是 HyperText Markup Language 的缩写，其功能是定义页面文档的格式，它是一种规范、一种标准，通过