微软首次向外界展示了其下一代操作系统Windows8的用户界面,评论圈的大部分反应是积极的,然而程序员们却感到忧心忡忡:因为他们以前的经验在Windows8的开发中将无足轻重,因为新技术的诞生。
Windows 8中提供了新的API去开发全屏浏览、增强临境感的基于HTML5和JavaScript的应用程序。
过去几年中,程序员们花了无数精力学习Win32、COM、MFC、ATL、Visual Basic 6、.NET、WinForms、Silverlight、WPF,去开发Windows桌面应用程序,除了VB6外,大部分技术今天的Windows仍然或多或少还支持。
但当听到Windows 8将用HTML5和JavaScript开发应用后,Windows开发者显然会感到困惑和不安,这意味着他们过去的经验全被抛弃了。
所有的程序员,加油啊,学习HTML5与javascript以备未来。
HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出,於2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案已公布,预计将在2010年9月正式向公众推荐。HTML 5有两大特点:首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。其次,追加了本地数据库等Web应用的功能。HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。
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
7 不支持 如果安装了Google Chrome Frame,支持HTML5
Internet Explorer
8 不支持 如果安装了Google Chrome Frame,支持HTML5
Internet Explorer
9 支持(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)
Safari 支持(mp4) 早期版本(iOS 1,2)不支持HTML5视频
(iPad, iOS 3.2)
Safari 支持(mp4)
Android Android 2.1, 2.2 支持(mp4)
Android 2.3 支持(mp4)
ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件。
mp4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
<audio> 标记
定义和用法
<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给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。 。标签列表
按字母顺序排列的标签列表
?4: 指示在 HTML 4.01 中定义了该元素
?5: 指示在 HTML 5 中定义了该元素
标签 描述 4 5
<!--...--> 定义注释。 4 5
<!DOCTYPE> 定义文档类型。 4 5
<a> 定义超链接。 4 5
<abbr> 定义缩写。 4 5
<acronym> HTML 5 中不支持。定义首字母缩写。 4
<address> 定义地址元素。 4 5
<applet> HTML 5 中不支持。定义 applet。 4
<area> 定义图像映射中的区域。 4 5
<article> 定义 article。 5
<aside> 定义页面内容之外的内容。 5
<audio> 定义声音内容。 5
<b> 定义粗体文本。 4 5
<base> 定义页面中所有链接的基准 URL。 4 5
<basefont> HTML 5 中不支持。请使用 CSS 代替。 4
<bdo> 定义文本显示的方向。 4 5
<big> HTML 5 中不支持。定义大号文本。 4
<blockquote> 定义长的引用。 4 5
<body> 定义 body 元素。 4 5
<br> 插入换行符。 4 5
<button> 定义按钮。 4 5
<canvas> 定义图形。 5
<caption> 定义表格标题。 4 5
<center> HTML 5 中不支持。定义居中的文本。 4
<cite> 定义引用。 4 5
<code> 定义计算机代码文本。 4 5
<col> 定义表格列的属性。 4 5
<colgroup> 定义表格列的分组。 4 5
<command> 定义命令按钮。 5
<datalist> 定义下拉列表。 5
<dd> 定义定义的描述。 4 5
<del> 定义删除文本。 4 5
<details> 定义元素的细节。 5
<dfn> 定义定义项目。 4 5
<dir> HTML 5 中不支持。定义目录列表。 4
<div> 定义文档中的一个部分。 4 5
<dl> 定义定义列表。 4 5
<dt> 定义定义的项目。 4 5
<em> 定义强调文本。 4 5
<embed> 定义外部交互内容或插件。 5
<fieldset> 定义 fieldset。 4 5
<figcaption> 定义 figure 元素的标题。 5
<figure> 定义媒介内容的分组,以及它们的标题。 5
<font> HTML 5 中不支持。 4
<footer> 定义 section 或 page 的页脚。 5
<form> 定义表单。 4 5
<frame> HTML 5 中不支持。定义子窗口(框架)。 4
<frameset> HTML 5 中不支持。定义框架的集。 4
<h1> to <h6> 定义标题 1 到标题 6。 4 5
<head> 定义关于文档的信息。 4 5
<header> 定义 section 或 page 的页眉。 5
<hgroup> 定义有关文档中的 section 的信息。 5
<hr> 定义水平线。 4 5
<html> 定义 html 文档。 4 5
<i> 定义斜体文本。 4 5
<iframe> 定义行内的子窗口(框架)。 4 5
<img> 定义图像。 4 5
<input> 定义输入域。 4 5
<ins> 定义插入文本。 4 5
<keygen> 定义生成密钥。 5
<isindex> HTML 5 中不支持。定义单行的输入域。 4
<kbd> 定义键盘文本。 4 5
<label> 定义表单控件的标注。 4 5
<legend> 定义 fieldset 中的标题。 4 5
<li> 定义列表的项目。 4 5
<link> 定义资源引用。 4 5
<map> 定义图像映射。 4 5
<mark> 定义有记号的文本。 5
<menu> 定义菜单列表。 4 5
<meta> 定义元信息。 4 5
<meter> 定义预定义范围内的度量。 5
<nav> 定义导航链接。 5
<noframes> HTML 5 中不支持。定义 noframe 部分。 4
<noscript> 定义 noscript 部分。 4 5
<object> 定义嵌入对象。 4 5
<ol> 定义有序列表。 4 5
<optgroup> 定义选项组。 4 5
<option> 定义下拉列表中的选项。 4 5
<output> 定义输出的一些类型。 5
<p> 定义段落。 4 5
<param> 为对象定义参数。 4 5
<pre> 定义预格式化文本。 4 5
<progress> 定义任何类型的任务的进度。 5
<q> 定义短的引用。 4 5
<rp> 定义若浏览器不支持 ruby 元素显示的内容。 5
<rt> 定义 ruby 注释的解释。 5
<ruby> 定义 ruby 注释。 5
<s> HTML 5 中不支持。定义加删除线的文本。 4
<samp> 定义样本计算机代码。 4 5
<script> 定义脚本。 4 5
<section> 定义 section。 5
<select> 定义可选列表。 4 5
<small> 定义小号文本。 4 5
<source> 定义媒介源。 5
<span> 定义文档中的 section。 4 5
<strike> HTML 5 中不支持。定义加删除线的文本。 4
<strong> 定义强调文本。 4 5
<style> 定义样式定义。 4 5
<sub> 定义下标文本。 4 5
<summary> 定义 details 元素的标题。 5
<sup> 定义上标文本。 4 5
<table> 定义表格。 4 5
<tbody> 定义表格的主体。 4 5
<td> 定义表格单元。 4 5
<textarea> 定义 textarea。 4 5
<tfoot> 定义表格的脚注。 4 5
<th> 定义表头。 4 5
<thead> 定义表头。 4 5
<time> 定义日期/时间。 5
<title> 定义文档的标题。 4 5
<tr> 定义表格行。 4 5
<tt> HTML 5 中不支持。定义打字机文本。 4
<u> HTML 5 中不支持。定义下划线文本。 4
<ul> 定义无序列表。 4 5
<var> 定义变量。 4 5
<video> 定义视频。 5
<xmp> HTML 5 中不支持。定义预格式文本。 4
应用前景
HTML 最近的一次升级是1999年12月发布的 HTML 4.01。自那以后,发生了很多事。最初的浏览器战争已经结束,Netscape 灰飞烟灭,IE5 作为赢家后来又发展到 IE6, IE7,IE8到IE9。Mozilla Firefox 从 Netscape 的死灰中诞生,并跃居第二位。苹果和 Google 各自推出自己的浏览器,而小家碧玉的 Opera 仍然嘤嘤嗡嗡地活着,并以推动 Web 标准为己命。我们甚至在手机和游戏机上有了真正的 Web 体验,感谢 Opera,iPhone 以及 Google 已经推出的 Android。
然而这一切,仅仅让 Web 标准运动变得更加混乱,HTML 5 和其它标准被束之高阁,结果,HTML 5 一直以来都是以草案的面目示人。
于是,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web 超文本应用技术工作组 - WHATWG) 的组织,他们将重新拣起 HTML 5。这个组织独立于 W3C,成员来自 Mozilla, KHTML/Webkit 项目组,Google,Apple,Opera 以及微软。尽管 HTML 5 草案不会在短期内获得认可,但 HTML 5 总算得以延续。
Windows8开发将全面采用HTML5.
在微软宣布Windows 8的“用户界面将基于HTML5和JavaScript基础"之后,毫不奇怪Visual Studio 2010将提供更多的HTML5,JavaScript和CSS3支持:最多最新的基于W3C的智能感知、HTML5和CSS3验证,增强地理位置服务和DOM存储智能感知。
去年12月推出的Visual Studio 2010 SP1的beta测试版提供了HTML5智能感知的初级支持以及有限的CSS3验证。微软Web平台和工具团队已经宣布了为Visual Studio的SP1提供免费Web标准更新,附加VS 2010和Visual Web Developer 2010 Express,提供HTML5 智能感知和W3C验证最新规范的更新,更新的JavaScript智能感知支持地理定位和DOM存储,并全面支持CSS3感知和与W3C规范同步验证。更新是免费的,可以从Visual Studio库下载。
HTML5的智能感知包括以下功能的支持:
WAI-ARIA - 一个容易使用标准
Microdata - 语义标记语言
修复了视频和音频标签
如电子邮件,URL,日期的新的输入类型
拖放
Schema.org
更新带来了许多功能,包括CSS3多列,边界半径,动画,过渡和转换的智能感知。 Scott Hanselman的博客文章包含支持功能的完整列表。
关于JavaScript中,更新了的地理定位,DOM存储,本地和会话存储和其他网络的API 感知和验证。 一个微软博客文章提请人们注意 验证将不能很好地工作在VS 2010 的事实 :“由于我们没有进行任何的Visual Studio运行代码的变化,我们无法改变CSS,HTML和JavaScript分析和验证的方式。这意味着,即使我们将继续为您带来的W3C标准的变化更新,我们在Visual Studio 2010中也无法提供100%的支持。“
团队计划定期发布Web平台和工具更新,并预计微软将加快提供市场上最好的HTML5工具的过程,因为它现在很清楚,他们是坚定地致力于网络技术,宣布在未来Windows会穿上HTML5外衣。