HTML5: 历史、现状及未来



               田永斌
            2010-03-10
内容 纲要


HTML5的故事
 HTML4.01
 XHTML1
 XHTML2与HTML5
HTML5新特性及 浏览器支持
 各特性及支持情况
HTML5:未来的未来
 超前的提案
 我们可以做些什么
第一部分 HTML5的故事
HTML5的故事

       HTML4.01遗留的缺陷
          结构松散,缺乏书写规范,影响数据交换
          无法处理非常规内容
          对显示设备没有足够的支持
       XML能够解决上述问题
          但我们不能放弃那些HTML文档
       XHTML是XML与HTML的 桥梁
          用XML的特性,定义和HTML4几乎相同的标记
          语言


参考文献:《HTML&XHTML 权威指南》
HTML5的故事



事情似乎朝着XHTML,美好地 发展…
HTML5的故事


        XHTML1.0 strict DTD
           太严格了,大部分作者使用了过渡版DTD
        XHTML1.1
           基于XHTML1.0 strict DTD
           变本加厉的严格
              eg. <a>不允许有name
           引入与网页作者无关的新元素
        XHTML2
           基于XHTML1.1……

参考文献:《HTML&XHTML 权威指南》
HTML5的故事

       2009年底,W3C解散了XHTML2工作 组




新闻来源: W3C News Archive: 2009 W3C
HTML5的故事
但Web技 术还要发展……
 RIA
 视频播放
 离线存储
 更语义化的网页代码
 ……
HTML5的故事

            是否意味着XHTML的 彻底消亡?
                XHTML可以认为只是一种句法
                    使用XML的特性,书写HTML

                XHTML是HTML5建议的书写方式
                    HTML5向前兼容
                    但建议使用XHTML的句法

                可以认为:HTML5 = XHTML5




参考: Misunderstanding markup
第二部分 HTML5新特性及 浏览器支持
HTML5新特性及 浏览器支持

语义化结构代码
HTML5新特性及 浏览器支持

<video>
  Demo
  向前兼容的代码
  视频编码问题
HTML5新特性及 浏览器支持

<canvas>
  绘制二维图形
  Demo
  图片(甚至视频)的像素级处理
  Demo
  目前应用
    微博旋转图片
HTML5新特性及 浏览器支持

contenteditable attribute
  将网页变为可编辑状态
  原为IE独有
  目前应用
    在线编辑
HTML5新特性及 浏览器支持

Drag & drop API
  拖拽的浏览器默认支持
  Demo
HTML5新特性及 浏览器支持

Geolocation
  浏览器的用户地理位置接口
  Demo
HTML5新特性及 浏览器支持

Offline Web Application
  缓存网页,以便脱机浏览和运行
  Demo
    <html manifest="app.manifest">
  可与本地存储相结合,开发离线应用
HTML5新特性及 浏览器支持

Local Storage
  客户端本地存储
    类似于cookie
  两种方式
    Key/value
       IE8, Firefox, Chrome, Safari, Opera
       Demo
    SQL
       Chrome, Safari, Opera
       Demo
HTML5新特性及 浏览器支持

Web Workers
 JavaScript多线程应用,可并发执行
 大规模脚本不会导致浏览器假死
 Demo
   多线程提高绘图速度
 Demo
   浏览器不假死
HTML5新特性及 浏览器支持

And more…
 Spec. http://whatwg.org/html5
第三部分 HTML5未来的未来
HTML5:未来的未来

          WHAT工作 组仍在提提案
             WHAT工作组是浏览器厂商和一些相关牛人团
             体组成的工作组,着力于HTML5规范开发
             超前的提案
                  <iframe sandbox=“sandbox”></iframe>
                  <device type=“media” />
                  ……
             HTML无版本化
                  HTML5的文档声明:<!DOCTYPE html>




参考: WHATWG Blog
HTML5:未来的未来

我们能做些什么
 IE的问题
  MIX2010大会,IE产品经理将发表演讲
    Future of Vector Graphics for the Web
  IE team官方博客连续发表HTML5相关文章
    Working with the HTML5 Community
    W3C HTML Working Group Publishes New Drafts
    W3C SVG Working Group Update for January 2010
  有预言
    IE9即将现身 支持HTML5/CSS3/SVG标准 新浪科技
HTML5:未来的未来

我们能做些什么
 但IE6的问题……
 开发方式
  使用IE6都支持的特性
    contenteditable
  渐进增强
 做好技术储备
参考 资料

Reference
  A List Apart: Articles: A Preview of HTML 5
  HTML5 (including next generation additions still in
  development)
  Comparison of layout engines (Cascading Style
  Sheets) - Wikipedia
  XHTML与HTML常 见问答
  Comparison of layout engines (HTML5) - Wikipedia
  Frequently Asked Questions (FAQ) about the future
  of XHTML
  XHTML 2 Dies a Lonely Death Makes Room For
  HTML 5 - Webmonkey
参考文献

Reference
  XHTML 1.0: The Extensible HyperText Markup
  Language (Second Edition)
  HTML 5 differences from HTML 4
  How HTML 5 Is Already Changing the Web -
  Webmonkey
  HTML5难以越过矛盾的坎儿
  When Can I Use updates
  Dive into HTML5
欢迎讨论!



           田永斌
        2010-03-10

HTML5 历史、现状及未来