基于HTML5移动Web页面开发技术研究

硕士研究生读书报告题目:基于HTML5移动Web页面开发技术研究作者姓名：敖游作者学号：yxb144325068指导教师：程学林学科专业：软件与服务工程所在学院：软件学院提交日期：二○15年1月ResearchanddevelopmenttomobilewebpagesbasedonHTML5technology.ADissertationSubmittedtoZhejiangUniversityInpartialfulfillmentoftherequirementsforthedegreeofMasterofEngineeringMajorSubject:SoftwareEngineeringAdvisor:ChengXuelinByAoYouZhejiangUniversity,P.R.China2015摘要HTML5和CSS3技术的结合，它对传统的网页布局是使用媒体查询模块式重建。跨平台应用移植的设计是基于WebKit内核的移动浏览器所执行。随着3G网络的不断普及，移动互联网的发展速度已经远远超出我们的估计。在移动互联网领域，Android、iOS等新技术成为最热点的话题。与此同时，跨平台的HTML5已经开始威胁Flash在Web上的统治地位。随着HTML5和CSS3逐渐兴起，基于HTML5的应用在未来更有可能对移动互联网领域起到巨大的影响。HTML5首先强化了Web网页的表现能力，其次追加了本地数据库等相关功能。所谓的HTML5实际上是指包括HTML、CSS和JavaScript在内的一套技术组合，目前支持HTML5的主流浏览器有GoogleChrome、Firefox、InternetExplorer9和10等。随着科技的发展,移动终端已进入人们的生活,而传统的网页开发技术很难适应这种小屏幕界面,HTML5的问世在很大程度上解决了这一难题。介绍了HTML5的特性并提出了简单明了、可订制性、以用户为中心的移动Web设计原则。HTML5新增的视频、音频、画布、离线应用等功能为网页开发带来了新的希望和曙光。新技术不仅能很好地适应移动终端界面,而且很大程度上减少了代码冗余,提高了设备运行效率关键词：网页布局，移动网络，网页设计，移动互联网，科技发展，网页技术，新网页技术。AbstractThecombinationofHTML5andCSS3technology,itisthetraditionalWebpagelayoutistheuseofmediaquerymoduletypereconstruction.DesignofcrossplatformapplicationtransplantationisperformedmobilebrowserbasedonWebKitkernel.Withthepopularizationof3Gnetwork,thedevelopmentspeedofthemobileInternethasfarexceededourestimate.InthefieldofmobileInternet,thenewtechnologyofAndroid,iOShasbecomethemostpopulartopic.Atthesametime,crossplatformHTML5hasbeguntodominanceofthreattoFlashonWeb.WiththeHTML5andCSS3graduallyontherise,theHTML5basedapplicationsinthefuturearemorelikelytotheenormousimpactonthefieldofmobileInternetplay.HTML5firstimprovestheWebWebpageperformance,followedbyanadditionallocaldatabaseandotherrelatedfunctions.Theso-calledHTML5actuallyreferstoincludeHTML,CSSandJavaScript,atechnologycombination,thecurrentmainstreambrowserssupportHTML5GoogleChrome,Firefox,InternetExplorer9and10.Withthedevelopmentofscienceandtechnology,themobileterminalhasenteredpeople'slife,andthedevelopmentofthetraditionaltechnologyWebpageisdifficulttoadapttothiskindofsmallscreeninterface,theadventofHTML5solvedthisproblemtoalargeextent.IntroducedthecharacteristicofHTML5andputsforwardasimpleandclear,canbecustomized,usercentereddesignprinciplesofmobileWeb.HTML5addedvideo,audio,canvas,offlineapplicationfunctionbringsnewhopeandthedawnwasWebpagedevelopment.Thenewtechnologynotonlycanadaptwelltothemobileterminalinterface,butalsogreatlyreducesthecoderedundancy,improvetheoperationefficiencyofequipmentKeywords：Webpagelayout,mobilenetwork,Webpagedesign,mobileInternet,thedevelopmentofscienceandtechnology,Webpagetechnology,newWebpagetechnology.一、移动互联网的发展3G网络的正式商用使得国内的移动互联网业务逐渐发展起来。Android和iPhone等智能手机的出现，更让移动互联网领域得到充分的发挥。未来，移动互联网业务将会朝着多元化的方向发展。强大的功能、开放的平台、友好的用户界面和更好的用户体验将使得移动Web技术应用在以下几个方面：(1)移动广告：通过移动设备(手机、PSP、平板电脑等)访问移动应用或移动网页时显示的广告，广告形式包括：图片、文字、插播广告、HTML5、重力感应广告等。(2)移动搜索：移动设备为终端，进行对普遍互联网的搜索，从而实现高速、准确的获取信息资源。主要实现方式有两种，一种是使用WAP接人搜索WAP／WEB，一种是3G直接搜索WEB内容。(3)移动购物：用户通过移动设备(如手机)接人无线互联网购买商品或服务的业务。(4)移动社交网络：用户通过各种移动智能终端(手机、PSP、平板电脑等)接人移动网络实现诸如QQ、Facebook、微博以及一些传统社交网站或应用。(5)多媒体：用户通过移动设备接入无线网络享受音乐、电影、动画等多种服务。(6)移动游戏：在移动设备上为用户提供基于移动互联网的网游服务。二、基于HTML5的移动WEB应用。移动Web应用以借助移动智能设备的无线网络接人使用网络应用服务提供商提供的服务。移动智能设备除具有强大的硬件特性外，更拥有庞大的软件应用数量。针对移动Web应用的开发，除基于SDK开发方式外，还支持Web开发方式，例如iPhone上的AppStore就是典型的WebApp应用软件。尤其是HTML5和Webkit的不断发展，让移动Web应用更加强大。2.1HTML5介绍HTML5是用于取代1999年所制定的HTML4．01和XHTML1．0标准的HTML标准版本，虽然处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5强化了WEB网页的表现性能，且追加了本地数据库等WEB应用的功能。作为下一代web技术的标准，HTML5标准定义的规范非常广泛。目前已经在移动浏览器中得到支持。2.2基于webkit的移动Web浏览器移动智能终端内置的移动Web浏览器，不同于WAP浏览器，不仅可以识别HTML,CSS,JavaScript等代码，而且都是基于Webkit为核心的。Webkit实际上是一种浏览器引擎，同时也是一个开源项目，起源于KDE，在桌面浏览器，Chome谷歌浏览器，Safari浏览器都已经内置了WebKit引擎。并支持HTML5，CSS3特性。在移动端方面，两大浏览器内置移动Web浏览器，更是继承了各自桌面端浏览器的特点，为用户提供了更出色的移动Web用户体验。通过对Web应用页面和Facebook在iPhone上UI界面布局方式分析，得出三种给予HTML5语义常用的界面布局，如图1所示。图1常用移动web页面布局其中，header、article、footer和nav是HTML5的新语义元素。他们的定义如下：header元素定义文档的页面组合，通常是一些引导和导航信息，同时可以包含列表、搜索框和主题相关的logo。article元素在HTML5规范中，表示文档、页面，用来表示一块独立的文章内容，如一则网站新闻，一篇博客文章等。此标签可以相互嵌套。footer元素定义文档或章节的末尾部分，通常包含一些章节的基本信息，如作者信息、相关链接及版权信息。nav元素定义为用来构建导航，显示导航连接。Nav标签主要作用是放入一些当前页面的主要导航链接。2.3移动Web页面布局设计由于PC与移动设备的分辨率差异。使得传统网站不能正常显示与移动设备上。在HTML页面利用viewpoint和mediaqueries样式转换，可以实现移动设备的屏幕大小，定制网站的跨平台布局效果。（1）viewpoint虚拟窗口viewpoint是Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义的一个虚拟窗口，并定义其窗口的大小或缩放功能。不同浏览器对viewpoint窗口的默认大小支持是不同的，具体如表1.表1不同浏览器的viewpoint窗口默认值在HTML页面代码的meta元素中定义viewpoint虚拟窗口，主要作用是设置web页面适应移动设备的屏幕大小，实现代码如下”metaname=”viewpoint”content=”width=device-width”,initial-scale=1,user-scalable=0”/上述的代码的主要作用是自定义虚拟窗口，并制定虚拟窗口的宽度为移动设备屏幕宽度，初始缩放比例大小为1倍，同时不允许使用用户使用手动缩放功能。代码中content定义的六种属性分别为：指定虚拟窗口的屏幕宽度的大小，指定虚拟窗口屏幕高度的大小，指定初始缩放比例，指定用户缩放的最大和最小比例。（2）MediaQueries样式模块MediaQueries这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。首先来看一个简单的实例：代码：linkrel=stylesheetmedia=screenand(max-width:600px)href=small.css/上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：1、screen：这个不用说大家都知道，指的是一种媒体类型；2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。为了更能理解MediaQuery，我们在次回到前面的实例上：转换成css中的写法为：@mediascr