WEB产业革命的又一次强有力的推动-HTML5
北大青鸟马甸华腾校区在育人的同时也在时时刻刻的关注着网络科技的所有相关新闻大事。在最近的诸多新闻中,有一件是对IT领域来说可以称的上是“大事件”的话题,这个话题就是HTML5,从目前的了解情况看,HTML5吸取了XHTML2的很多精髓,并把其中的很多优秀之处加以规范化后重新定义,在目前的一些可以支持HTML5的网站中我们不难发现,如今的HTML的功能可谓十分的强大,甚至在某些网站中我甚至把这样的HTML5的网站当成了是AJAX所写的网站,从这点上我们就不难发现,HTML5的功能确实与老版本有了很多本质的改变。
HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案已公布,预计将在2010年9月正式向公众推荐。HTML 5有两大特点:首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。其次,追加了本地数据库等Web应用的功能。HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图像,动画,以及同电脑的交互都被重新定义并加以标准化。
HTML5中的最新标记
HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。
一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。
下面我们来细致的分析一下目前对我们最感兴趣的几个全新的标签。首先第一个就是:
<video>标记
定义和用法:
<video>标签定义视频,比如电影片段或其他视频流。
实例:
一段简单的 HTML5 视频
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
各系统与浏览器支持的视频格式:
<th>HTML5 </th>
操作系统 |
浏览器 |
支持度 |
|
Windows |
Internet Explorer 6 |
不支持 |
如果安装了Google Chrome Frame,支持HTML5 |
Internet Explorer |
不支持 |
如果安装了Google Chrome Frame,支持HTML5 |
|
Internet Explorer |
不支持 |
如果安装了Google Chrome Frame,支持HTML5 |
|
Internet Explorer |
支持(mp4,webm*) |
*如果安装了VP8解码器 |
|
Firefox < 3.5 |
不支持 |
||
Firefox 3.5, 3.6 |
支持(ogg) |
||
Firefox 4 |
支持(webm,ogg) |
||
Chrome < 3 |
不支持 |
||
Chrome 3, 4, 5 |
支持(mp4,ogg) |
||
Chrome 6 |
支持(mp4,webm,ogg) |
||
Opera < 10.5 |
不支持 |
||
Opera 10.5 |
支持(ogg) |
||
Opera 10.6 |
支持(webm,ogg) |
||
Opera 11 |
支持(webm,ogg) |
||
Safari 3.1, 4, 5 |
支持(mp4) |
||
Mac |
Safari < 3.1 |
不支持 |
|
Safari 3.1, 4, 5 |
支持(mp4) |
||
Firefox < 3.5 |
不支持 |
||
Firefox 3.5, 3.6 |
支持(ogg) |
||
Firefox 4 |
支持(webm,ogg) |
||
Chrome < 3 |
不支持 |
||
Chrome 3, 4, 5 |
支持(mp4,ogg) |
||
Chrome 6 |
支持(mp4,webm,ogg) |
||
Opera < 10.5 |
不支持 |
||
Opera 10.5 |
支持(ogg) |
||
Opera 10.6 |
支持(webm,ogg) |
||
Opera 11 |
支持(webm,ogg) |
||
Linux |
Firefox < 3.5 |
不支持 |
|
Firefox 3.5, 3.6 |
支持(ogg) |
||
Firefox 4 |
支持(webm,ogg) |
||
Chrome < 3 |
不支持 |
||
Chrome 3, 4, 5 |
支持(mp4,ogg) |
||
Chrom |
支持(mp4,webm,ogg) |
||
Opera < 10.5 |
不支持 |
||
Opera 10.5 |
支持(ogg) |
||
Opera 10.6 |
支持(webm,ogg) |
||
Opera 11 |
支持(webm,ogg) |
||
Konqueror < 4.4 |
不支持 |
||
Konqueror 4.4+ |
支持(ogg) |
||
iOS |
(iPhone,iOS 3,4) |
支持(mp4) |
早期版本(iOS 1,2)不支持HTML5视频 |
(iPad, iOS 3.2) |
支持(mp4) |
||
Android |
Android 2.1, 2.2 |
支持(mp4) |
|
Android 2.3 |
支持(mp4) |
ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件。
mp4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
接下来是和视频关系最紧密的音频了:
定义和用法
<audio> 标签定义声音,比如音乐或其他音频流。
实例:
一段简单的 HTML 5 音频
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
音频格式:
当前,audio 元素支持三种音频格式:
IE 8 |
Firefox 3.5 |
Opera 10.5 |
Chrome 3.0 |
Safari 3.0 |
|
Ogg Vorbis |
√ |
√ |
√ |
||
MP4 |
√ |
√ |
|||
Wav |
√ |
√ |
√ |
最后让我们看一下一个很有创意也很实用的绘图标签
<canvas> 标记
定义和用法:
<canvas> 标签定义图形,比如图表和其他图像。
实例:
如何通过 canvas 元素来显示一个红色的矩形:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
标签变化
HTML5 吸取了 XHTML 2 一些建议,包括一些用来改善文档结构的功能,比如,新的 HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在这些场合是一律使用 div 的。
HTML5 还包含了一些将内容和展示分离的努力,b 和 i 标签依然存在,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。
新标准适用了一些全新的表单输入对象,包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,一种使用机器可以识别的标签标注内容的方法,使语义 Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。
全新的,更合理的 Tag,多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频的 Tag,音频有音频的 Tag。
本地数据库。这个功能将内嵌一个本地的 SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线 Web 程序也将因此获益匪浅。不需要插件的富动画。
Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力,这意味着我们可以脱离 Flash 和 Silverlight,直接在浏览器中显示图形或动画。一些最新的浏览器,除了 IE,已经开始支持 Canvas。
浏览器中的真正程序。将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰 Tag 将被剔除,而使用 CSS。
程序接口
除了原先的DOM接口,HTML5增加了更多API,如:
1. 用于即时2D绘图的Canvas标签
2. 定时媒体回放
3. 离线数据库存储
4. 文档编辑
5. 拖拽控制
6. 浏览历史管理
元素变化
新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput元素的新属性:日期和时间,email, url。新的通用属性:ping, charset, async全域属性:id, tabindex, repeat。移除元素:center, font, strike。
异常处理
HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全的忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
市场前景
据美国知名科技博客网站TechCrunch报道,Facebook已秘密制定了一项名为“斯巴达”(Project Spartan)的移动平台服务计划,此举意在以全新方式向苹果iOS平台和Google的Android平台以及相关移动服务发起强有力的挑战。“斯巴达”目前仍然属于Facebook秘密开发的产品,目前确切可知的消息是“斯巴达”是一款基于HTML5技术标准的移动服务平台,目标群目前锁定为使用移动版Safari浏览器的iPhone手机和iPad用户。
目前已知的“斯巴达”平台的工作原理是:该平台基于HTML5技术,而Safari浏览器又对HTML5有比较好的支持,用户通过Safari访问“斯巴达”平台后,不仅能够在该平台使用Facebook的基本服务,还能够获取使用由外部开发者基于该平台开发的相关应用程序。
在与美国大洋彼岸的中国,也随着HTML5的新近推出而起到了一些列的连锁反映,比如国内某著名的视频网站就在第一时间应用了HTML5中最新的视频技术,把原来的FLV文件直接加载进了HTML中,我前两日曾经亲身尝试了一下,感觉和过去的视频播放来比较的话,从速度和质量上都能够有一个明显的区别,这样全新的体验让用户能够更好的来进行视频观看和各种娱乐享受,总之,HTML5的推出是一次对现有网络应用格局的改变,但具体可以改变的范围和影响有多广,还需要用时间来证明这一切。
最后马甸华腾中心校区的全体学术部教师们希望大家可以时刻更新自己的现有知识,第一时间熟悉和掌握好IT领域的所有相关性的知识和前沿技术,预祝大家能够有一个美好的明天。
Copyright © 2002-2015 版权所有 学校地址:北京市海淀区西三旗建材城中路29号北大青鸟 招生热线:010-82011433/32 京公网安备110102004704 京ICP备05043413号 京公网安备110102004704 |