• QQ咨询

  • 在线咨询
  • 售前咨询
  • 售前咨询
  • 您好,请点击交谈!
  • 电话咨询

  • 027-87862018
  • 13995588992
  • 13886188100

HTML5技术的关键特色 HTML5+CSS3将流行

发表日期:2019-04-26

  过去十多年来,技术的发展变化很大,例如网路几乎无所不在,随时可以接取网页的应用、Web2.0的风潮席卷整个网页世界;市占最高的微软IE也逐步改版,坊间也出现许多种类型的浏览器,像是MozillaFirefox、AppleSafari、GoogleChrome,纷纷强调具有更优异的执行效能与对开放标准的高支援性,大幅缩短网页应用程式与原生应用程式之间的效能差距,让使用者愿意接受不同的选择,连带地,也让开发人员更愿意采用HTML5这类标准。
 
  不过,如同前一篇所提到,智慧型手机和平板电脑在这几年快速窜红,影响力也已扩及企业,使得这样新兴个人端连网环境,已经无法轻易被忽视。而这些行动装置上所搭配的浏览器,都可以大幅支援HTML5规格,完全不像PC环境,仍有很多包袱,例如须考量广大旧版浏览器用户(如市占仍有7%的IE6),而必须背负对新版网页标准相容性不足的问题。
 
  换句话说,开发人员除了要注意网页能否在各种浏览器之间执行的效果差异,还需要想办法在旧版浏览器环境中做出类似效果。
HTML5技术的关键特色 HTML5+CSS3将流行
 
  HTML5涵盖的范围
 
  一般而言,HTML5的出现是为了接替HTML4,同时也是集合历代HTML规格的最新修订版,因此现行网站的所有网页,对于支援HTML5的浏览器来说,都是可以执行的,相对地,若用不支援HTML5的浏览器,去开启以HTML5新增的规格撰写内容的网页,就会产生不相容的状况。
 
  然而,就广义来说,HTML5也是3种网页前端开发技术的总集:包含HTML、CSS3(CascadingStyleSheetsLevel-3)、和JavaScript。
 
  CSS的目的是,能以样式表为网页提供视觉呈现的统一效果。JavaScript则是浏览器开启网页时,能同时执行应用的指令码语言(WebScriptingLanguage),程式码需透过浏览器直译和执行,而不像其他程式语言需先经过编译,转成BinaryCode,它可用来操作网页元素的产生与控制计算,并提供函式库,里面预设提供物件和方法,以便和网页的文件物件模型(DocumentObjectModel,DOM)互动。
 
  值得注意的是,要善用HTML5的重要特色,基本上,可能都需要同时搭配CSS或JavaScript,才有可能办到。
 
  有哪些特色?从W3C的观点来看,他们整理出8个:语意、离线与储存、装置存取、连线、多媒体、效能与整合与CSS3。接下来,我们将针对其中几项加以介绍。
 
  网页可直接播放多媒体
 
  若在网页上要呈现视讯、声音,使用者端设备需安装可播放的应用程式、编解码器(Codec),或者仰赖Flash,搭配同样需额外安装的播放软体进行。而这些对浏览器而言,都是需外挂的程式,而非内建机制。随着Adobe不再开发手机与Linux平台的Flash播放软体,以及浏览器对HTML5标准的积极支援,未来你将会看到更多直接透过浏览器本身播放影音档的例子。
 
  在HTML5中,网页要播放视讯和声音的方法非常简单,只要用<video>和<audio>标签即可。例如<audiosrc=”http://www.ithome.com.tw/audio/tech.mp3”></audio>,即是在网页上播放档名为tech.mp3的音讯档。
 
  回顾过去,网页无法直接播放视讯画,而播放声音也没有特定标准,所以很多网页都采用Flash来呈现多媒体;如今,Flash应用将出现无法跨平台的状况(Adobe决定不继续投入手机和Linux上的Flash应用),将会影响很大。
 
  已投入Android平台开发多年的圣星科技创办人卢育圣表示,这改变(格式转换)需要时间。会有人开始从Flash应用离开,一旦手机无法播放相关影音,业者就必须想办法转到HTML5。但他认为浏览器也要内建相关的标准Codec,于是大家就会逐渐往这方向走。毕竟,使用者都喜欢看Video。
 
  目前各大浏览器主要支援哪些多媒体解码格式?视讯方面,像是OggTheora、VP8、H.264,而音讯格式,则主要支援Oggvorbis、WAV、MP3等。
 
  但这样的支援对于特定应用来说,还是不够的,例如游戏。
 
  前微软资深开发技术推广经理,现为自由工作者的王森表示,标准的audio标签是无法混音的,导致非Chrome浏览器上的AngryBirds游戏不能用AudioAPI,只能用Flash弥补。
 
  他认为,用HTML5开发CasualGame是可以的,但是对于需要大量3D运算的游戏,目前还没看到有好的例子出现。另外,开发游戏需倚赖搭配好的游戏引擎,以加速开发,而HTML5目前仍缺乏常用的游戏引擎。
 
  其他人也有类似看法,例如身为Timefire共同创办人暨CTO的RayCromwell,他在〈TheproblemswithHTML5<Audio>〉一文中表示,HTML5的audio标签,虽然像音乐播放器,一样可以做到快转、循环播放与控制音量,但单靠它,并无法合成声音、取样、处理音讯样本、套用环境特效,或是基本的立体声移位(stereopanning)。看来,这部份的发展还有待努力。
 
  具有本机储存的能力提升
 
  对于智慧型手机或平板电脑,目前要达到持续与网路连线的目标,还有一段距离,因此一定必须面对离线时的处理。当网页技术不断发展,也许有一天我们不再需要用原生应用程式,而是都用HTML、CSS和JavaScript来写,那如何保障程式不论离线与否,都可以执行呢?
 
  若使用者不能上线,应用程式就有必要在单机内能够执行,如同我们目前在个人电脑上执行Word、Excel。
 
  卢育圣认为,这时候LocalStorage对网页应用程式来说,就很重要。让程式可以在离线环境下执行编辑内容,等到连线恢复时再同步资料,此时,可透过HTML5的WebSockets以网路传输资料,来达到目的。
 
  就本机储存的功能而言,HTML5分为WebStorage和本机资料库(SQLite和IndexedDatabase)。前者的目的,是企图取代目前网页以Cookies储存资料的作法,而这又可细分为暂时性储存的sessionStorage,以及较长久储存的localStorage等两种。sessionStorage是指使用者浏览该网站期间所要储存的资料,而localStorage则是会储存在磁碟中,即使浏览器关闭,以此方式储存的资料还是存在。
 
  睿扬资讯知识产品国际事务处产品开发经理邱维新表示,以前使用者浏览网页时,要储存资料,须透过Cookies或存放在网站伺服器端;现在可在浏览器存取时,预载在使用者本机记忆体中作为快取。他们主要是利用本机储存,以Key-Value的方式暂存部分资料,让使用者不用每次都从伺服器端重载,同时节省频宽及伺服器的负载程度,并且加快App的反应速度。
 
  但他也说,由于HTML5目前只能做到部分离线处理,因各种浏览器在SQLite的支援度不一,所以暂时还没有考虑使用。未来,如果这方面的功能支援得非常完整,他认为将可以让App发挥更强大的资料处理能力。
 
  对于HTML5的本机储存,但仍有一些部分的实作需要考量。王森也有类似观察,他说,就算是GoogleDocs,应用上也遇到一些限制,如同步机制。目前网页应用的同步机制并没有标准化的做法。此外,这样的机制能否具有储存大量资料的能力,也令人感到疑虑。
 
  关于本机储存如何运用,普奇科技ZK核心开发团队的工程师王景弘表示,首先要考量用途是倾向于作动态资料的快取,或是静态资料之类的储存?由于使用者还是需要资料的同步更新,使用者切换不同浏览器去存取网页的行为也很常见,所以这种单靠本地的资料库,去储存所有的资料的状况,目前还不容易发生。
 
  此外,王景弘也观察到网页浏览器目前对HTML5本机资料库提供的支援,仍以No-SQL(这里所指的是IndexedDatabase)的部分居多,因为No-SQL是新兴的资料储存方式,还有待发展。
 
  Canvas让开发人员能直接用网页绘出图形
 
  先前HTML不具备绘图的机制,因此开发人员常需先做出图片档才能达到效果,但同时还必须处理图片互相遮蔽的状况。而HTML5提供了Canvas(画布)的方式后,现在开发人员可直接用JavaScript来绘制矩形、圆形、多角形、图片影像、图表、动画。
 
  王景弘说,Canvas预设是透明的,所以就可以任意叠加∕画在其他元素上。Canvas也可以用来绘制3D图形,也就是所谓的WebGL。相较之下,以前缺乏有效的方案。
 
  Canvas不只是提供2D与3D绘图,能应用在游戏上,在商用软体的领域中,Canvas也能发挥特色,例如许多应用程式中,常见的统计图表描绘,目前已经有一些厂商推出基于HTML5Canvas所开发的图表库。
 
  此外,也有厂商思考Canvas能否达到其他目的。睿扬知识产品国际事务处CRM云端服务部经理杨东城表示,他们会考虑让使用者在App中,利用画图的方式来写报告,或是记录客户的记事。
 
  提供触碰事件的处理能力
 
  网页应用程式原本就支援滑鼠事件的处理,然而针对触碰式的设备,如智慧型手机或平板电脑,若继续用滑鼠事件对应,相关的操作可能会受到限制。
 
  现在,HTML5将触碰装置的使用列入规范,它提供介面让应用程式可以直接处理触碰事件,以及多点触碰装置。它目前支援touchstart、touchend、touchmove、touchcancel等4种触碰事件的处理。
 
  王景弘认为,当使用者使用支援触碰的装置上网时,使用体验将大幅改变:举凡以双指进行缩放、单指移出∕移入、多点触碰等,这些都有机会改变人们操作网页的习惯。随着这类装置的普及,人机介面可能会与现在大相径庭,而这也有助于开发者对操作介面的运用,开拓出新的想像空间。而HTML5将触碰事件列入规范,也能避免各家实作不一的窘境。
 
  使伺服器端与个人端能双向通讯的WebSocket
 
  过去,网页与浏览器之间只能透过HTTP,用Stateless的Request、Response方式来互动,现在HTML5可允许用WebSocket在两端建立双向通讯管道,而不需要重新建立连线。但这么做之后,很多人会担心应用的安全性会有疑虑。
 
  王景弘提到,当初WebSocket的设计是为了解决无法即时∕随时传输的问题,而没有考虑到安全性的部份。使用者可能开启多个WebSocket来对伺服器发动DDoS攻击,特别是网页遭到恶意程式码攻击时(例如XSS)。也有一些人讨论它被用作Proxy的可能性(攻击、存取其他远方伺服器)。
 
  因为安全性的问题,Firefox(第4版和第5版)和Opera(第11版)一度移除WebSocket。这规格因为还在草案的关系,变化相当快,去年底IETF新发布的RFC6455,对规格有所编修。而目前支援RFC6455的浏览器已有Chrome16和Firefox11,而AppleSafari5.0.2/5.1、iOS4.2/55支援的WebSocket规格,是较早的草案(hixie-76)。
 
  可获得使用者地理位置资讯的Geolocation
 
  不论是App或网页应用程式,结合地理位置感知的服务(Location-BasedService)已相当风行,而透过Geolocation的运用,例如使用者所在的经度、纬度、海拔高度,以及行进方向、速度等资讯,网页应用程式可经由装置本身的GPS定位功能提供,或从网路上取得,充分发挥设备本身的特色。
 
  杨东城提到,在他们的CRM产品应用中,可运用此功能来记录使用者的所在地,提供类似打卡的功能。同时,根据使用者目前的位置,还能用来帮助业务员找出正在附近活动的客户,让他可以随时就能去拜访户。
 
  除了定位,HTML5还可以让网页应用程式存取声音或影像的输入装置,例如麦克风和网路录影机(HTMLMediaCaptureAPI)、联络人(ContactsAPI)及装置倾斜角度(DeviceOrientationEventAPI)等本机资料。
 
  WebWorkers提供多工,浏览器可在背景执行其他程式
 
  运用JavaScript时,通常每次只能执行一个执行绪,现在有了WebWorkers的机制,程式码可以在背景执行,独立于其他使用介面执行的程式码之外,让长期执行的程式可以持续运作,不会受到部分需回应使用者的动作所中断。卢育圣认为,WebWorkers就像多执行绪、多工。若应用程式的执行改成以浏览器、网页技术为主,具有这项机制的HTML5将扮演很重要的角色。
 
  降低图片用量,让版面配置更美观的CSS3
 
  很早的时候(1996年),CSS(CascadingStyleSheets)就已经开始应用在网页设计上,对初学者而言,除了要搞懂HTML和JavaScript怎么写之外,也要了解CSS如何设计与运用。
 
  对于CSS的存在,很多人的认识是为了将网页的内容与呈现方式分开,而用它来控制网页的风格和外观,目前相关规格已发展到Level3,简称为CSS3。到了现在,HTML5在发展上,不只是要借助JavaScript的力量,W3C也将CSS3纳入HTML5的范畴内。
 
  CSS细分多个部分,包含选择器、背景与边缘、文字特效、2D/3D变形、动画、多栏呈现和使用介面。
 
  以文字的呈现为例,CSS可以开发人员用word-break和word-wrap等属性,指定将内容依视窗宽度自动换行,也可以用column-count、column-gap等属性,来设定栏位数量和栏位间隔距离。
 
  对于颜色的透明度,CSS3也允许开发人员用Opacity属性来操作。它同时也可以用Gradients来做到颜色渐层的效果。
 
  CSS3中还有一个特别受到很多人欢迎的属性,那就是border-radius。以网页开发人员要将特定区块或按钮做成是边缘有圆角的样式,往往得借助图片来进行,有这个属性后,单靠CSS就可以达到目的。
 
  王景弘说,HTML5+CSS3可以简化一些Layout组成的方式,例如按钮可以很弹性地放大、缩小。以前要让按钮有圆边、阴影,需透过切九宫格或十几宫格的方式规画,相当麻烦。现在在HTML5和CSS3就已经支援,省了很多功夫。
上一篇:专业的网站建设公司制作流程 下一篇:没有了
网站建设
网站优化
网站营销
最新网站设计案例
  • -企业官网网站建设-

    IT互联网、商业运营、传媒广告

    企业官网网站建设

    IT互联网、商业运营、传媒广告

  • - 婚纱摄影网站建设 -

    婚纱摄影、婚礼婚庆、网站设计

    婚纱摄影网站建设

    婚纱摄影、婚礼婚庆、网站设计

  • - 教育培训网站建设 -

    学校官网、留学培训、舞蹈培训

    教育培训网站建设

    学校官网、留学培训、舞蹈培训

Copyright © 2009-2019 中网维优(www.whzwwy.com) All Rights Reserved.
鄂公网安备 鄂公网安备 42011102000410号 鄂ICP备17001107号-1