Web Hypertext Application Technology Working Group 改进 HTML 的方法 级别: 初级 Edd Dumbill, 主席, XTech Conference 2005 年 12 月 29 日 HTML 不是一种很好的制作网页的语言。但却是形成 Web 的一种很好的语言。 HTML 易学易用，再加上浏览器的 查看源代码 功能，引发了 Web 令人瞠目结舌的迅速普及。万维网联盟（W3C）对 HTML 标准化的参与，保证了所有的 Web 浏览器都或多或少地实现了同样的方言。CSS 的出现，作为最佳实践的基于标准的 Web 设计的普及也改变了 HTML 的混乱状态，同时为用户和开发人员带来了更好的 Web 体验。 您可能已经了解这些。结果是 Web 可能已经对您的生活或生意带来正面的影响。但事实仍然是 HTML 并不是一种很好的语言。比方说，为什么 HTML 要设置 H1 到 H6 这些标题？谁会使用包含六层的标题结构？为什么在这个 3D 图形加速卡和复杂用户界面的时代，Web 页面却要让用户用笨拙的文本框和单选按钮来输入？ 因此毫不奇怪，各种不同的组织再次迫切地要求改进 HTML，使 Web 发布和 Web 应用程序使用现代用户界面提供的更多技术。这些人有谁呢？粗略地说可分为三类。首先是利用现有技术进行改造的那些人。这就是 Asynchronous JavaScript and XML (Ajax) 所宣扬的：使用 JavaScript 和浏览器 XMLHttpRequest 对象建立动态的用户界面。取得的效果是惊人的，但这不是进步的标准方式。 另外两类人关注未来的改进。W3C 根据各种供应商（不仅仅是桌面浏览器制造者）的需要，提出了 XHTML 2.0。XHTML 2.0 被看作是革命性的一步。相反，Web Hypertext Application Technology Working Group (WHATWG) 则提出了一套递增式的规范，改进 HTML 从而为浏览器增加了最迫切需要的功能。一些 WHATWG 特性已经在 Apple 的 Safari 浏览器和 Mozilla Firefox 1.5 中实现了。（关于 W3C 和 WHTAWG 的更多信息请参阅 参考资料。） 这两期文章将讨论 W3C 和 WHATWG 的工作。Ajax 已经在 developerWorks 的其他文章（请参阅 参考资料）中讨论过了。虽然还没有引起最初 HTML 引入 W3C 时所爆发的大规模的标准之争，但这两个组织对 HTML 走向何方并非总是一致的。我将解释和评论这两种方法。 WHATWG、HTML 5 和 Web Forms 2.0 就像其网页上所宣称的那样，WHATWG 是 “Web 浏览器生产厂商和一些相关团体形成的一个松散的、非正式的协作组织，这些团体希望发展一些新的技术，从而开发人员可以在互联网上编写并部署应用。这里有两点特别值得关注：WHATWG 的主要参与者是浏览器（Mozilla、Opera）制造商，他们改进的目标是创建 Web 应用程序。 WHATWG 的标志性规范的代号是 HTML5，但更为人所知的名称是 Web Applications 1.0（请参阅 参考资料）。HTML5 的目标是保持和当前 HTML 标准 HTML 4.01 以及 HTML 的 XML 版本 XHTML 1.0 向后兼容。该规范继续了 W3C HTML 所致力的 HTML 和 XHTML 的融合，虽然它提出实现的方法可能不同。 除了 HTML5，Web Forms 2.0 规范（请参阅 参考资料）也寻求解决开发人员对当前 HTML 表单的不满之处。目前的表单省略了普通桌面应用程序的很多基本特性，比如验证和更丰富的小部件。 那么 HTML5 中有什么呢？一句话，很多。Web Applications 1.0 规范仍然在演化之中，提到的有些特性比另一些开发得更完善。下面是对这些新特性的简要说明： * 新的布局元素，包括日历控件、地址卡、灵活的数据网格、标尺和进度条、拖放、菜单 * 对文档对象模型（DOM）的编程扩展，包括服务器发送的 DOM 事件 * 事实标准 XMLHttpRequest 对象的正式化，它是 Ajax 通信的核心 * 基于 canvas 元素的动态位图图像 可以看到其中很多源自目前 Web 上用 JavaScript 一次性实现的特性。事实上，最近 Ajax 工具箱的流行已经引起了标尺、日历等控件的泛滥。
画布 HTML5 特性（即 Web 浏览器的一部分）的传统实现目前还仅限于上述少数技术。其中最知名的是 canvas 元素。Firefox 1.5 和 Apple 的 Safari 浏览器也实现了 canvas。 虽然 W3C 的 Scalable Vector Graphics (SVG) 语言已经提供了在浏览器中显示图形的一种方式，但 canvas 采用了不同的方法。不是像 SVG 那样实现一种声明性文档，它提供了一个空白面供 JavaScript 在上面绘图。这种命令式的绘图模型更类似于 OpenGL 风格的绘制，而不是声明性的 Web。 图 1 显示了一个简单的 canvas 示例的截屏图。（请参阅 参考资料，可用 Apple 的 Safari 浏览器或 Firefox 1.5 的预览版来查看。）当用户把鼠标移到该图形上时，图形慢慢地放大。这个例子表明，实现用户界面需要的所有成分 ——绘制、用户输入事件和定时器 —— 都已经就位。 图 1. 交互式画布示例的截屏 通过实现一个简单的 3D 迷宫，canvas 应用程序已经离最明显的目标（游戏！）只有一步之遥了，如 图 2 所示。（实际的迷宫请参阅 参考资料。） 图 2. 简单的迷宫游戏 为了了解如何对 canvas 编程，请看一些简单的代码。清单 1 显示了一个很容易理解的例子，它的结果如 图 3 所示。 清单 1. 简单的 canvas 例子 HTML: <html> <head> <title>Canvas demo</title> <script type="text/javascript"> function draw () { var canvas = document.getElementById ('hello'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect (25, 25, 50, 50); } } </script> <style type="text/css"> canvas { border: 2px solid red; } </style> </head> <body onload="draw ();"> <canvas id="hello" width="100" height="100"></canvas> </body> </html> 图 3. 清单 1 的结果 因为 canvas 没有提供任何声明性语义，很可能更多地用于用户界面实现领域而不是其他方面。canvas 令人感兴趣的一点是作为新的浏览器界面元素和特性的原型基础。最好的例子是 Antoine Quint 使用 canvas 部分实现了 SVG（请参阅 ）。使用 Quint 的方法，要呈现内嵌 SVG 的 HTML 文件，可以增加两行代码导入其 JavaScript SVG 呈现引擎。图 4 显示了使用该方法呈现的类似的老虎图像。 图 4. 使用 JavaScript 和 canvas 元素呈现的 SVG 老虎图像 时间将证明 canvas 是否会成为主流的 Web 设置。它的功能和 Java applet 有些类似，但是其 JavaScript 接口更容易使用，也更容易与其他浏览器元素交互。
Web Forms 2.0 WHATWG 表单规范的版本号表明它的目标是以 HTML4 中的表单规范为基础。与 Web Applications (HTML5) 规范不同，这是个成熟的规范。Web Forms 2.0 的范围也更狭窄，仅仅着眼于改进浏览器中提供的表单控件。 这次对表单的修订增加了什么呢？其中包括： 验证结构允许浏览器在提交表单前做更多的检查。新的属性，包括 required、min 和 max。 验证的 DOM 支持，为表单元素增加了 validity 属性和新的 invalid 事件。 对表单元素自动完成的控制，允许文档作者指明是否让浏览器记住字段值并自动填充。预定义的值可通过 list 属性传递。 autofocus 属性指定加载文档时哪一个表单元素拥有输入焦点。 inputmode 属性允许对存放文本的表单元素提示适当的语言输入模式。 文件上传控制的改进，可以指定文件类型，限制文件大小。 模板化表单元素的循环。 新的输入控件包括：datetime、number、range、email 和 url。增加了限制输入值的模式（pattern）。 Web Forms 规范比 HTML5 更加一致，已经出现了一些实现： Opera 9 的 beta 版包括 Web Forms 2.0 支持 开放源码 Web Forms 项目为 Internet Explorer 提供了 DHTML+Behaviors 实现 W3C 为下一代表单提供的答案是 XForms（请参阅 参考资料）。 XForms 和 Web Forms 2.0 不同，根据传递的 XML 文档开发了一种新的浏览器-服务器交互模型。相反，Web Forms 2.0 是对现有表单模型的改良，目的是使现在的浏览器表单更好用。这两种规范针对不同的需求，虽然存在明显的共同之处。正如 Web Forms 规范所指出的： 本规范尝试增加 XForms 的一些功能，并尽量减少对现有的、被广泛实现的表单模型的影响。如果需要，向后兼容、易于编辑、易于实现要优先于理论的纯粹性。
其他实现 canvas 是浏览器实现的主要 WHATWG 特性。HTML5 的其他部分仍然处在初级阶段，可能永远不会完全实现。 但是，Web Applications 和 Web Forms 规范可能显示出最初没有预料到的重要性。近几个月中，出现了一些功能全面的项目，用于为 Web 应用程序开发用户界面工具箱。这些实现使用 HTML 再加上 JavaScript 技术或者 Flash。其中多数可能已经认识到 “重新发明轮子” 是毫无意义的，开始考虑使 WHATWG 规范标准化，比方说其正式实现。
结束语 由于明显的需求和规范的完整性，Web Forms 2.0 规范很可能被实现并最终成为认可的标准。事实上 Web Forms 2.0 已经提交给 W3C 请求评论，就像是 WHATWG 合作者的资产负债表和构造块。 但是，仅仅根据 WHATWG 规范很难描绘 HTML 的未来。一些部分仅仅描述了当前的创新，如 XMLHttpRequest 和 canvas，其他部分似乎还很模糊，没有引起实现者的兴趣。此外，HTML5 的主要动机是桌面的、以应用程序为中心的应用。非 PC 设备上还没有大量使用 HTML，这也是需要发展的一个方向。 随着基于 Ajax 的浏览器界面工具箱的兴起，HTML5 中某些更深刻的想法可能已经过时了。既然有可扩展的工具箱使用，开发人员何必在文档中使用有限的一组控件呢？更丰富的 Web 界面更有可能通过市场而不是委员会而实现标准化。 我高兴地看到已经通常实现但还没有标准化的技术如 canvas 和 XMLHttpRequest 的进展，希望能够改进这些重要特性的互操作性。要使浏览器技术沿着自己的方向发展，HTML5 必须更加清晰，最好分为三个规范，分别描述目前、近期 和设想 的特性。
参考资料 学习 您可以参阅本文在 developerWorks 全球站点上的 英文原文。 请访问 Web Hypertext Application Technology Working Group (WHATWG)，进一步了解 Web Applications 1.0 (HTML5) 和 Web Forms 2.0。这些规范包含本文所述特性的全部细节。 Ajax 到底是什么和不是什么，请阅读 Wikipedia entry。 进一步了解 异步 JavaScript 和 XML(Ajax)。developerWorks 提供了关于这种流行技术的大量文章，它使用 JavaScript 和浏览器 XMLHttpRequest 对象创建动态用户界面。 请把 World Wide Web Consortium (W3C) 站点 放入收藏夹，这是很多广泛使用的标准的主页，包括本文所提到的技术： [o] XForms [o] W3C Team Comment on Web Forms 2.0 Submission [o] HTML/XHTML [o] Scalable Vector Graphics (SVG) 在 Mozilla 开发人员站点 上了解如何使用 canvas 元素。 查看图 1 所示的 简单 canvas 示例。需要 Apple 的 Safari 浏览器或者 Firefox 1.5 的预览版。 这个 简单的 3D 迷宫 使 canvas 更接近游戏世界。 看一看 Antoine Quint 如何 使用 canvas 部分实现 SVG。 来自 SourceForge 的开放源码 Web Forms 项目 为 Internet Explorer 提供了 DHTML+Behaviors 实现。 获得产品和技术 下载 Opera 浏览器。Opera 9 的 beta 版包括 Web Forms 2.0 支持。