微软首次向外界展示了其下一代操作系统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外衣。

 

posted on 2011-06-14 15:32  Yincheng  阅读(353)  评论(0编辑  收藏  举报