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

过去十多年来，技术的发展变化很大，例如网路几乎无所不在，随时可以接取网页的应用、Web2.0的风潮席卷整个网页世界；市占最高的微软IE也逐步改版，坊间也出现许多种类型的浏览器，像是MozillaFirefox、AppleSafari、GoogleChrome，纷纷强调具有更优异的执行效能与对开放标准的高支援性，大幅缩短网页应用程式与原生应用程式之间的效能差距，让使用者愿意接受不同的选择，连带地，也让开发人员更愿意采用HTML5这类标准。

不过，如同前一篇所提到，智慧型手机和平板电脑在这几年快速窜红，影响力也已扩及企业，使得这样新兴个人端连网环境，已经无法轻易被忽视。而这些行动装置上所搭配的浏览器，都可以大幅支援HTML5规格，完全不像PC环境，仍有很多包袱，例如须考量广大旧版浏览器用户（如市占仍有7%的IE6），而必须背负对新版网页标准相容性不足的问题。

换句话说，开发人员除了要注意网页能否在各种浏览器之间执行的效果差异，还需要想办法在旧版浏览器环境中做出类似效果。

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就已经支援，省了很多功夫。

文章名称：HTML5技术的关键特色HTML5+CSS3将流行
转载源于：https://www.cdcxhl.com/news49/325299.html

成都网站建设公司_创新互联，为您提供网站营销、软件开发、网站收录、App开发、静态网站、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联