作者:夏辉,王晓丹,于海洋,孙可
出版社:机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5移动Web开发技术试读:
前言
HTML5作为移动互联网前端的主流开发语言,目前还没有一个前端的开发语言能取代其位置,所以说,无论做手机网站还是手机App应用,前端的样式都是用HTML5开发的。通过手机与计算机上网的使用率来看,目前通过手机上网的用户远远高于计算机端,这些数据都足以证明未来移动互联网的发展前景非常好。使用HTML5进行开发有很多优势,这些优势正好顺应了互联网发展的需求,跨平台、开发周期短、投入小、实时更新、摆脱平台约束,这些都恰好解决了未来发展中一部分企业开发的迫切需求。所以,HTML5开发一定会在未来扮演一个很重要的角色。
本书围绕HTML5移动应用开发基础和移动App编程技巧进行编写,在内容的编排上力争体现新的教学思想和方法。本书内容遵循“从简单到复杂”“从抽象到具体”的原则。书中通过在各个章节中穿插示例的方法,讲解了HTML5移动应用开发从入门到实际应用所必备的知识。HTML、CSS和JavaScript都是计算机专业的基础课,也是HTML5移动应用开发课程的基础。学生除了要在课堂上学习程序设计的理论方法,掌握编程语言的语法知识和编程技巧外,还要进行大量的课外练习和实践操作。为此,本书每章都配备了课后习题和一个案例。除此之外,每章还安排了实验,可供教师实验教学使用。
本书共10章。第1章是移动互联网时代HTML5概述。第2章介绍移动开发工具和开发框架,重点介绍了HTML5移动应用开发的主流开发工具,只有了解了这些开发工具才能更高效、快捷地进行移动开发。第3章介绍移动开发常用的HTML5标签,这些标签都是在HTML移动开发中常用的。第4章介绍HTML5高级开发标签,主要讲解HTML5的新增标签和移动开发最流行标签,如Canvas标签等。第5章介绍HTML5表单设计。第6章介绍CSS3样式,对常见样式的标签属性、选择器等重点内容进行了介绍。第7章介绍JavaScript基础,主要讲解JavaScript的使用方法。第8章介绍移动框架jQuery Mobile。第9章介绍HBuilder开发工具,主要介绍一种流行的免费开源移动开发工具HBuilder。第10章讲解了一个综合案例,通过这个综合案例可以加深读者对移动开发应用的认识。本书利用HBuilder开发工具,使用jQuery Mobile框架,进行设计应用开发。
本书内容全面,案例新颖,针对性强。书中所介绍的实例都是在Windows 10操作系统下调试运行通过的。每章都有与本章知识点相关的案例和实验,以帮助读者顺利完成开发任务。从应用程序的设计到发布,读者都可以按照书中所讲述的内容来实施。
本书由夏辉整体策划,夏辉、杨伟吉、王晓丹、于海洋、张丽娜、刘澍和吴鹏负责全书的编写工作,由吴鹏博士主审;刘杰教授、李航教授为本书的策划和编写提供了有益的帮助和支持,对本书初稿在教学过程中存在的问题也提出了宝贵的意见;书中还借鉴了相关参考文献中的原理知识和资料,在此一并表示感谢。
本书配有电子课件、课后习题答案、每章节的案例代码和实验代码,以方便教学和自学参考使用,如有需要请到网站http://www.scse.sdu.edu.cn中下载。
由于时间仓促,书中难免存在不妥之处,敬请广大读者谅解,并提出宝贵意见。编者
第1章 移动互联网时代HTML5概述
移动互联网发展越来越快,HTML5的应用也越来越广泛,经过这些年的发展,HTML5在互联网公司和开发者心目中已经占据了很重的分量。在移动互联网时代,唯一能在手机和计算机上同时打开的语言网页就是HTML5了。另外,能够展现出App效果、兼容性强的手机网页也只有HTML5才能做到。HTML5在移动互联网时代被普遍看好,并被各大互联网公司广泛推广,成为了能与App一决高下的移动互联网的展现形式。
本章主要介绍了移动互联网Web技术的发展历程,HTML5的发展历程、新特性和跨平台性,以及HTML5技术在移动开发中的应用。
1.1 移动互联网Web技术发展
随着智能手机的普及、5G时代的到来和各种应用的推出,互联网已从桌面PC走向手机和其他移动设备,移动互联网和有线互联网融合的速度逐渐加快。移动互联网让人们在上下班途中、外出旅行、等候及户外休闲娱乐时均能便捷地享受互联网服务,给人们的工作和生活带来了极大的便利。
移动互联网(Mobile Internet,MI)是一种通过智能移动终端,采用移动无线通信方式获取业务和服务的新兴业务,包含终端、软件和应用三个层面。终端层包括智能手机、平板电脑、电子书、MID等;软件层包括操作系统、中间件、数据库和安全软件等;应用层包括休闲娱乐类、工具媒体类、商务财经类等不同应用与服务。
移动互联网与传统互联网最大的不同是随时随地和充分个性化。移动用户可随时随地方便地接入无线网络,实现无处不在的通信。移动互联网的个性化表现为终端、网络和内容、应用的个性化。互联网内容和应用个性化表现在采用社交网络服务、博客(Blog)、聚合内容(RSS)、Widget等Web2.0技术与终端个性化和网络个性化相互结合,使个性化效应极大释放。
2001年秋,互联网公司泡沫破灭是互联网的一个转折点,但互联网先驱O'Reilly公司副总裁戴尔·多尔蒂(Dale Dougherty)注意到,互联网此时更重要,新的应用程序和网站开始规律性地涌现,幸存的互联网公司有着共同特征。为区别于之前的互联网,Web 2.0由此诞生。Web系统结构示意图如图1-1所示。
用户使用通用的Web浏览器,通过接入网络(网站的接入则是互联网)连接到Web服务器。用户发出请求,服务器根据请求的URL地址连接,找到对应的网页文件并发送给用户,两者对话的“官方语言”是HTTP。网页文件是用文本描述的,为HTML/XML格式,在用户浏览器中的解释器把这些文本描述的页面恢复成图文并茂、有声有影的可视页面。图1-1 Web系统结构示意图
Web 2.0这一概念是在2004年由O'Reilly Mdeia公司和Media Live国际公司举办的首届Web 2.0会后得到普及的。由于受数字2.0的影响,该术语曾成为争论的主题。数字2.0并不是指万维网(World Wide Web)的一个新版本,而是Web软件开发者和Web用户应当采用的新方法。Web 2.0意味着Web站点的发展方向和新的应用模式,是一系列技术的提升。
1. Web2.0产生的背景
Web2.0产生的背景可以归结为以下三个方面。
1)互联网发展从量变到质变。全球的网民数量与日俱增,根据2016年1月的第37次中国互联网络发展状况统计报告的数据,2015年12月我国网民人数为6.88亿,同1997年的62万网民人数相比,网民人数是当初的1109.68倍。当网民数量急剧增加时,互联网的使用就从原来的少数人使用的工具,变成了大众集体参与的工具,即量变引发质变。随着Web 2.0的出现又使网民数量进一步增加。
2)互联网用户的需求逐步增加,并呈现出不同年龄、不同职业的需求不同的个性化现象。当用户的性别、年龄或职业等基础情况不同时,对互联网使用的要求也有很大的不同,因此需要互联网可以适应不同类型人群的需求。
3)各种互联网技术的出现与Web 2.0相互提供了技术支撑。例如博客、RSS、XML、SNS等技术实现了各种信息的相互交流与传播,逐步形成了今天的社交网络。
目前对Web 2.0还没有统一的定义,专家、学者以及相关组织从不同的角度给出了不同的关于Web 2.0的定义及其解释。Web 2.0概念的提出者Tim认为:“Web 2.0是有效利用消费者的自助服务和算法上的数据管理,便能够将触角延伸至整个互联网,延伸至各个边缘而不仅仅是中心,延伸至长尾而不仅仅是头部”。IBM的社区网络分析师Dario认为Web 2.0是一个架构在知识上的环境,人与人之间交互而产生的内容,经由服务向导的架构中的程序,在这个环境被发布、管理和使用。
2. Web 2.0的特点
Web 2.0是在Web 1.0的基础上发展起来的,在模式与特点等多方面两者都存在不同。例如在页面风格方面,Web 1.0的结构相对负杂,页面比较繁冗,而Web 2.0的页面非常简洁,风格流畅;在个性化程度方面,Web 1.0是大众化的,而Web 2.0是突显自我的,个性化非常强;在用户体验方面,Web 1.0的参与度很低,用户是被动接受的,而Web 2.0是以互动的形式让用户高度参与和接受的;在内容创建和开发方面,Web 1.0是由专业的网站开发者进行开发和管理,而Web 2.0可以由任何对其感兴趣的人进行开发和管理。
通过以上的对比和分析可以看出,Web 2.0的显著特点就是开放、自由和合作。因此,可以从以下几个方面概括Web 2.0的特点:
1)从大众分类方面。由用户个人对信息进行自由分类,分类标签是公开共享的,而且允许用户集体进行分类和查找信息。
2)从丰富的用户体验方面。Web内容更具动态性,能够及时响应用户的输入信息。
3)从用户的参与性方面。去除了中心化,互联网成为了一个信息发布、信息共享和信息交流的平台,任何用户都可以在其上进行信息的浏览、发布和评论。
4)从信息的组成和协同方面。Web 2.0的服务是面向需求的,内容可以通过各种渠道进行发布。在信息的组织上采用的是自组织系统创作,充分利用和发挥了集体的力量。
5)从集成性方面。把分散的、独立的开发者们开发的自治系统和网站进行汇集和聚合。
3. Web 2.0的主要应用
Web 2.0模式和理念的实现是由多种技术作为支撑的,而且随着用户需求的不断变化与发展,出现了很多新的技术,已有的技术也会快速更新。
Web 2.0的主要应用有以下几个方面。(1)Blog(博客)
Blog最初的名字为“Weblog”,后来被缩写为“Blog”。Blog是一种由个人或群体管理、定期或不定期地发布新内容的网页;一般情况下,博客内容根据发表时间的倒序形式排列。Blog是一种典型的Web2.0模式,体现了用户的个性化。(2)Wiki(维基)
Wiki是一种采用“多人协作”模式的超文本写作系统。它是一种使用者不需要知道HTML,但仍然能编辑出具有许多HTML特征的网页的网站。1995年坎宁安设计了第一个Wiki,其意图是建立一个协作式的超文本数据库,方便社群交流。(3)RSS(Really Simple Syndication)
RSS,即简易信息聚合,起源于网景公司的推(Push)技术,是一种描述同步网站内容的格式,用于共享新闻和其他Web内容的数据交换规范,是目前使用最广泛的XML应用。RSS搭建了信息即时传播平台,使每个用户都成为潜在的信息提供者。(4)网摘
网摘,即社会化书签,是一种收藏、分类、排序、分享互联网信息资源的方式。使用它存储网址和相关信息列表,使用标签(Tag)对网址进行索引,使网址资源有序分类,使网址及相关信息的社会性分享成为可能,在分享的人为参与的过程中网址的价值被评估,通过群体的参与使人们挖掘有效信息的成本得到控制,通过知识分类机制使具有相同兴趣的用户更容易彼此分享信息和进行交流,网摘站点还呈现出社团聚集的现象。(5)SNS (Social Networking Services)
SNS,即社会性网络服务,主要作用是为一群拥有相同兴趣、爱好和互动的用户创建一种在线社区,将这部分用户聚集到一个小组内。这一服务往往是基于互联网,并为用户提供各种联系、交流的工具。SNS为用户的信息交流与知识共享提供了新的途径。目前较为知名的社会网络站点包括Facebook、Twitter、豆瓣、人人网等。(6)P2P(Peer to Peer)
P2P,即对等网络,通过直接交换来共享计算机资源和服务,在应用层形成的网络称为对等网络。在P2P网络环境中,成千上万台彼此连接的计算机都处于对等的地位,整个网络一般不依赖专用的集中服务器。网络中的每一台计算机既能充当网络服务的请求者,又对其他计算机的请求做出响应,提供资源和服务。(7)IM(Instant Messaging)
IM(即时通信)是一种允许用户在互联网上进行私人实时通信的系统服务,即传递文字、语音、视频等多种信息流。目前常用的即时通信软件包括QQ、MSN Messenger、微信等。
4. Web 2.0的主要技术
Web 2.0的各种应用涉及到很多技术,其中最核心的技术包括XML和AJAX。
1)XML(Extensible Markup Language,可扩展标记语言)是一种用于标记电子文件使其具有结构性的标记语言。它可以用来标记数据、定义数据类型,允许用户对自己的标记语言进行定义;适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。
2)AJAX(Asynchronous JavaScript + XML)并不是一种新的技术,而是几种己经在各自领域运用效果良好的技术的结合。
随着Web 2.0技术的不断进步,人们越来越习惯从互联网上获得所需的应用与服务,同时将自己的数据在网络上共享与保存。个人计算机渐渐不再是为用户提供应用、保存用户数据的中心,它蜕变成为接入互联网的终端设备。
1.2 HTML5概述
在移动互联网初期,由于苹果手机App模式一枝独秀,HTML5几乎被排挤出局。随着互联网公司超级App的崛起,传统App模式变得不那么重要,大部分互联网公司开始支持HTML5的Web App模式。
本节主要介绍HTML5的诞生和发展历程,以及它的新特性和跨越浏览器的特性。
1.2.1 HTML5的诞生和发展
1. HTML5的诞生
自从第一个网站诞生开始,互联网一直处于快速发展中,对Web技术的要求也是越来越高。HTML作为网页的文本标记格式语言,也必须适应这样的变化。虽然现在大多数的网站页面都是基于HTML的,为了长远发展,需要不断改进,从而满足新的需求。
面临着XML、XHTML的竞争压力,一群来自于Chrome、Opera等公司的HTML爱好者决定成立一个组织来发展HTML,WHATWG应运而生。随着Web 2.0的到来,他们决定完善HTML的一些缺陷,添加一些新的功能,让网站拥有更多的动态性。随着HTML的发展,HTML逐渐成为网页语言的主流。
此后,万维网联盟(World Wide Web Consortium,W3C)重新介入HTML,并发布了一些新的规范。2008年,W3C发布了HTML5的工作草案。HTML5的新特性和动态性让各大互联网公司蠢蠢欲动,迫不及待地投身到基于HTML5的产品开发中去。随着开发中问题的反馈,HTML5也在不断完善,并迅速融入到Web开发中去。目前主流的浏览器都添加了对HTML5新特性的解析。
2014年10月底,W3C宣布HTML5规范正式定稿,从2008年到2014年底,HTML从起草、发展到定稿,已经被大多数Web开发人员所认可。随着移动设备硬件的提升,HTML5在移动应用的开发中性能差的诟病也逐渐消除。2012年全身投入HTML5应用开发并宣布失败的Facebook,现在又重新开始了新的开发研究。HTML5的标志如图1-2所示。图1-2 HTML5标志
2. HTML5的发展
自诞生以来,HTML5一共经历了两个阶段,分别是Web增强和移动互联网,下面分别进行介绍。(1)Web增强
Web体验的丰富增强主要表现在以下3个方面。
1)Web App :HTML5新增了离线存储、更丰富的表单(如Input type=date)、JS线程、socket、标准扩展embed,以及很多CSS3新语法。
2)流媒体 :HTML5新增了audio和video。
3)游戏 :HTML5新增了canvas和webgl。
在HTML5标准的升级过程中,苹果和Google也同时看到了浏览器市场重新洗牌的机会,他们一边参与HTML5规范的制定,一边在浏览器产品上发力。苹果公司首先开始大力发展Safari,建立WebKit开源项目,Mac、iOS和Windows多平台齐发力;Google起初是赞助Mozilla开发Firefox,后来自己开发了v8引擎,合并WebKit,于2008年正式推出Chrome。“IE的私有规范+Flash不是标准,我们才是标准”这样的口号在新一代浏览器大战中打响,IE瞬间成为垄断的代表,甚至成了阻碍Web发展的重要因素(当时IE 6已数年未更新,并且丝毫不惧Firefox的发展)。
微软此时也推出了一系列既不完全支持规范又互相不兼容的IE 7、IE 8、IE 9和IE 10,彻底失去了开发者的心。
Adobe的Flash被遏制,与Web霸主的位子擦肩而过;IE的私有标准被遏制,并且造成IE市场份额不断下滑,直到IE最新的移动版本开始支持WebKit私有语法。(2)移动互联网
随着Chrome和Safari的快速发展,同时也伴随着IE+Flash的衰落,HTML5进入了下一个时代——移动互联网。
HTML5的跨平台优势在移动互联网时代被进一步凸显。HTML5是唯一一个可以应用于PC、Mac、iPhone、iPad、Android和Windows Phone等主流平台的跨平台语言。此时,人们纷纷开始研究和开发基于HTML5的跨平台手机应用。
W3C此时成立了DeviceAPI工作组,为HTML5扩展了Camera、GPS等手机特有的API,但是,移动互联网初期的迭代太快了,手机OS在不停地扩展硬件API,陀螺仪、距离感应器、气压计……每年手机OS都有大版本更新。而W3C作为一个数百家会员单位共同决策的组织,从标准草案的提出到达成一致是一个非常复杂的过程,跟不上移动互联网初期的快速迭代。
PhoneGap的出现让开发者们看到了新的希望。他们期待PhoneGap不停扩展API来补充浏览器的不足。Adobe收购PhoneGap后,又发现它的商用性不足,而且开源使得Adobe无法像Flash那样获取商业利益,因此把PhoneGap送给了Apache,改名为Cordova。现在,Cordova的使用模型是“原生工程师+HTML5工程师”一起协作完成App。
随着Facebook加入W3C,并成立了MobileWeb工作组。MobileWeb这个工作组的重要目标就是让HTML5开发的网页应用实现原生应用的体验。然而,事与愿违,2012年,Facebook放弃了HTML5。
Facebook为何放弃HTML5?主要原因是当时基于HTML5真的做不出好的移动App。对比Twritter等竞争对手的原生App,Facebook的HTML5版本实在无法让用户满意。例如,Push功能,到现在HTML5的推送和原生的推送体验差距依然巨大。原生工程师可以轻松实现摇一摇、二维码、语音输入和分享到朋友圈等功能。究其原因,Facebook没有掌握关键点——手机浏览器内核。如果浏览器不跟上,制定的所有标准草案都不能实现。
浏览器在手机上表现的是什么呢?Google、Chrome性能虽高,但Android上的浏览器却并非Chrome,而是用WebKit改出来的一个Android浏览器;同时,iOS上不允许其他浏览器引擎上架App Store,而且其他使用Safari引擎的应用也无法调用苹果自己的JavaScript加速引擎Nitro。苹果和Google对HTML5做出了种种限制。
总之,在移动互联网的初期,原生应用生态系统占主流。
在2014年10月底,W3C宣布HTML5正式定稿。随着HTML5标准定稿,属于HTML5的时代到来了。
1.2.2 HTML5新特性
HTML5提供了许多新的规范,对页面的布局、多媒体的展示等多个方面进行了改进,主要体现在以下几个方面。
1.新的文档类型(New Doctype)
目前许多网页还在使用XHTML 1.0,并且要在第一行像下面这样声明文档类型。
在HTML5中,以上声明方式将失效。下面是HTML5中的声明方式。
2.脚本和链接无须type(No More Types for Scripts and Links)
在HTML4或XHTML中,用下面的几行代码来给网页添加CSS和JavaScript文件。
而在HTML5中,不再需要指定类型属性。因此,代码可以简化如下。
3.语义header和footer(The Semantic Header and Footer)
在HTML4或XHTML中,用下面的代码来声明header和footer。
在HTML5中,有两个可以替代上述声明的元素,这可以使代码更简洁。
4. hgroup
在HTML5中,有许多新引入的元素,hgroup就是其中之一。假设网站名下面紧跟着一个子标题,可以用
和标签来分别定义。然而,这种定义没有说明这两者之间的关系。而且,标签的使用会带来更多问题,特别在该页面上还有其他标题的时候。
标签的使用会带来更多问题,特别在该页面上还有其他标题的时候。
在HTML5中,可以用hgroup元素来将它们分组,这样就不会影响文件的大纲。
5.标记元素 (Mark Element)
可以把标记元素当作高亮标签,而且被这个标签修饰的字符串应当与用户当前的行动相关。比如说,当在某博客中搜索“Open your Mind”时,可以利用JavaScript将搜索到的词组用修饰一下。
6.图形元素 (Figure Element)
在HTML4或XHTML中,下面的这些代码被用来修饰图片的注释。
然而,上述代码没有将文字和图片内在联系起来。因此,HTML5引入了
7.重新定义(Small Element Redefined)
在HTML4或XHTML中,元素已经存在。然而,却没有如何正确使用这一元素的完整说明。在HTML5中,被用来定义小字,如网站底部的版权状态,根据HTML5对此元素新的定义,可以正确地诠释这些信息。
8.占位符 (Placeholder)
在HTML4或XHTML中,用JavaScript给文本框添加占位符。例如,可以提前设置好一些信息,当用户开始输入时,文本框中的文字就消失。
而在HTML5中,新的Placeholder就简化了这个问题。
9.必要属性 (Required Attribute)
HTML5中的新属性required指定了某一输入是否必需。有下列两种方法可以声明这一属性。
当文本框被指定必需时,如果空白的话表格就不能提交。下面是一个如何使用的例子。
在上面的例子中,如果输入内容为空且表格被提交,输入框将被高亮显示。
10. 自动聚焦属性 (Autofocus Attribute)
同样,HTML5的解决方案减少了对JavaScript的需要。如果一个特定的输入应该是“选择”或“聚焦”,默认情况下,采用自动聚焦属性。
11. 音频支持 (Audio Support)
目前,需要依靠第三方插件来渲染音频。然而在HTML5中,
使用
12. 视频支持 (Video Support)
HTML5中不仅有
13.视频预载 (Preload Attribute in Videos Element)
当用户访问页面时,这一属性使得视频得以预载。为了实现这个功能,可以在
14.显示控制条 (Display Controls)
如果使用视频预载中的代码,视频显示的仅是一张图片,没有控制条。为了渲染出播放控制条,必须在
15.正规表达式 (Regular Expressions)
在HTML4或XHTML中,需用一些正规表达式来验证特定的文本。而在HTML5中,新的pattern属性能够在标签处直接插入一个正规表达式。【例1-1】一个简单的HTML5播放视频的例子。
这段代码的执行结果如图1-3所示。图1-3 一个简单的示例
1.2.3 跨越浏览器的HTML5
在传统桌面平台,不管对于用户还是厂商,浏览器都是非常重要的工具和互联网入口。由于没有移动平台的孤岛效应,浏览器的入口地位就显得格外明显。现在,PC终端的主流浏览器主要有以下5种。
1. Internet Explorer浏览器
Internet Explorer是微软公司推出的一款网页浏览器,原称为Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本),简称IE。在IE 7以前,中文直译为“网络探路者”,但在IE 7以后官方便直接俗称“IE浏览器”。
2015年3月,微软确认将放弃IE品牌。在Windows 10中IE被Microsoft Edge取代了。微软于2015年10月宣布2016年1月起停止支持老版本IE浏览器。
2016年1月12日,微软公司宣布停止对IE 8/9/10这3个版本的技术支持,用户将不会再收到任何来自微软官方的IE安全更新;作为替代方案,微软建议用户升级到IE 11或者改用Microsoft Edge浏览器。
从IE 10起,IE浏览器能很好地支持HTML5。
2. Chrome浏览器
Google Chrome是由Google公司开发的网页浏览器。该浏览器是基于其他开源软件而撰写的,包括WebKit,目标是提升稳定性、速度和安全性,创造出简单且有效率的使用者界面。软件名称来自于称作Chrome的网络浏览器GUI。Chrome支持W3C最新的Web协议和HTML5,且表现良好。
3. Firefox浏览器
Mozilla Firefox,中文俗称“火狐”(正式缩写为Fx或fx,非正式缩写为FF),是一个自由及开放源代码的网页浏览器,使用Gecko排版引擎,支持多种操作系统,如Windows、Mac OS X及GNU/Linux等。该浏览器提供了两种版本:普通版和ESR(Extended Support Release,延长支持)版,ESR版本是Mozilla专门为那些无法或不愿每隔6周就升级一次的企业打造的。Firefox ESR版的升级周期为42周,而普通Firefox的升级周期为6周。
根据2013年8月浏览器统计数据,Firefox在全球网页浏览器的市场占有率为76%~81%,用户数在各网页浏览器中排名第三。自Firefox29起,浏览器界面有很大程度的改变。
由于该浏览器开放了源代码,因此还有一些第三方编译版供使用。如pcxFirefox、苍月浏览器和tele009等。根据英国防病毒公司Sophos的最新调查数据显示,Firefox连续3年成为互联网用户最受信赖的浏览器。
Firefox很多年前就支持HTML5,而且自动升级,对HTML5支持性最好。
4. Safari浏览器
Safari是苹果计算机的操作系统Mac OS X中的浏览器,用来取代之前的Internet ExplorerforMac。Safari使用了KDE的KHTML作为浏览器的计算核心。该浏览器已支持Windows平台,但是与运行在Mac OS X上的Safari相比,有些功能丢失。Safari也是iPhone手机、iPodTouch和iPad平板电脑中iOS指定的默认浏览器。
Safari同样也支持HTML5。
5. Opera浏览器
Opera浏览器是一款由挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器,是跨平台浏览器,可以在Windows、Mac和Linux这3个操作系统平台上运行。Opera浏览器创建于1995年4月。2016年2月确定被奇虎360和昆仑万维收购。
Opera浏览器支持W3C标准和HTML5。
Opera还有手机应用版本,例如,在WindowsMobile和Android手机上安装的OperaMobile和Java版OperaMini。2006年Opera与Nintendo签下合约,提供NDS及Wii游乐器Opera浏览器软件。Opera浏览器支持多语言,包括简体中文和繁体中文。
在移动终端常用的浏览器中,除了上面介绍过的应用于iPhone手机、iPodTouch和iPad平板电脑中iOS指定的默认浏览器Safari,在WindowsMobile和Android手机上安装的OperaMobile和Java版OperaMini外,常用的还有以下3种移动终端的浏览器,它们都支持HTML5。
1)UCWEB手机浏览器。UC浏览器(原名UCWEB,2009年5月正式更名为UC浏览器)是一款把“互联网装入口袋” 的主流手机浏览器 ,由优视科技(原名优视动景)公司研制开发。兼备cmnet、cmwap等联网方式,速度快而稳定,具有视频播放、网站导航、搜索、下载和个人数据管理等功能。
2)百度手机浏览器。百度手机浏览器由百度公司研发,产品采用太空小熊形象,提供超强智能搜索,整合百度优质服务。产品提供网盘服务,UI界面时尚,极速内核,强劲动力。通过增强内核和几十项技术改进,支持手机端和计算机端的页面浏览,提供多项特色功能,让人们在手机上也能方便地使用原汁原味的计算机页面。
3)手机QQ浏览器。手机QQ浏览器是腾讯科技基于手机等移动终端平台推出的一款适合WAP和WWW网页浏览的软件,速度快,性能稳定,可以让用户畅享移动互联网在线生活。
1.3 HTML5在移动开发中的应用
本节将分别介绍PC终端的Web开发技术、移动终端的开发技术,以及HTML5在移动终端开发中的优势和今后的发展前景。
1.3.1 Web前端开发技术简介
Java Web是用Java技术来解决相关Web互联网问题的技术总和。Web包括Web服务器和Web客户端两部分。Java在客户端的应用有Java Applet,不过使用得很少;Java在服务器端的应用非常丰富,如Servlet、JSP和第三方框架等。Java技术对Web领域的发展注入了强大的动力。
Java的Web框架虽然各不相同,但基本都遵循特定的思路:使用Servlet或者Filter拦截请求,采用MVC的思想设计架构,按约定或者利用XML、Annotation实现配置,运用Java面向对象的特点实现请求和响应的流程,以及支持JSP、Freemarker和Velocity等视图。Web开发的PC端主要技术有以下几个。
1. JavaScript
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,例如,响应用户的各种操作。它最初由网景公司(Netscape)的Brendan Eich设计,是一种动态、弱类型、基于原型的语言,内置支持类。
JavaScript语言与Java语言在语法上比较相似,但随着对JavaScript的深入了解,将会发现,它们其实是两种不同语言。
2. jQuery
jQuery是一个兼容多浏览器的JavaScript框架,核心理念是“Write Less,Do More”(写得更少,做得更多)。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的JavaScript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者的操作更加便捷,例如,操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或动态网页。
3. MySQL
MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司。
MySQL被广泛应用在Internet的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,使许多中小型网站选择MySQL作为网站数据库。
自从Oracle公司收购了MySQL,就发行了MySQL的企业版(不再免费)。
4. MVC
MVC即模型—视图—控制器,是Xerox PARC在20世纪80年代为编程语言Smalltalk-80发明的一种软件设计模式,已被广泛使用。还被推荐为Sun公司J2EE平台的设计模式,并且受到越来越多的使用ColdFusion和PHP的开发者的欢迎。
MVC是一种设计模式,它强制性地使应用程序的输入、处理和输出分开。MVC应用程序被分成3个核心部件:模型、视图、控制器,三者各自处理自己的任务。(1)模型
模型表示企业数据和业务规则。在MVC的3个部件中,模型拥有最多的处理任务。例如,它可以用像EJBs和ColdFusion Components这样的构件对象来处理数据库。
被模型返回的数据是中立的,也就是说模型与数据格式无关,这样一个模型就能为多个视图提供数据。由于应用于模型的代码只需写一次就可以被多个视图重用,所以减少了代码的重复性。(2)视图
视图是用户看到并与之交互的界面。对老的Web应用程序来说,视图就是由HTML元素组成的界面,在新的Web应用程序中,HTML依旧在视图中扮演着重要角色,但一些新的技术层出不穷,包括Macromedia Flash,以及像XHTML、XML/XSL和WML等一些标识语言和Web Services。如何处理应用程序的界面变得越来越有挑战性。MVC一个大的好处是能为应用程序处理很多不同的视图,在视图中没有真正的处理发生,不管这些数据是联机存储的还是一个雇员列表。视图只是一种输出数据并允许用户操纵的方式。(3)控制器
控制器接收用户的输入并调用模型和视图去完成用户的需求。所以当单击Web页面中的超链接和发送HTML表单时,控制器本身不输出任何信息和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后确定用哪个视图来显示模型处理返回的数据。
综上所述,MVC的处理过程是首先由控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户。
5. JDBC
JDBC(Java DataBase Connectivity,Java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,由一组用Java语言编写的类和接口组成。
JDBC为工具/数据库开发人员提供了一个标准的API,据此可以构建更高级的工具和接口,使数据库开发人员能够用纯Java API编写数据库应用程序,同时,JDBC也是一个商标名。
有了JDBC,向各种关系数据发送SQL语句就成为一件很容易的事了。换而言之,有了JDBC API,就不必为访问Sybase数据库专门写一个程序,为访问Oracle数据库又专门写一个程序,或为访问Informix数据库再编写另一个程序等,程序员只需用JDBC API写一个程序即可,它可向相应数据库发送SQL调用。同时,将Java语言和JDBC结合起来,可以使程序员不必为不同的平台编写不同的应用程序,只需写一遍程序就可以让它在任何平台上运行,这也是Java语言“编写一次,处处运行”的优势。
6. DBUtils
CommonDbutils是操作数据库的组件,对传统操作数据库的类进行二次封装,可以把结果集转化成List。传统操作数据库的类是指JDBC。DBUtils是Java编程中的数据库操作实用工具,小巧且简单实用,其特点如下。
1)对于数据表的读操作,它可以把结果转换成List、Array或Set等Java集合,便于程序员操作。
2)对于数据表的写操作,也变得很简单(只需写SQL语句)。
3)可以使用数据源,使用JNDI、数据库连接池等技术来优化性能——重用已经构建好的数据库连接对象,而不像PHP、ASP那样,费时费力地不断重复构建和重构这样的对象。
1.3.2 移动Web应用发展
移动设备的用户越来越多,所以面向移动终端的Web应用技术也越来越多。随着Web应用的逐渐发展,移动终端的开发技术主要有HTML、JavaScript和CSS等。
1. HTML
超文本标记语言是标准通用标记语言下的一个应用,也是一种规范、标准,通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如文字如何处理、画面如何安排和图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
2014年10月28日,W3C推荐标准HTML5。
2. JavaScript
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,是广泛用于客户端的脚本语言。JavaScript最早在HTML网页上使用以增加网页的动态功能。
1995年,JavaScript由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势,微软推出了JScript,CEnvi推出了ScriptEase,与JavaScript一样均可在浏览器上运行。为了统一,且JavaScript兼容于ECMA标准,因此也称为ECMAScript。
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更加流畅、美观的浏览效果。通常,JavaScript脚本是通过嵌入在HTML中来实现自身功能的。它的特点主要体现在以下4个方面。
1)它是一种解释性脚本语言(代码不进行预编译)。
2)主要用来向HTML页面添加交互行为。
3)可以直接嵌入HTML页面,但写成单独的JS文件这样有利于结构和行为的分离。
4)跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android和iOS等)。
JavaScript脚本语言同其他语言一样,有其自身的基本数据类型、表达式、算术运算符及程序的基本程序框架。JavaScript提供了4种基本的数据类型和两种特殊数据类型来处理数据和文字;变量提供了存放信息的地方,表达式则可以完成较复杂的信息处理。
3. CSS
层叠样式表(Cascading Style Sheets,CSS)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制,几乎支持所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现只需修改一个小的样式,便能更新与之相关的所有页面元素。总体来说,CSS具有以下几个特点。(1)丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,设置元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式及其他页面效果。(2)易于使用和修改
CSS可以将样式定义在HTML元素的
试读结束[说明:试读内容隐藏了图片]