HTML5发展

来表示内容版块部分。在HTML5中使用了article、footer、header、nav、section和aside六类标签来分别表述页面中的文章内容、页脚、页眉、导航、分区和侧边栏。增加这六种标签的目的不是为了替换掉DIV标签,而是为了更好的定义页面的各个部分,让每个区块更具有实际的意义,同时这六类标签还可以嵌套使用,例如在article标签中增加header和footer标签,这样就可以非常方便设计和表述网页的架构结构,同时可以让搜索引擎方便的找到网页的主要内容并减少搜索时间。

2 改进的表单验证

Input标签一直在表单中扮演重要的角色,相应的type属性在HTML4标准中包括了10种可以使用的类型(Text,Password,Radio,CheckBox,File,Button,Reset,Submit,Image,Hidden),我们在文本域(type=“Text”)中输入符合格式要求的邮箱、日期、年龄、电话号码等信息时,往往需要借助javascript及正则表达式来验证数据的有效性,虽然这是非常有效的,但是却需要编写一定量的脚本来完成,对于开发中经常出现的验证内容,如邮箱、日期等则增加了开发的工作量。HTML5标准中扩展了Input標签中的Type属性值,例如:color, date,datetime,datetime-local,month, week,time,email,number,range,search,tel以及url等,这些扩展的属性可以更加明确的表述文本框用户应该输入些什么(请注意不同的浏览器支持的程度不同,不是所有的效果都可以实现)。当你使用Google Chrome浏览器运行代码则呈现的效果如图1所示。如果执行代码则会在提交表单时自动验证邮箱的有效性;若未填写任何信息则文本域中显示placeholder属性设置的文本; required属性负责在提交表单时提示“请填写此字段”。(如图1)

3 兼容的视频和声音处理

HTML5标准增加了video和audio两个重要的元素,它将提供视频和音频回放能力。提及视频播放,目前出现的两大阵营:FLASH和HTML5,一个是当前视频播放的首选,一个是未来发展的方向。两大阵营各自都想打败另一方。其实HTML5的设计目标不是为了排斥某项技术,而是为了更好的兼容不同的浏览器。请看下面的代码:

1.

2.

3.

4.

7.

上面的代码中包含了4个不同的层次。

1、如果浏览器支持video元素,也支持H264,用第一个视频。

2、如果浏览器支持video元素,支持mov,那么用第二个视频。

3、如果浏览器不支持video元素,那么试试Flash影片。

4、如果浏览器不支持video元素,也不支持Flash,只能给出了下载链接。

有了这几个层次,已经能够适应不同设备的大多数的浏览器了。

4 用于绘画的canvas元素

HTML在表达页面动画渲染中一直是有所欠缺,为了表示复杂绚丽的动画效果不得不借助FLASH或者JAVA等第三方插件技术,HTML5的最重要的特性非canvas画布元素莫属,借助canvas 元素,可以实现富客户端的绚丽多彩的应用程序,而不必借助第三方技术。

5 其他重要的元素,为了更好的适应越来越复杂的页面要求,HTML5还增加了details 、datagrid 、menu 、command等交互元素,figure、progress进度显示元素,配合javascript和css3,更加的丰富了页面的显示内容

如此丰富多彩的特性,将会给用户带来新的浏览体验,可是遗憾的是目前浏览器的开发商对HTML5的支持仍然有所保留,想体验文中提到的新的特性和效果,用户需要安装2～3种不同的浏览器,现实中是不可能这样的,没有一个用户会为了使用几个新的特性而更换浏览器,因此HTML5标准中的特性最终能够保留下来的,仅仅是各大浏览器厂商最终达成共识后统一保留下来的那些部分。这个标准取代旧的标准真正成为新的标准的过程中,仍然需要相当一段时间努力。

HTML5发展 篇3

现如今, 移动互联网越来越得到人们的热点关注。相关统计数据显示, 当前手机使用用户的总数量已然超过台式计算机使用用户的总数量, 这说明了移动互联网进入了其全盛发展的阶段[1]。

1 移动互联网及HTML5的概述

1.1 移动互联网

移动互联网指的是把互联网与移动通信进行有机融合, 形成一体。在信息技术急速发展的背景下, 为移动终端技术、无线接入技术进步提供了有利契机。移动互联网通常指的是用户对手机等终端进行使用, 结合3G、4G及WLAN等移动网络进入互联网, 能够于各种移动情况下对互联网网络信息资源进行使用。在互联网、移动终端急速进步的背景下, 为移动互联网发展创造了有利契机。移动互联网的应用多种多样, 有别于传统互联网, 形成此类应用的常规功能包括: (1) 移动浏览; (2) 实时通话; (3) 移动下载; (4) 移动支付; (5) 无线定位等。

1.2 HTML5

HTML4在互联网中得到广泛推广应用, 但现阶段HTML4已不能够满足移动互联网发展需求。2014年10月29日, 万维网联盟宣布, 经长达8年之久的不懈努力, HTML5终于定稿。HTML5指出了各式各样的标准, 包括统一的数据模型、统一的开发语言等。HTML5为新一代Web应用形成了新型的框架, 提供了一系列有用的功能, 包括视频、音频、本地存储以及图像动画等。通过HTML5能够便捷地开发出可运行于各类移动平台、设备上的Web程序, 促进Web可以达到等同于原生应用体验的目的。HTML5促进移动互联网应用发展“一次开发, 跨平台及跨终端运行”变得可能, Web应用的HTML5时代已然来临[1]。

2 移动互联网的相关应用特点

2.1 接入的移动性

移动互联网接入的移动性, 移动终端有着轻便小巧、便携式等特征, 有助于用户使用起来不再受时间因素、空间因素所制约, 能够在任何时间、任何地点等便捷地对无线网络进行接入使用。移动互联网使用场景呈现出动态转变的特征, 能够适时开展语音、视频等通话交流行为, 极大的改善用户使用效率[2]。

2.2 终端多元性

移动互联网的终端多元性, 此类终端一方面涉及常规的手机终端, 另外一方面还涉及平板电脑、电子阅读终端以及上网本等便携式终端。此外, 以手机终端具体而言, 其操作系统表现为多元的特征, 好比时下流行的几大操作系统, ios、Android以及Windows等操作系统。

2.3 用户大众性

移动互联网的用户大众性, 早期移动互联网的使用用户群体, 某种意义上而言, 存在高粘着度、高传染性等特征, 这部分用户群体多表现为低文化水平、低收入水平以及低年龄层次等特征。正是由于手机价格较为低廉, 且学习起来较为快捷, 还属于一种良好通信工具, 使得他们对于手机有着极高的依赖程度。现阶段, 移动互联网的使用用户群体俨然发展至社会的各个层阶、各种类型的用户, 不论是国家公务员还是普通务工人员, 不论是领导干部还是普通百姓, 不论是教师还是学生, 移动互联网表现出用户大众化的应用特征[3]。

2.4 时间碎片性

移动互联网的时间碎片性, 用户全天候均可以使用移动互联网, 移动互联网的使用时间表现出随机性、碎片性的特点, 用户随时随地均可以携带智能手机, 几近在任意时间均能够可见到用户在对移动互联网进行使用, 好比工作闲暇、上下班途中、用餐、等候以及出差等碎片时间。

3 HTML5下的移动互联网应用发展

3.1 HTML5简化移动互联网应用

在HTML5还没有应用于移动互联网之前, 用户在对移动互联网使用过程中, 往往会遭受一系列应用程序制约, 存在使用效率不足的问题;在HTML5应用之后, 移动互联网不仅只需Web浏览器, 同时还可对ios操作系统、Android操作系统以及Windows操作系统等进行兼容。用户能够不受时间、地域限制, 使用各种类型的移动设备获取自身所需的信息资源, 促进移动互联网应用程序转化得更为简便[4]。

3.2 HTML5促进网络游戏开发

网络游戏是HTML5中新属性、新元素的重要来源, HTML5在网络游戏开发中扮演着十分重要的角色。在信息技术急速进步的背景下, 网民队伍不断发展壮大, 于移动互联网平台上开展网络游戏得到总多游戏开发商、网游的一致青睐认可。基于HTML5, 将移动互联网与网络游戏进行有机融合, 促进网民在网络游戏中进行交流互动, HTML5促进网络游戏开发。

3.3 HTML5缩减移动互联网应用开发成本

HTML5可促使用户于一并的开发环境中无需进行反复切换, 提升移动互联网使用效率, 缩减移动互联网应用开发成本。用户在对移动互联网进行使用过程中, 针对突如其来的广告插件往往不知所措, 即便现已开发出部分拦截恶意广告插件的软件, 但依旧难以对用户的网络安全予以确保。HTML5下的移动互联网应用, 可明显强化移动互联网安全系数, HTML5相关sandbox特性, 能够对无授权的信息进行有效抵御, 强化用户网络安全系数, 防止用户网络被破坏。

4 结束语

总而言之, 虽然HTML5下的移动互联网应用仍旧面临一系列问题, 但HTML5能够促进移动互联网时代发展变革是不可否认的。现阶段, 应当提升对HTML5的研究关注度, 积极促进HTML5更有效地应用各类型移动设备, 全面规范HTML5功能;积极促进HTML更有效地应用于移动互联网中。

参考文献

[1]刘宇, 闵栋.HTML5在移动互联网中的机遇与挑战[J].电信网技术, 2013 (05) :20-24.

[2]李慧云, 杨新章, 胡文胜, 文锦军.基于HTML5的移动互联网应用转换技术[J].电信科学, 2013 (05) :28-30.

[3]刘春华.基于HTML5的移动互联网应用发展趋势[J].移动通信, 2013 (09) :64-68.

HTML5将重塑Web世界? 篇4

Adobe和Apple围绕Flash发生的冲突是今年上半年的一个焦点事件,引起了很多人的关注,其中有不少人因这一事件第一次了解到HTML5的存在。初次了解HTML5的人可能会非常惊讶,HTML5规范早在6年前就开始制定了,如今尽管HTML5规范草案已经非常好,但何时能真正成为标准却仍然不确定。

的确,HTML5规范制定委员会工作进展非常缓慢。因为关于如何改进浏览器和改进Web世界,不管是浏览器供应商还是其他人都有太多的想法,而这些都要汇聚到HTML5规范中并达成一致,这需要时间。许多新的标签和JavaScript函数尽管已经在一些浏览器上进行了实验,但互操作性和标准化问题还没有解决。比如,Apple所做的HTML5演示虽然令人印象深刻,但它们也只在Safari上运行良好。这就是为什么Flash的支持者嘲笑HTML5要把Web带回到2000年浏览器大战时代的原因。

虽然这种嘲笑可能让HTML5的支持者很伤心,而且漫长的等待的确很难熬,但如果就此忽略HTML5却是不对的。因为在HTML5的背后不仅有行业巨头的推动,更为重要的是,标准化是IT技术发展的必然趋势。就软件而言,不论是浏览器还是相关的开发工具,都会不断吸纳周围的各种技术,最后对其进行标准化,这是技术发展的必然规律。

可以肯定的是,HTML5将改变互联网的方方面面,显然它不会完全取代Flash,但HTML5的确会重塑互联网,使浏览器无需借助插件就可以做更多的工作,从位置跟踪到把数据保存到云端。HTML5的标签将取代那些完成比较简单任务的插件,至少在某些时候,它可以把一些高级的功能开发给更多的用户。最终它可能使互联网更安全、更高效、更灵活。

那么,即将成为新标准的HTML5到底会把我们带向哪里?下面收集了开发者、程序员以及设计师的一些看法,从中可以了解到HTML5如何改变互联网。

降低插件的重要性

从前,Web世界是非常欢迎浏览器插件的,因为它鼓励创新的想法和大胆实验,而声音、动画及其他一些非常生动的网页,通过Sun、Adobe、RealAudio、微软以及其他的一些公司开发的插件第一次在网络呈现时也的确让人耳目一新。然而,问题很快就出现了,插件的接口是向所有人开放的,每个人都在尝试给旧的、以文本为基础的世界增加新的功能,混乱不可避免。其中最有名的插件就是Flash,其他类似的插件更是数不胜数。

出于多种原因,Apple禁止Adobe的Flash在自己的平台上运行,这使得广大Apple迷们不能在Apple平台上看到Flash,而HTML5的流行将让这种冲突不再出现,它将逐步淘汰那些相对封闭的开发体系:JavaFX的功能可能真的很强大,但既然JavaScript和Canvas对象就能做同样的工作,为什么还要学习另一种语法?如果video标签能将音视频同步,谁需要Real的生态系统?

那么,插件真的会全部消失吗?也许吧,但这要取决于你想做的事情。如果你的目标只是绘制图像,那么Canvas对象可能就够用了。但如果你想建立一个专业的3D世界,正如在复杂的Flash和Shockwave游戏中所看到的那样,你可能还得依赖专有的插件技术,因为这些插件技术可以直接访问视频硬件,运行3D游戏。

支持动态生成图像

过去,网页中显示的图像来自于直接下载的GIF或JPG图像,而在HTML5中,图像可能并不是直接来自图像文件,而是由某个Canvas(画布)对象临时生成的。网络上已经出现了大量的非常好的图形库,这些图形库的存在使得动态生成图像更加容易。

如今,JavaScript层可以根据数据进行计算然后绘制出图形。如果软件开发商有足够的时间和人才的话,完全可以让网络上的一切变得更加生动,而纯文本内容越来越少。Flash只是一个开端,HTML5环境让Web开发人员更易于开发出复杂的图像。市场已经出现了一些类似的工具,它们将进一步提高Web开发人员驾驭图像的能力,而且随着工具的成熟,开发人员也将开发出更多更为专业的复杂图形。

这里可能存在的一个问题是,这种图像的处理可能会给客户端处理器带来很大负担,比如对客户端的处理器处理能力有一定要求。在过去,一些开发人员根本不敢用Flash插件,因为渲染和展现Flash内容可能会给处理器带来很大压力,极大地影响用户的最终体验。未来这不应该成为问题,开发者不应该因担心影响性能就不让用户体验生动的图像,只是开发者应该做出一个折中的选择。每一个抱怨Flash影响性能的人都应该知道,这与技术本身没有关系,问题来自设计师们为了吸引我们的注意力,他们过多地使用了这项技术。

允许Web程序利用本地存储

Web程序员其实早就可以利用浏览器端的本地存储空间存储很多信息,比如IE允许最多300个Cookie,最多存储4096个字节的内容。不过,要开发真正实用的Web程序,可能需要比这更多的存储空间。比如,以前的Dojo工具包使用Flash插件来分配用户硬盘上的部分空间,把它留给浏览器使用,而现在很简单了,使用HTML5就可以达到同样的目的。

对于这部分存储,程序员可以按照自己的需要任意使用,比如把云服务的应用和数据保存在本地硬盘上。这也使得云应用的交付、安装和部署都非常像传统的应用程序。比如,无论是否有互联网连接,云应用程序都可以照常运行,因为之前已经从服务器上下载了HTML5应用的JavaScript代码,这部分代码就保存在本地。

当然,这种技术的应用并不会影响云应用的普及,因为现在的运行模式与过去有很大不同,本地数据库实际上扮演的是智能缓存的作用。另外,游戏开发人员可以在本地存储一些情景信息和装备信息,这样可避免每次一连机就要下载这些信息,省了下载资料的时间。而不利的方面就是这些数据库深埋在系统文件夹之中,这样,进行数据备份时就变得非常复杂。用户如果想把数据从一台机器迁移到另一台机器,数据迁移工作可能就会变得更为复杂。

或许混合云的出现可能解决这一问题,混和云允许云端和本地都保存有数据,而本地计算机只是缓存数据,最终版本保存在云中,这样从任意一台计算机上就可以访问到。

简化Web开发中的数据提取

曾从网页中提取过数据的Web开发人员都知道,现有的HTML结构除了告诉浏览器这些信息在哪里之外,几乎不能再提供任何有意义的信息。而开发人员需要了解与数据本身有关的信息,这些信息能帮助程序员了解这些数据的真正含义。 HTML5中所谓的微格式(Microformat)引入了一种新的机制,它在HTML中新增了一些专门的标签,可以帮助程序员分析标签之中的数据的真实含义。

没有人能够预测微格式到底将带给网络多少改变,但很容易看出,这种新的机制将给程序员带来很大方便,帮助程序员开发出更有效率的Web应用。比如,如果有一个好的、标准的方式来表示日期和时间,那么程序员在为网站开发与时间有关的Web程序时,就无需另外编写专门的代码来分析或者猜测别人可能用的什么时间格式。这样,日历、时间表、日程安排等需要从多个数据源收集时间信息的应用也就变成非常简单的工作了。

支持位置服务

在Web世界里,过去我们只知道其IP地址,那些数字对应着一个什么样的真实世界我们根本不知道。比如,某台电脑究竟在哪里,过去几乎不可能知道,而现在出现的位置服务可以解决这个问题。HTML5标准中允许JavaScript询问浏览器用户的地理位置,比如纬度和经度信息。通常桌面系统不支持这一功能(因为需要有GPS或Wi-Fi),但如果终端是手持智能手机,这个功能就可以发挥作用。

今天,没有人能知道聪明的程序员会基于这些位置信息创建出什么应用来,但有一点可以肯定,未来一定可能以一种变幻莫测和难以置信的方式将把虚拟世界与现实世界整合到一起。

让Web视频

播放更流畅

HTML5中的“video”标签使Web开发人员很容易地把视频内容与网页中的其他内容整合起来,也让那些从事jQuery和PHP开发的人员可以加入到Web开发队伍中,使得Web开发不再仅仅是Flash、Silverlight和JavaFX开发人员的专利。

尽管这一设想看起来很诱人,但面临的困难依然不少,因为HTML5标准中没有指定任何编解码器,而每个人都想发布自己的视频和声音编解码器。这就意味着我们用一种混乱取代另一个混乱:只是过去我们把嵌入到浏览器中的软件称为插件,而今天把它称为编解码器而已。因此,今天我们虽然有了一个标准的“video”标签,但浏览器可能知道也可能不知道到底如何解释这些视频内容。

在洛杉矶任教的HTML5应用开发讲师Erich Ocean认为编解码器的战争仍在继续。“计算机开发人员和Mozilla组织如果认为他们能为视频专业人士制定视频标准,那就大错特错了。”他说,“我们看到谷歌的新视频格式在一些地方得到了使用,比如在YouTube网站,但永远不会像H.264那样普及。”

尽管视频播放可能面临比较混乱的局面,因为无法让大家达成一致,但是新的“video”标签肯定会让互联网视频内容越来越丰富,网页将成为视频内容的主要发布源地,而同时单纯的文字内容也会越来越少。只是这对孩子的教育未必是好事,因为现在的孩子们变得越来越习惯于看动画,而很少花时间来阅读,更别提书写了。

Widget将更丰富

在IFrame中运行的Widget让网页可以把其他网站的内容(比如天气预报)嵌入进来,非常实用也非常受欢迎,但由于安全方面的原因,这些Widget一直运行在一个相对独立的环境中,与网页中的其他内容基本保持隔离状态。

而HTML5为这些Widget提供了一个相互通信的标准机制。尽管它们仍然不能够相互进入对方的运行环境中,但它们已经可以相互发送信息来协同工作了。

广告商对此早就期盼已久,它们非常希望能把分散到同一个网页各个位置的旗帜广告整合起来,而从开发的角度来说,开发人员也一定会找到其他实际用途。例如,在Web页面上播放的网球比赛画面可以和左右两边的球员信息同步起来,这在HTML 1.0时代是难以想象的。

不过,可以发送信息、相互通信机制只是一个开始,下一个亟待解决的是通信协议的问题,因为至今还没有这方面的一个标准。只有为传递信息设立一个标准后,两个不同开发团队开发出来的Widget之间才有可能相互通信。换句话说,通信双方需要更多的标准词汇。

提高浏览器的安全性

每个浏览器插件都是一个单独的应用程序,不同的浏览器插件是由不同的程序员按照不同的标准开发的,发布时间不同,安全模式也不同。很自然地,有些插件会比其他的更安全。随着浏览器中的插件越来越多,要跟踪每个浏览器插件中可能存在的安全漏洞越来越复杂。比如,你企业中去年年末某个时候的安全漏洞到底是出在插件还是浏览器,最后是通过升级浏览器而不是升级插件来解决的还是反过来,可能很难有人记得那么清楚。

把很多功能内置到HTML5而不是使用插件可以大大降低安全风险,避免与插件开发有关的多个环节出现问题,更可以防止有人故意利用插件中的API安装恶意代码。因为相对而言,Firefox、Chrome或IE浏览器等的安全性通常会经过更多的人(包括安全小组)的审计,如果安全小组认为某个浏览器安全,一般来说,其安全风险肯定要少得多。

不过,这里所说的安全性有所改善带有一定程度的主要臆测。这个世界总会有一些人把它们的聪明才智用到“邪道”上,他们完全可能利用HTML5的某种特性来从事一些恶意行为。只是现在没有人能够预测HTML5的新功能中到底可能隐藏着哪些危险。

简化Web开发

在一家Web软件开发公司工作的开发人员的话很有代表性,它简明扼要地阐述了HTML5可能带来的变化。他说:“我更喜欢HTML5,主要是因为它使我能够在一个统一的开发环境下进行开发,这个环境就是浏览器加JavaScript再加上DOM,而不必在Flash世界和HTML5的世界之间来回切换。未来只要掌握一门开发语言和一个工具集,就可以开发任何插件。”

他补充说,“我认为,对于用户而言好处也是很明显的,而现在Flash仿佛在互联网世界里另外创立了一片天地。”

的确,HTML5采用了统一的语言(JavaScript)、统一的数据模型(XML和DOM)和统一的表现规则(CSS)来表现文本、音频、视频和图形,对于开发者而言无疑的是非常理想的,基于一个统一的标准开发环境,工作肯定会简单不少。但要让一切都成为现实挑战仍然是巨大的,一个突出问题是工具的缺乏,现在HTML5的相关工具方面还很少。不可否认,Flash的流行与Adobe为Flash的开发提供了非常好用的工具密不可分。

链 接

HTML的演进历程

HTML全称是超文本标示语言(Hypertext Markup Language),是用来描述网页的一种规范。正是这些容纳在尖括号里的简单标签,构成了如今的 Web。

HTML的第一个官方版本是由IETF (互联网工程任务组) 推出的 HTML 2.0。后来,W3C 取代 IETF 的角色,成为HTML标准制订的组织,上个世纪90年代的后半叶,HTML 的版本被频繁修改,直到1999年的HTML 4.01,至此,HTML到达了它的第一个巅峰。

HTML在HTML 4.01 之后的第一个修订版本就是 XHTML 1.0,其中X代表 “eXtensible”。 XHTML 1.0 是基于HTML 4.01 的,并没有引入任何新标签或属性,唯一的区别是语法,HTML对语法比较随便,而XHTML则要求XML般的严格语法。后来,W3C又推出了XHTML 1.1。

对 W3C 而言,到了 HTML 4已经是功德圆满,他们的下一步工作是XHTML 2.0,希望将Web带向XML的光明未来。然而,来自Opera、Apple以及 Mozilla 的代表不满意W3C的工作,他们自发组织成立了超文本应用技术工作组,这就是WHATWG,他们致力于HTML5 规范。

在WHATWG致力于HTML5的同时,W3C继续他们的XHTML 2.0。不过,W3C在XHTML 2.0方面的工作慢慢地陷入困境,后来终止了XHTML 2.0的工作,并于2007年组建了一个新的HTML工作组,他们非常明智地选择了 WHATWG 的成果作为基础,致力于制订HTML5规范。

HTML5视频处理技术研究 篇5

1视频格式

目前, 大部分浏览器已经支持video标记, IE浏览器从IE9开始支持MPEG4格式的视频文件。video元素支持三种视频格式, 表目前, 大部分浏览器已经支持video标记, IE浏览器从IE9开始支持MPEG4格式的视频1是支持几种视频格式的浏览器及其版本。

MPEG4格式文件是有H.264视频编码与AAC音频编码的视频文件。

Ogg格式文件为是有Theora视频编码与Vorbis音频编码的视频文件。

WebM格式文件为是有VP8视频编码与Vorbis音频编码的视频文件。

2video标记

如果要实现HTML5中播放视频, 要加入下面标记:

<videosrc= "bear.mp4"width ="320" height ="240"controls ="controls">

</video>

页面将显示一个视频播放控件。controls属性提供播放、暂停和音量控制控件。width和height属性指定视频宽度和高度。在<video>和</video>标记所包含的内容是浏览器不支持video标记要显示的内容。

2.1 video标记的属性2.1 video标记的属性

HTML5 video标记可以使用如下属性, 下面对它们的含义功能作详细介绍。在下面所有属性中, videoWidth和videoHeight两个属性是直接可用的。其他属性只有在视频的元数据加载后才可以使用。性是直接可用的。

1) source

该属性可以给视频标记指定多个可供选择的视频文件地址, 并且只能在视频标记没有使用src属性时使用。该标记不能单独该属性可以给视频标记指定多个可供选择的视频文件地址, 并且只能在视频标记没有使用src属性时使用。该使用。有三个属性可供选择, 分别为type、src、media。用。

type属性指定src属性视频的类型。

src属性指定视频文件的地址位置。

media属性说明媒体在何种媒介中使用, 可以不为该属性设置属性值, 而默认为all值, 表示支持所有视频文件。

2) preload属性

该属性定义视频文件是否要进行预加载处理。该属性可以使用auto, none、metadata三个属性值。

Auto值表示要全部预加载。如果不设定preload属性值, 默认为auto值。

None值表示不进行预加载。

Metadata值表示部分预加载。

3) loop属性

该属性设定视频是否要循环播放, 这是一个布尔属性。

4) src属性与poster属性

poster属性为视频设定一张图片, 当视频数据无效时, 则显示预览图。src属性用于设定视频的地址位置。

5) autoplay属性

该属性用于设定视频是否要自动播放, 它是一个布尔属性。当video标记有该属性时, 表示视频自动播放, 没有该属性表示视频不自动播放。

6) height属性与width属性

width和height属性指定视频宽度和高度。

7) controls属性

该属性使浏览器显示视频播放控制栏, 视频控制栏包括进度控制, 暂停控制, 音量控制等控件。

2.2 video标记属性使用方法

页面播放显示效果如图2所示。

上面的例子使用IE10浏览器播放了一个MPEG4文件, 视频在就绪后马上播放, 并且每当视频结束时重新开始播放。video元素允许多个source元素。source元素可以链接不同的视频频文件。

video元素有两个source元素。source元素链接"bear.ogg"与"bear.mp4"两个不同的视频文件, 浏览器将使用第一个可识别的格式。

3 使用JavaScript操控video对象

使用HTML5 video标记可向网页中添加视频, 而无须使用外部控件或程序。将video对象API与JavaScript结合使用, 能够实现对音频播放控制。表2是HTML5 video对象方法、属性及事件。

3.1 HTML5video对象属性和方法

1) play () :该方法控制视频播放, 方法执行后paused的值变为false。

2) pause () :该方法控制视频暂停, 方法执行后paused的值变为ture。

3) load () :该方法控制视频重新载入, 方法执行后error的值变为null。

4) canPlayType () :该方法用于测试浏览器是否支持特定的视频类型文件。方法返回三个可能值。若返回空字符串, 表示浏览器确定不支持该视频类型;若返回probably, 表示浏览器确定支持该视频类型;若返回maybe, 表示浏览器可能支持该视频类型。

3.2 HTML5video对象事件

HTML5媒介事件主要用于各种媒介元素, 比如音频、视频等元素, 包括progress、abort、error、play、pause、playing、waiting、dura-tionchange、canplaythrough、canplay、timeupdate、seeking、seeked、ended、volumechange、stalled等各种事件。

事件play:视频即将开始播放;

事件loadstart:浏览器开始请求视频媒介, 开始加载视频文件;

事件error:获取视频媒介数据时出错, 视频停止播放;

事件timeupdate:改变了当前视频的播放位置, currentTime属性值发生了改变;

事件ended:视频文件播放结束, 视频停止播放;

事件seeking:浏览器正在请求视频文件数据;

事件volumechange:视频的音量发生改变, 设置了volume属性值, 或者变为静音。

事件durationchange:视频媒介时长发生了改变, 改变了duration属性值;

事件pause:视频暂停播放;

以上说明了表4-1介绍的部分属性和方法以及事件的含义。下面通过调用事件的方法, 说明如何控制video对象。通过JavaS-cript进行控制HTML5video播放与暂停, 改变视频窗口大小。部分主体代码如下。

页面播放显示效果如图3所示。

上图为视频创建了播放/暂停, 调整尺寸及重新播放控件, 调用了两个方法play () 和pause () ;同时使用了三个属性paused、width及currentTime来控制视频的播放/暂停, 调整尺寸及重新播放。

4 结束语

本文说明了HTML5中新增标记:video标记, 可以使用它处理视频数据。通过video标记可以用来添加视频, video标记能够播放视频文件或者视频流。使用HTML5 video标记可向网页中添加视频, 而无须使用外部控件或程序。若对加载的视频文件及其播放拥有更多的控制。可将video标记与JavaScript结合使用, 可以执行该操作并且还可以执行进一步操作。

参考文献

[1]Eric A.Meyer.CSS权威指南[M].尹志忠, 译.北京:中国电力出版社, 2007.

[2]Peter Lubbrs.HTML5高级程序设计[M].李杰, 译.北京:人民邮电出版社, 2011.

[3]Rob Hawkes.HTML5 Canvas基础教程[M].周广新, 译.北京:人民邮电出版社, 2012.

深入探索HTML5表单技术 篇6

HTML5是Web技术的一项巨大飞跃,它吸收了网页的各种技术需求,将很多API列入规范之中,将图形图像、视频音频等媒体进行标准化。其中,表单技术有了明显的提升,无论是表单的类型,还是表单的属性都使得表单的功能更加丰富,操作更加简洁,减少了代码编写,提高工作效率。

1HTML4的表单技术

HTML4中的表单技术相当简单,可以进行数据收集的表单域的数量不超过十个,这是使得利用网页制作数据录入界面非常困难,具体存在的问题有以下几个方面:

1)表单种类和属性单一,无法满足用户需求;

2)表单自身没有验证功能,需要用户通过编写脚本语言实现验证,增加了表单验证的难度,降低了页面的执行效率;

3)表单实现效果很差,虽然可以通过CSS进行样式修改, 但这还不足以满足用户需求,例如:下拉菜单在IE浏览器中无法通过CSS进行样式的修改,很多用户为了追求效果,需要自己开发下拉菜单。

基于以上的原因,用户制作基于网页GUI时,通常要使用Javascript语言和CSS技术整合控件满足用户需求,这大大增加了开发的难度,提高了开发成本,降低了开发效率。

2HTML5表单技术

HTML5除了扩充了表单类型,还给表单增加了很多新的属性,使表单功能和数据验证的实现尽量从程序代码分离出来。

2.1HTML5新增表单

HTML5在HTML4的基础之上扩充了表单的类型,这些表单更加符合当前网页界面制作的需要,它不仅保持了简洁易用的特性,还内置了验证功能,HTML5增加的表单如表1所示。 其中“email”、“url”、“search”、“tel”表单在“text”表单基础上内置了验证功能,如果录入数据错误,会提示错误,并且无法完成数据提交;“date”、“number”、“range”和“color”表单封装了特有的功能,用户可以更加方便的进行日期选择、颜色选择等操作。

2.2HTML5表单属性

HTML5除了扩充了表单类型,还给表单增加了很多新的属性,这些属性可以被分为以下几类:

1)表单域所属

新增的“form”属性可以将当前表单域指定给一个或多个表单,这使得表单域的归属和页面位置更加灵活,无需像HT-ML4一样必须将表单域放置在表单内部。另外,HTML5提供了 “form Action”、“form Method”等属性,这些属性设定后可以覆盖表单的action、method等属性,使表单域的使用更加灵活。

2)验证属性

HTML5除了内置验证功能外,还提供了专门的验证属性: “required”属性具备非空验证功能,表单必须输入数据才可以通过验证;“pattern”属性的值是正则表达式,表单内容如果不符合正则表达式规则将无法通过验证,通过“required”和“pattern”属性使表单的验证功能非常完善,用户几乎无需编写任何验证代码就可以实现复杂的表单验证功能。

3)功能属性

网页技术不断成熟,很多网页中表单功能已经成为一种使用习惯,HTML5将常用的表单功能进行了规范:在页面加载时,“autofocus”属性可以让输入性表单自动的获取焦点,它取代了Javascript语言的focus方法;“Placeholder”属性提供输入性表单提示功能,在表单为空时提示信息会显示,如果表单获得焦点,提示内容自动消失;“auotcomplete”属性可以设定输入性表单自动完成功能。

4)数据列表功能

HTML4中有下拉菜单和列表,但是文本和列表进行组合的表单一直实现困难,“list”属性允许将已经定义好的数据列表指定给某一个文本,从而解决组合框的问题。

2.3表单的优势分析

HTML5对表单输入的类型和属性都进行扩充,它存在的优势主要有以下几方面:

1)表单继承了原来表单简洁的特点。

2)输入表单功能扩充,以及验证功能的完善,用户无需将精力集中到功能性表单的实现和验证的实现,更加注重页面的设计,提高开发效率。

3)输入表单和验证功能无需再使用程序实现,这大量减少前端Javascript代码量,提高了网页运行效率。

4)丰富的表单属性保持了表单的一致性,增加了表单的灵活性。

3结束语

扑朔迷离话HTML5 (上) 篇7

日前, 来自孟买的创意设计团队Inventika Solutions为纪念乔布斯, 利用HTML5和CSS技术制作了一款网页版iPod播放器 (http://inventikasolutions.com/demo/iPod/) (如图1) 。不仅是外观酷肖第一代i Pod, 实际上这台“i Pod”是可以像真的i Pod一样操作的。

也许大家会觉得这个网页并没有什么非常神奇的地方。确实, 如果我们用Flash做这样一个网页, 是十分简单的事情。但这个网页没有使用任何插件, 是直接在网页上绘图的, 这就只有HTML5才能做到。

如果你无法看到或不能完整看到上面的网页, 那也不用急, 先让我们来揭开HTML5的面纱。

●HTML5的来龙去脉

HTML意为超文本标记语言 (Hyper Text Markup Language) , 是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。

1980年, Tim Berners-Lee为使世界各地的物理学家能够方便地进行合作研究, 创建了使用于其系统的HTML。TimBerners-Lee设计的HTML以纯文字格式为基础, 可以用任何文本编辑器处理, 最初仅有少量标记 (TAG) , 易于掌握运用。随着HTML使用率的增加, 人们便不满足只能看到文字。1993年, 还是大学生的马克·安德生在他的Mosaic浏览器加入<img>标记, 从此可以在Web页面上浏览图片。但人们认为仅有图片还是不够, 希望可将任何形式的媒体加载到网页上。因此HTML不断地扩充和发展。W3C (World Wide Web Consortium, 万维网联盟) 于1997发布HTML4.0, 被广泛接受和使用, 到现在已经有15个年头了。

HTML5是HT M L的最新标准, 目前仍在完善中。它的诞生得益于WHATWG (Web Hypertext Application Technology Working Group, 超文本应用技术工作组) , 这个组织中的成员认为, 此前以文档为中心的理念无法有效地满足现代Web应用的需要, HTML的改进应以互联网应用为中心, 并在未来的Web世界中扮演更重要的角色。HTML5的目标是取代1999年所制定的HTML4.01和XHTML1.0标准, 以期能在互联网应用迅速发展的时候, 使网络标准达到符合当代的网络需求。W3C声称, 将在2014年发布HTML5草案, 正式标准将于2022年发布。

广义论及HTML5时, 实际包括了HTML5、CSS3、JavaScript以及新的浏览器API所包含的整个Web前端技术。它希望能够减少浏览器对于需要插件的丰富性网络应用服务 (plugin-based rich internet application, RIA) , 如Adobe Flash、Microsoft Silverlight与Oracle Java FX的需求, 并且提供更多能有效增强网络应用的标准集。

2007年, 乔布斯断言拒绝Flash并预言HTML5时代来临, IT行业也因此对HTML5产生了一股宗教热情。HTML5有着许多出众的特性, 可以直接在网页上绘图、嵌入音视频、实现信息互动, 可以跨越i OS、Android等多个平台, 轻易地将网页应用转换成桌面应用……它俨然成了APP的终结者以及下一代移动技术的代名词。国内业界人士普遍认为, 具有跨平台特征的HTML5将是开发标准的一次技术性革命。

●HTML5与HTML4的重要区别

作为HTML4一个革命性的更新, HTML5具有一些非常重要的特性。

◇HTML5的CANVAS标签将允许直接在网页上用脚本绘图。这是一个革命性的突破。这将使得我们能抛弃Flash和Sliver Light等插件, 直接显示丰富多彩的图像和动画。而HTML4只能使用静态图片, 也无法对图片进行调整。

◇HTML5支持用户直接在网页上进行交互。Contenteditabl属性允许你设定网页的哪一部分可以编辑。我们不只是能在网页上观看视频, 而且可以和视频进行交互。这是一种振奋人心的功能。

◇HTML5突破了其作为标记语言的界限, 增加了很多颇具实用价值的API。例如, Web SQL Database API可以创建数据库对象从而长期保留当前会话下的数据, 为浏览器的离线工作扫清了道路。又如, File API可以使本地文件通过拖放的方式上传至网站, 甚至还提供了一个接口来关联上传数据, 从而提供显示上传进度和其他信息的方法。在这些API的共同作用下, 无需客户端和插件, 完全基于Web页面的应用程序已经指日可待。

◇HTML5拥有更加强大的图像功能。不仅大大加强了矢量图和位图, 还内建了对3D技术的支持, 以WebGL为代表的技术可以帮助HTML5提供硬件3D加速渲染, 借助系统显卡在浏览器里流畅地展示3D场景和模型。

◇HTML5支持离线存储。所有的浏览器都有自己的缓存机制, 但那些机制并不可靠而且难以控制。HTML5通过Application Cache接口解决了一些问题。这个技术显然至少有三个好处:用户可以离线访问你的Web应用;由于文件被缓存在本地, 使得Web页面加载速度提升了许多;离线应用只加载被修改过的资源, 因此大大降低了用户请求对服务器造成的负载压力。

◇HTML5新增加的audio和video标签, 使得音频和视频就会像今天的文本以及图片一样, 成为任何网页的标准部分。这意味着网页不需要加载任何播放器就能播放声音和视频, 这将大大减少浏览器的工作负担, 并提高用户的体验。这个变化导致的结果之一是, 浏览器可以摆脱很多插件而独立运行。

●HTML5引发的竞争

1.技术之争

虽然HTML5令人狂热, 但我们不得不看到, 普及推广HTML5并非一帆风顺。在这条大路上, 第一个拦路虎就是Flash。到底是Flash技术优胜, 还是HTML5更好?目前还不能得出定论。

Flash在过去的13年中版本从1.0发展到现在的11.5, 逐渐成了互联网上最流行的RIA技术。在Web交互体验、音频、视频、游戏、广告、企业Rich UI等领域, 都能看到Flash的身影。目前电脑上的浏览器安装了Flash插件的占97%以上, 占有率高高在上。并且Flash支持后台自动升级, 用户可以随时享受到Flash创新带来的体验, 没有任何障碍。从图2, 我们还可以看出Flash在不断进行创新, 对于HTML5带来的富媒体支持, Flash同样势均力敌。因此, 到底鹿死谁手, 并不是我们想象得那么简单。随着HTML5在Open Web下的进化, 加入了这些类型的功能, Flash有绝佳的机会和时间在重复的功能上做出改进, 更加强化自己在富媒体领域的针对性地位。

HTML5基于Open Web的理念是完美的, 但是Open的统一是要付出昂贵代价的。HTML5的交付和统一之路更加漫长, 这不仅仅是技术的开放、标准更新换代的过程, 更包含了令人匪夷所思的商业博弈在其中。

HTML5的成功尚需时日, Flash的占有率仍然高高在上。短时间内谁也无法奈何了谁。这下可辛苦了互联网企业, Flash与HTML5的争夺让他们已经开始做两手准备。现在最常用的办法是网站会自动识别浏览器UA, 专门为苹果公司的设备提供一个H.264格式的视频, 其余的设备则显示一个Flash播放器, 里面也可以播放这个H.264格式的视频。这种状况将会长期存在下去, 只要桌面级Flash不死, 就会有大量的用户, 因为无论是Flash还是HTML5, 用户需要的都只是结果, 而不是中间的过程。

当然, 在移动互联网领域, HTML5与Flash的争夺已经有了结果。苹果的IOS系统从一开始就不支持在线Flash, Android从4.1版开始, 也抛弃了Flash, 微软的WMP系统也不再支持Flash。Adobe公司宣称已经放弃继续对移动互联网的支持。这是HTML5目前取得的唯一胜利。移动平台HTML5得以战胜Flash, 主要是因为苹果等厂商对Flash的强硬态度, 在移动平台上用户也没有太多的选择。HTML5将会逐渐取代Flash, 未来HTML5将会得到更长足的发展。目前Youtube、Youku等网站都已经开始支持HTML5, 使用Andorid手机的用户也大可不必担心, 未来视频仍然可以观看, 而使用i Phone的用户同样可以使用。

可以肯定的是, 如果在PC端主流浏览器没有统一支持HTML5编码, 普及性将无法和Flash相比。不管未来的走向到底如何, 无疑将会引发一场硝烟弥漫的恶战。

2.标准之争

负责制定HTML标准的两家机构是WHATWG和W3C。当年W3C因为将重点放在XML和XHMTL上, 对未来HTML标准编制缓慢, 因此WHATWG应运而生。当时, 绝大多数用户都希望使用HTML标准, 而且希望能够改善这一标准。所以2004年, WHATWG就开始负责编写HTML标准。2007年W3C接纳WHATWG团队编写的HTML5标准, 并成立了新的HTML工作团队。

近来, W3C和WHATWG在HTML5标准上的分歧越来越大。WHATWG专注于发展标准的HTML5格式及相关技术, 并且可以不断地修正标准中的错误。而W3C则想根据自己的开发进程制作出“标准版”HTML5标准, 颁布之后不容许更改, 错误也无法修正。所以W3C和WHATWG决定分离, 各自对自己的HTML5标准负责。这也意味着今后将会出现两个版本的HTML5, 即“标准版”和“living”版 (活标准) 。

上面这段WHATWG官网上的说明, 表明制定HTML5标准的两家机构已经分道扬镳, 将各自制定出自己的HTML5标准。到底两个标准有什么区别呢?

通俗点说, W3C想要的HTML5是单一的、确定的标准。而WHATWG所开发的HTML5更像是一个“动态的”HTML5:WHATWG的HTML5标准不会固定下来, 它会经常性地添加新特性或是进行改进。而各个浏览器和程序员需要做的就是跟上WHATWG的节奏。由于摆脱了W3C的程序步骤, WHATWG的“living”标准制定很可能会提速。

2011年1月, WHATWG的Ian Hickson为Web标准描述了一个新的发展模式:WHATWG将集中于演进“living” (活) 标准, 而W3C坚持使用传统的数字编号系统定义静态的“snapshots” (快照) 。Hickson称, W3C的标准一旦制定后, 即便出现错误也无法修正。但双方各有优势, WHATWG不断地更新保证用户使用最新的体验, 而W3C的标准的优势体现在专利授权、合同条款等方面。

在HTML5的视频格式标准上, Google和苹果发生了激烈的争执。Google认为苹果所支持的MPEG视频协议核心技术为苹果一家所把持, 商业化程度这么高的东西绝然不能加入HTML5的开放标准中。于是Google在Youtube中大力推广WebM格式, 和苹果针锋相对。WebM影片格式是以Matroska (即MKV) 容器格式为基础开发的新容器格式, 里面包括了VP8影片轨和Ogg Vorbis音轨, 其中Google将其拥有的VP8视频编码技术以类似BSD授权开源, Ogg Vorbis本来就是开放格式。

HTML5标准的分裂, 让它的未来又充满变数。

3.浏览器之争

HTML5的普及, 另一个拦路虎是浏览器。如果大量浏览器不支持HTML5, 则HTML5的普及更为艰难。互联网领域交锋最激烈的战场就是浏览器市场。微软、谷歌、苹果, 还有一众大大小小的公司的不同浏览器被卷入这场似乎无休止的战争当中, 谁都想从中分一杯羹。占据了浏览器的桥头堡, 就扼住了互联网的入口, 具有极为重要的意义。360通过浏览器的优势, 自推搜索引擎能在百度虎口夺食, 证明了浏览器的威力巨大。

现在, 对HTML5的兼容程度成为了衡量浏览器优劣的一个重要指标。特别是移动浏览器, 更是已经进入跑分竞争。有些浏览器厂商甚至为了单纯得高分而牺牲用户体验, 陷入了为分数而分数的怪圈。如果你想知道自己的浏览器对HTML5的兼容性, 可以打开网站http://html5test.com/进行测试。网站将给出当前浏览器能得到的分数。

截止到2012年10月10日, 五大浏览器最新版本在HTML5测试中所取得的分数如下表所示。可以看出, Chrome对HTML5的兼容性是最好的。IE9也在紧紧追赶之中。

在全球范围内来看, Chrome在今年5月市场份额首次超越IE并且在接下来的时间保持领先, Firefox、Safari也分别占有23%、8%左右的份额。在IE中, IE9也逐渐普及, 各个优秀的浏览器对HTML5提供了良好的支持。IE占统治地位的情景将成为明日黄花, HTML5将在浏览器市场掀起波澜。虽然离HTML5正式标准的发布还非常遥远, 但伴随着HTML5标准的普及, 或将带来整个浏览器行业的重新洗牌。

但是对我国来说, 情况就不是那么乐观了。图3是我国今年9月分的浏览器市场份额情况。可以看出IE以近70%的份额占据了绝对的优势。更为遗憾的是, 以Windows XP和Win 7自带的IE6、IE8又占近60%的份额, 加上以IE为核心的360浏览器、搜狗浏览器及Maxthon等, 起码有八成以上的浏览器无法正常浏览HTML5网页。IE6从21世纪初发布开始, 十年如一日, 至今仍在统治着人们浏览互联网的窗口, 新型浏览器在中国举步维艰。浏览器直接制约了HTML5在我国的推广普及。

当然, 在国际巨头纷纷鏖战浏览器市场时, 我国也开始重视浏览器的研究。2012年4月12日, 工信部网站公布2013年“核高基”国家科技重大专项课题。面向移动互联网智能终端的浏览器研发与产业化成为课题之一, 成功入选企业有可能获得6900万元中央财政资金支持。根据最新的课题申报指南, 国家将支持两家相关企业进行移动浏览器的研发及产业化, 其中一家企业需要研发出支持移动智能终端的HTML5浏览器;另一家企业则要研发出安全可控的跨平台浏览器。国家的重视和扶持, 能不能让我国自主研发的浏览器也在HTML5的大潮中占据一席之地?我们且拭目以待。

●HTML5应用的崛起

正是因为HTML5具有如此多激动人心的优势, 许多公司都纷纷押注HTML5。亚马逊用HTML5开发了一款基于网页的应用程序Kindle Cloud Reader, 规避苹果对在iPhone和iPad上销售内容的相关规定。

“愤怒的小鸟”开发商Rovio Entertainment为该游戏开发了HMTL5版, 无需安装应用程序就能玩。网络电台Pandora Media的网站也已用HMTL5重新设计, 这使打开速度更快, 而且更方便用户追踪其他用户的收听爱好。

据跟踪互联网技术的科技博客binvisions报道, 今年第三季度最受欢迎的100个网站中有34%采用了HTML5。

国内因为落后的浏览器占统治地位, 在HTML5的布局上还处于预热之中。比较成熟的应用只有互联网巨头腾讯开发的Q+ (web.qq.com) 。Q+利用HTML5的离线缓存特性, 开发了数款游戏和应用, 可以在断开网络时使用。在移动互联网方面, 国内领先的UC浏览器提供了对HTML5标准强大的支持, UC应用中心是目前国内移动互联领域最大最全的WebAPP应用平台, 收录的HTML5应用数量已经超过了600款, 活跃用户超过3000万, 图4为UC浏览器的应用中心截图。

过去, 浏览器只负责网页基本内容、格式的渲染和基础脚本 (如JavaScript) 的执行, 更高层次的需求, 如视频播放、游戏、声音效果等由第三方插件或者专门的软件来完成。但是, 网络技术发展的大势所趋是瘦客户端与云计算的组合, 在这个趋势下, 更精简的客户端软件和更强大的浏览器能力已经成为业界的诉求。所以, HTML5的诞生并非偶然, 而是时代的选择。

HTML5之所以会成为业界的焦点并成为HTML发展的必由之路, 正是因为它再次夯实了HTML作为Web根基的地位。它抛开了臃肿的插件, 强化了浏览器对HTML的理解能力, 不仅是对用户浏览体验的革新, 也是对网络浏览器技术比拼重新进行发牌。

HTML5模拟平抛运动 篇8

HTML5是由HTML演变而来, 它是一种万维网核心语言, 通用标记语言下的一个超文本标记语言第五次修订, 与2014年10月29日万维网联盟宣布制定完成。HTML5之所以受到广大用户及、开发商的欢迎, 那么, 它都有哪些特性呢?

(1) 语义特性。HTML5拥有支持RDFa、微数据、微格式等的各种标签, 从而构建出更好数据驱动的Web。

(2) 设备兼容特性。HTML5有很好的兼容性, 支持各种移动终端, 并为用户提供更多的功能选择及开放接口, 如视频文件可直接与摄像头及microphones相联。

(3) 连接特性。HTML5很好的连接特性使得基于页面的实时聊天、网页游戏体验、在线交流等更加便捷快速。除此之外, 它还拥有很好的服务器推送技术, 其中Server-Sent Event和Web Sockets最具代表性。

(4) 网页多媒体特性。它能将视音频文件与网站自带的摄像头、APPS等影音功能相匹配。

(5) 三维、图形及特效特性。HTML5可通过SVG、Canvas、Web GL、CSS3等的3D功能呈现各种视觉效果。HTML5的功能肯定是基于其特有的标记, 下面对几个常用的标记简单介绍:video标记———定义视频, 比如电影片段或其他视频流;canvas标记———canvas标签定义图形, 比如图表和其他图像。HTML5的canvas元素使用Java Script在网页上绘制图像。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2 如何用HTML5模拟简单的平抛运动

首先声明变量:var cball, 定义小球的位置、颜色, 并绘制小球调用draw Ball () 和ctx.fill Style函数。移动小球:function begin Move () , 并确定移动后小球的x、y值的坐标:cball.bx=ini X;cball.by=ini Y。确定移动后小球的位置:ctx.move To (20, 20) , 并绘制出来:ctx.stroke () ;cball.draw () , 并调用函数Function init () {ctx=document.get Element By Id ('canvas') .get Context ('2d') }以此类推, 分别移动到接下来的位置: (860, 20) ; (20, 20) ; (20, 590) ; (850, 10) ; (860, 20) ; (850, 30) ; (10, 580) ; (20, 590) ; (30, 580) ;即可绘制出小球到落地前的所有轨迹。最后在Body中定义一个表格, 分别控制初始水平速度:<input name="hor Speed"type="number"value=50/> (px/s)

开始按钮, 代码如下:<input type="button"value="开始"on Click="begin Move () ;"/>轨迹计时:<input name="sec"type="text"value=0/> (s) 。这样一个简单的平抛运动就完成了。

3 HTML5模拟平抛运动的分解路径

在竖直方向上为自由落体运动, 小球的x坐标不变, y的坐标与第一个小球相同, 为第二个小球声明变量并绘出竖直方向上的运动轨迹:var cball2=new Ball (ini X, ini Y, rad1) ;cball2.by+=dy* (t*t- (t-1) * (t-1) ) 。接下来分析水平方向的运动, 只有y值在变, x值不变, 也需要声明一个变量并将其每个轨迹绘制出来:var cball3=new Ball (ini X, ini Y, rad1) ;cball3.bx+=dx。

为了更加清晰的观察小球的平抛运动, 我们为合成路径添加交叉线, 该线会随着小球的运动而产生, 纵横线交叉的位置就是小球的最终轨迹, 效果图如下图所示:

4 结语

在我们这个智能手机与平板电脑迅速发展的今天, 移动已成为趋势。许多游戏开发者也在HTML5的运用方面不断努力, 相信HTML5的功能会不断完善, 将会被更多的人所使用, 在网络中也日益突出。

摘要：在这个网络迅速发展, 移动设备日益发达的今天, 游戏开发商等各种业内人士对HTML5的青睐也在不断增加。原因不仅仅是因为它是一款很好用的游戏开发工具, 更重要的是, HTML5的兼容性, 它支持笔记本、台式机、智能手机等各种移动终端, 也可以说是网络的统一。据统计2013年全球近10亿手机浏览器支持HTML5, 开发HTML Web的人数高达200万次。HTML5即将成为移动互联网领域的主宰者。

关键词：HTML5,平抛运动

参考文献

[1]HTML5游戏开发.美.Jeanine Meyer著.徐阳荆涛等译.人民邮电出版社, 2011.

HTML5为什么又红了？ 篇9

即使你不是技术控，你也应该感受到过去一段时间身边发生的HTML5事件，比如微信朋友圈里各种和这种技术相关的小游戏、营销页面，以及刚刚推出的微信朋友圈广告。当然，搜狐的创始人张朝阳最近也宣称要用HTML5拯救门户。

简单来说，HTML5是一个基于浏览器的协作标准，让各种不同的素材在浏览器中流畅运转。不过HTML5并不是一个新技术，早在2010年4月，乔布斯就在一封名为Thoughts on Flash的公开信中预言，HTML5 will win。随后HTML5就开始大热，很多大公司都在推动这项技术的应用。

但2012年开始这一技术遇到了麻烦，当年HTML5的两个标准组织W3C和WHATWG终止合作。2013年Facebook和LinkedIn更是宣布放弃HTML5，扎克伯格当时表示“我们过去最大的错误就是在HTML5上面赌太大。”国内的相关HTML5应用也随之陷入低谷。

虽然W3C于2014年10月底宣布了正式版的HTML5标准，但这显然不足以解释为什么短短1年时间HTML5应用就重新热了起来。

时机 很多热点的事件都是厚积薄发，HTML5就是如此。此前iOS和Android系统已经放弃了Flash，这让HTML5有了一个天然的成长基础。而现在手机硬件的提升和HTML5本身的完善，使得基于HTML5的应用表现更好。现在iPhone对HTML5的支持很完善，而Google也完成了Android内置浏览器向Chromium内核的切换，大幅提升了对HTML5的支持。在去年发布的iOS 8中，苹果向第三方厂商开放了自己的JS加速引擎Nitro，以强化iOS设备上HTML5的表现。

更好的体验 在过去几年，很多基于HTML5的应用都在试图替代原生App，但受限于技术的完善程度，这些应用的体验都远远不如原生App。过去一年HTML5能够重新热起来的重要因素就是提供了比原生App更好的体验，但这种体验的基础并不是单纯的替代原生App，而是做了一些最适合HTML5的细分应用，比如小游戏、媒体和营销类的产品。这些细分的方向能够最大程度发挥HTML5跨平台、开发成本低、开发速度快的诸多优点，在整体产品体验上远远超出原生App。

原生App的需求 从需求的角度来看，HTML5和原生App并不是对立的，反而是原生App需要HTML5去解决一些核心的问题，比如原生App之间的信息互通。目前原生App都是各自孤立的，既缺少相互的信息传输，也让App的流量费用变得越来越高。而HTML5应用则能够以很低成本解决这些原生App自身无法解决的问题，让整个移动应用市场更有效率。

在国内市场，几个大的互联网公司实际上都在努力推动HTML5应用，包括腾讯、阿里巴巴、百度和360等公司，但真正推动HTML5成为热点的还是微信。

实际上微信并没有在HTML5技术上有什么创造性的推进，而是在HTML5的应用场景上做出了自己的不同尝试，即并没有基于浏览器和网址去推广HTML5，而是通过微信特殊的账号和收藏的方式，形成了附着于微信这样一个超级App的HTML5应用场景。当然，更重要的是微信提供了一些用户最容易接受的细分HTML5应用。这使得用户获得了更好的应用体验和更便捷的获取应用的渠道。

HTML5发展 篇10

随着多媒体教学及配套设施的普及, 在我国高校英语教学中使用电子教案授课已成为一种常态。目前国内各大出版社为大学英语教材配套电子教案已是趋势。电子教案作为承载教学内容, 传递教学理念的工具, 其制作质量的高低, 将直接影响教学效果的好坏。针对目前国内大多数高校所采用的大学英语教材配套电子教案, 作者从可复用性、交互性和程序与数据分离三个方面进行调研, 通过上述比较分析不难看出此类电子教案存在以下问题:

1.1 电子教案内容可复用性差

Microsoft Power Point工具是采用按页制作, 插入文本框的方式编辑内容。这就导致所制作的教学内容没有统一的数据标准, 在今后重复使用时只能通过拷贝粘贴等费时费力的方法。

1.2 基于自定义动画的交互性非常有限

Microsoft Power Point工具提供自定义动画可以实现较为简单的交互效果, 但是对于稍复杂的交互就无能为力了。

1.3 内容流式排版、图文混排支持差

流式排版可以根据教学需要自由缩放字号, 确保即使坐在教室最后一排的学生仍能看清屏幕。而图文混排不仅是流失排版的必要条件, 同时也可以大大缩短内容编排时间。Microsoft Power Point工具在这两个方面均没有提供支持。

1.4 有限的音视频播放支持

音视频素材的放映对于英语教学必不可少。但是Microsoft Power Point工具直到2010版本才实现了视频进度条指示, 音频则是至今没有进度指示。而该版本由于与老版本文件格式不兼容, 普及率并不高。对于同步字幕、AB点复读、快进快退等控制功能更是无法实现。

2 方案设计与实现

针对前述问题, 作者设计并实现了基于HTML5的交互式英语电子教案框架 (Courseware Framework简称CFramework) 。HTML5是当前最新的网页技术, 配合CSS3和Javascript可以实现非常丰富的交互开发[1]。该技术先天具有良好的流式排版、图文混排和媒体支持能力。CFramework框架通过对数据模型、通用业务逻辑和视图加载等功能进行封装, 使程序模块更易于开发, 易于诊断, 增强可扩展性和可复利用性。

2.1 建立数据模型, 分离内容、样式与程序

元数据规范即是对英语电子教案中教学内容建立数据模型, 并使用XML进行描述。数据模型采用树状结构组织教学内容。所有的树节点统称为item, 每个item可以指向resource, resource链接具体的教学内容assessment Item模型。树形结构由Manifest模型定义。Manifest模型定义参考IMS Content Packaging Specifi cation制定, 并进行自定义扩展。

assessment Item模型则是具体定义manifest.xml中元素指向的教学内容Item。assessment Item模型主要目的是通过对课件教学内容的描述, 为课件教学内容的呈现和交换提供一个通用的可复用数据模型。根据这个目的, 一个assessment Item可以由一组相互关联的逻辑内容块 (或者空) , 以及附加的信息、素材、选项等构成。逻辑内容块可以是练习中的一道试题, 也可以是课文中一段文字。assessment Item数据模型定义参考IMS Question and Test Interoperability Specification制定。

2.2 建立方案架构

CFramework架构分为低耦合的三层:Model、View和Controller。

2.2.1 Model与Proxy

Model保存对Proxy对象的引用, Proxy负责操作数据模型, 与远程服务通信存取数据。这样保证了Model层的可移植性。

2.2.2 View与Mediator

View保存对Mediator对象的引用。由Mediator对象来操作具体的视图组件, 包括:添加事件监听器, 发送或接收Notifi cation, 直接改变视图组件的状态。这样可以实现视图与控制它的逻辑分离。CFramework定义了视图加载的功能View Loader Helper。

2.2.3 Controller与Command

Controller保存所有Command的映射。Command类是无状态的, 只在需要时才被创建。Command可以获取Proxy对象并与之交互, 发送Notifi cation, 执行其他的Command。经常用于复杂的或系统范围的操作。CFramework中定义了多个通用业务逻辑。

2.3 实现可视化内容编辑

英语电子教案制作完成后总不可避免的需要对内容进行修改, 由于主题编辑的复杂性, CFramework通过电子教案内容编辑器主要实现了可视化的内容编辑。该编辑器基于电子教案元数据规范开发, 为英语教师制作和修改电子教案内容提供可视化编辑。

manifest编辑:可以实现Item的增删、命名及更改目录位置等。

Item编辑:可以实现教学内容编辑, 交互对象插入及相关Item属性设置。

Text编辑:可以实现课文内容编辑, 支持插入背景知识、热词、句子结构等热区。

3 应用与总结

目前CFramework框架第一阶段开发已基本完成。采用该框架制作的英语电子教案具有非常理想的开发优势。

(1) 通过定义统一的数据模型, 保证内容、样式与程序的分离, 极大提高了数据文件的可复用性, 为后续开发其他数字产品节省大量人力物力。

(2) 交互对象的插件式封装为该框架扩展提供了无限可能, 也使得开发者可以模块化设计, 积累更多的交互对象类型, 为今后同类电子教案的开发构建可复用代码的功能库。

(3) 在既定接口的前提下, 程序与数据可以同步开发, 大大缩短了开发周期, 降低开发成本, 及时抢占市场份额。

(4) 框架结构基于低耦合、高内聚原则设计, 确保了制作的电子教案程序具有较好的可维护性和稳定性。

当然限于当前开发人力及物力的投入, 目前CFramework框架仍然有其薄弱的地方。但是随着后续投入的不断持续, CFramework框架定能够逐渐完善。作者也希望CFramework框架能够为同类电子教案开发和应用提供借鉴和思路。

参考文献

[1]W3School.HTML5教程[EB/OL].http://www.w3school.com.cn/html5/index.asp.

[2]IMS Global Learning Consortium, Inc..IMS Content Packaging Specification (v1.1.4 Final Specification) [EB/OL].http://www.imsglobal.org/content/packaging/index.html.

[3]IMS Global Learning Consortium, Inc..IMS Question and Test Interoperability Assessment Test, Section, and Item Information Model (v2.0 Final Specification) [EB/OL].http://www.imsglobal.org/question/index.html.