:::: 菜单 ::::
2009年06月21日    |       3 comments

html5 富互联网明日之星

HTML 5 是下一代超文本标记语言版本，HTML 自1997年发布 HTML 4 以来，其开发一直处于停顿状态，而近几年 Web 飞速发展，以致于HTML4已经无法适应现在越来越”富”的Web应用。HTML 5不仅解决HTML 4 Web 应用功能上的欠缺，同时旨在提高 HTML 的交互能力，支持目前多样而复杂的 Web 内容。

令人振奋的功能：

1.直接语意描述内容的新标签
这里看IBM的两个例子：
当今典型博客的源代码可能是这样：

  1. <html>
  2.   <head>
  3.     <title>Mokka mit Schlag </title>
  4.  </head>
  5. <body>
  6. <div id="page">
  7.   <div id="header">
  8.     <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  9.   </div>
  10.   <div id="container">
  11.     <div id="center" class="column">               
  12.       <div class="post" id="post-1000572">
  13.         <h2><a href=
  14.       "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
  15.       Spring Comes (and Goes) in Sussex County</a></h2>
  16.         
  17.         <div class="entry">
  18.           <p>Yesterday I joined the Brooklyn Bird Club for our
  19.           annual trip to Western New Jersey, specifically Hyper
  20.           Humus, a relatively recently discovered hot spot. It
  21.           started out as a nice winter morning when we arrived
  22.           at the site at 7:30 A.M., progressed to Spring around
  23.           10:00 A.M., and reached early summer by 10:15. </p>
  24.         </div>
  25.       </div>
  26.  
  27.  
  28.       <div class="post" id="post-1000571">
  29.         <h2><a href=
  30.           "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
  31.            But does it count for your life list?</a></h2>
  32.         
  33.         <div class="entry">
  34.           <p>Seems you can now go <a
  35.           href="http://www.wired.com/science/discoveries/news/
  36.           2007/04/cone_sf">bird watching via the Internet</a>. I
  37.           haven't been able to test it out yet (20 user
  38.           limit apparently) but this is certainly cool.
  39.           Personally, I can't imagine it replacing
  40.           actually being out in the field by any small amount.
  41.           On the other hand, I've always found it quite
  42.           sad to meet senior birders who are no longer able to
  43.           hold binoculars steady or get to the park. I can
  44.           imagine this might be of some interest to them. At
  45.           least one elderly birder did a big year on TV, after
  46.           he could no longer get out so much. This certainly
  47.           tops that.</p>
  48.         </div>
  49.       </div>
  50.  
  51.       </div>
  52.     
  53.     <div class="navigation">
  54.       <div class="alignleft">
  55.          <a href="/blog/page/2/">&laquo; Previous Entries</a>
  56.        </div>
  57.       <div class="alignright"></div>
  58.     </div>
  59.   </div>
  60.  
  61.   <div id="right" class="column">
  62.     <ul id="sidebar">
  63.       <li><h2>Info</h2>
  64.       <ul>
  65.         <li><a href="/blog/comment-policy/">Comment Policy</a></li>
  66.         <li><a href="/blog/todo-list/">Todo List</a></li>
  67.       </ul></li>
  68.       <li><h2>Archives</h2>
  69.         <ul>
  70.           <li><a href='/blog/2007/04/'>April 2007</a></li>
  71.           <li><a href='/blog/2007/03/'>March 2007</a></li>
  72.           <li><a href='/blog/2007/02/'>February 2007</a></li>
  73.           <li><a href='/blog/2007/01/'>January 2007</a></li>
  74.         </ul>
  75.       </li>
  76.     </ul>
  77.   </div>
  78.   <div id="footer">
  79.     <p>Copyright 2007 Elliotte Rusty Harold</p>
  80.   </div>
  81. </div>
  82.  
  83. </body>
  84. </html>

适当的缩进，这依然是一个相当混乱的大规模嵌套的div集合。在HTML 5中，你可以用具有直接语义的元素来替代，如下例：

  1. <html>
  2.  <head>
  3.     <title>Mokka mit Schlag </title>
  4.  </head>
  5. <body>
  6.   <header>
  7.     <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  8.   </header>
  9.   <section>               
  10.       <article>
  11.         <h2><a href=
  12.         "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
  13.          Spring Comes (and Goes) in Sussex County</a></h2>
  14.         
  15.         <p>Yesterday I joined the Brooklyn Bird Club for our
  16.         annual trip to Western New Jersey, specifically Hyper
  17.         Humus, a relatively recently discovered hot spot. It
  18.         started out as a nice winter morning when we arrived at
  19.         the site at 7:30 A.M., progressed to Spring around 10:00
  20.         A.M., and reached early summer by 10:15. </p>
  21.       </article>
  22.  
  23.  
  24.       <article>
  25.         <h2><a href=
  26.           "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
  27.           But does it count for your life list?</a></h2>
  28.         
  29.           <p>Seems you can now go <a
  30.           href="http://www.wired.com/science/discoveries/news/
  31.           2007/04/cone_sf">bird watching via the Internet</a>. I
  32.           haven't been able to test it out yet (20 user
  33.           limit apparently) but this is certainly cool.
  34.           Personally, I can't imagine it replacing
  35.           actually being out in the field by any small amount.
  36.           On the other hand, I've always found it quite
  37.           sad to meet senior birders who are no longer able to
  38.           hold binoculars steady or get to the park. I can
  39.           imagine this might be of some interest to them. At
  40.           least one elderly birder did a big year on TV, after
  41.           he could no longer get out so much. This certainly
  42.           tops that.</p>
  43.       </article>   
  44.     <nav>
  45.       <a href="/blog/page/2/">&laquo; Previous Entries</a>
  46.     </nav>
  47.   </section>
  48.  
  49.   <nav>
  50.     <ul>
  51.       <li><h2>Info</h2>
  52.       <ul>
  53.         <li><a href="/blog/comment-policy/">Comment Policy</a></li>
  54.         <li><a href="/blog/todo-list/">Todo List</a></li>
  55.       </ul></li>
  56.       <li><h2>Archives</h2>
  57.         <ul>
  58.           <li><a href='/blog/2007/04/'>April 2007</a></li>
  59.           <li><a href='/blog/2007/03/'>March 2007</a></li>
  60.           <li><a href='/blog/2007/02/'>February 2007</a></li>
  61.           <li><a href='/blog/2007/01/'>January 2007</a></li>
  62.         </ul>
  63.       </li>
  64.     </ul>
  65.   </nav>
  66.   <footer>
  67.     <p>Copyright 2007 Elliotte Rusty Harold</p>
  68.   </footer>
  69.  
  70. </body>
  71. </html>

这样，浏览器就知道一个网页的各个部分各代表什么，比如 部分是导航，而 部分是主要内容 。除了更漂亮的 代码与语义标签，这种改变还带来更多好处，比如，搜索引擎可以更准确地知道一个网页的哪部分内容更重要，也将更适用于在手机等使用的非标准浏览器上表现。

2. 改进的 Web 表单处理

HTML 5 推出 Web Forms 2.0，为开发提供许多新选项和新功能，以更简单更有效地处理表单的输入与发布。Web Form 2.0 最令人兴奋的功能是输入验证。目前，我们需要通过 JavaScript 或服务器端的逻辑，实现同样的功能。
比如有下面这样一个表单:
表单例子
在 HTML4 我们需要这样写代码，然后使用 JavaScript 或服务器端的脚本进行验证：
html4里写富表单
而 HTML5 中的 required 与 email 属性可以直接实现验证，如下：
html5里写富表单

3. 为 Web 开发提供 API

HTML 5 将提供多个 API，可以实现今天许多插件所能实现的功能。
音频和视频播放支持：
如音频和 视频标签可以让开发者不借助第三方工具直接播放 Web 视频和音频，这意味着用户可以扔掉很多插件，从而使浏览器更干净：

  1. <video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
  2.   <a href="video.ogv">下载这个视频</a>
  3. </video>
  1. <audio src="music.oga" controls>
  2.   <a href="music.oga">下载这首歌</a>
  3. </audio>

目前，Opera浏览器已经支持video标签。

矢量图形支持：
<canvas>标签将允许直接在上面用脚本绘图。
人更容易从图片获得信息，如，下面的信息通过表格和圆饼图两种方式显示，效果明显不一样：
矢量图形支持
然而以往要实现这种效果，只能使用静态图片，无法对图片进行调整。使用 <canvas> 标签，你可以实时修改参数对图形进行修改，比如，根据用户的投票，实时生成圆饼图。
HTML 5 中，诸如 Canvas 一类的 2D 绘图技术，一直为 Apple, Google, 以及 Mozilla 这类公司所重视（尽管微软也对 HTML 5 的部分功能表示赞赏，但他们至今也不支持 Canvas）

4. 网页部分内容可编辑


HTML 5 将支持用户的交互，contenteditable属性允许你设定网页的哪一部分可以编辑，在类似 Wiki 的全民参与站点，这非常实用。

5. 本地存储


本地存储可以让用户在离线状态下继续使用 Web。

HTML 5 的部分功能相关支持：


经过5年的工作，HTML 5 细则已于2008年发布，其中的部分细则已经在某些浏览器得以实现，然而 HTML 5 的全部功能仍然不会在近几年内完成。
在 Google I/O 的开发者大会，Google 工程副总裁 Vic Gundotra 表示了他们对下一代 HTML 语言，HTML 5 的承诺。尽管 HTML 5 还处在草案阶段，W3C 的委员会还在针对这一草案进行漫长的讨论，然而 HTML 5 已经被广泛实现，或者作为一种实验性的演示，或者已经成为某些 Web 程序的核心。

Mozilla Firefox 项目技术主管 Vlad Vukicevic 说， HTML 5 支持视频，而 Firefox 3.5 也刚刚新加了视频支持，Google Chrome 也支持视频标签，微软在 Internet Explorer 8 中支持某些 HTML 5 功能，如本地存储，AJAX 导航，以及多个 DOM 原型。
Opera 公司的 Web 宣讲人 Molly E. Holzschlag 表示， Opera 支持 Canvas，并计划支持视频。Apple 也在其 Safari 浏览器支持视频和音频标签，以及 Canvas 技术（Canvas 就是苹果发明的）。

HTML5会打败Flash、Silverlight等RIA？


HTML 5 细则的合作设计者 Ian Hickson 表示，HTML 5 的目标是将 Web 从那些非开放性富插件中解放出来，他们是独立的提供商，不适合开放的 Web。Hickson 说，使用专门公司的产品对开发的 Web 是一种风险，如果他们停止开发，或开始收费将怎么办？Hickson 补充道，象以前的 Windows 一样，如果我们的主要开发平台控制在单一的供应商手中会是很可怕的。

Firefox 主管 Vukicevic 说，Mozilla 希望保持开放，并保证视频一类的技术不是掌握在某些公司手中，不过 HTML 5 和 Canvas 最终是否能真正取代 Flash,Silverlight 以及 JavaFX，还取决于开发者。Vukicevic 认为，IE8 不支持 HTML 5 的一些功能，对开发者来说是一个问题，鉴于 IE 浏览器到市场份额，开发者要么使用微软的 API 提供额外开发，要么使用 Flash 一类的技术。

插件的一面: 他们更好，而且已经实现了
尽管 Adobe, 微软 以及 SUN 都参与了 HTML 5 细则的制定，他们都表示自己的技术是必要的。HTML 5 仍是一个发展中的标准，可能需要5到10年才能最终完成，因此，现在做比较还为时过早。微软发言人表示，Silverlight 仍有必要存在，因为它包含了一些高级功能，如更好的编程模型， C#，3D 功能以及可以在浏览器之外运行的功能。
Adobe 的开发工具副总裁 Dave Story 表示，HTML 5 面临很多挑战，浏览器市场仍然很零散，浏览器之间的兼容问题非常严重，HTML 5 的时间线显示，最终 HTML 5 + CSS 3 可能要 10年的时间才能定稿，在这期间，Flash 会持续发展，并提供更好的用户体验。

SUN 副总裁，也是被号称为 Java 之父的 James Gosling 表示，JavaFX 在渲染，性能，表现方面比 HTML 5 要优秀得多。
分析师 Cote 表示， 目前这些富 Web 插件还没有眼下的威胁，要实现这些插件中的功能还要很多年，他希望即使 HTML 5 发布之后，这些插件技术仍能继续存在。Google 的 Fette 也同意，HTML 5 只是一个起始点，Google 一类的公司还会推出自己的技术，如向 Web 拖放图片的技术。

几家行业巨头将面临抉择
参与 HTML 5 的公司，大多要么是浏览器厂商，要么是富 Web 应用工具开发商，很少二者都是，微软除外，Almaer 说，微软也将因此进入两难境地，微软在 Silverlight 上花了很大力气，Silverlight 团队存在的意义是为浏览器提供增强，如果 HTML 5 轻易实现了，还要 Silverligth 做什么。

Google 也将不得不遇到某些抉择，比如，他们的 Youtube 使用 Flash 实现视频，HTML 5 对视频的支持将让他们重新考虑这个问题，他们需要在成本和效益方面艰难抉择。

对我这样一个开发者来说，html5实质上就是为适应当今的web2.0，将高层的技术转到更底层一步实现，使“富”的应用直接由浏览器支持。充其量是替代Ajax和一些非开放性插件。

但我不认为它会对Flash造成太大影响，Flash这个家族很有趣，做动画也用它，做网站也用它，桌面应用也用，还有基于浏览器插件的web应用等等。人家Adobe本来就是做影像的，HTML5再出色，总不至于能用它做动画吧？要有影响，也就是web应用和桌面应用这部分，再怎么说，Flash的初衷只是个做动画的。HTML5考虑让SWF能脱离FlashPlayer直接播放是不是更好呢？
搞清楚一点，Flash和HTML5将是互补关系，而不是敌对关系！

延伸阅读

3 Comments

  • ChengHuiyong Windows XP Firefox 3.5 |

    文章谈及了html5的规范，其实他是现在web开发这块的趋势，公司要人不会说你不会css他就要要你
    这对于更好的学习这些知识也非常有好处。顶一下

本文对您有用吗? 何不留下评论继续交流？