通過WHATWG看HTML 5的未來
HTML 不是一種很好的制作網(wǎng)頁的語言。但卻是形成 Web 的一種很好的語言。
HTML 易學(xué)易用，再加上瀏覽器的查看源代碼功能，引發(fā)了Web 令人瞠目結(jié)舌的迅速普及。萬維網(wǎng)聯(lián)盟（W3C）對 HTML 標(biāo)準(zhǔn)化的參與，保證了所有的 Web 瀏覽器都或多或少地實現(xiàn)了同樣的方言。CSS 的出現(xiàn)，作為最佳實踐的基于標(biāo)準(zhǔn)的 Web 設(shè)計的普及也改變了 HTML 的混亂狀態(tài)，同時為用戶和開發(fā)人員帶來了更好的 Web 體驗。
您可能已經(jīng)了解這些。結(jié)果是 Web 可能已經(jīng)對您的生活或生意帶來正面的影響。但事實仍然是 HTML 并不是一種很好的語言。比方說，為什么 HTML 要設(shè)置 H1 到 H6 這些標(biāo)題？誰會使用包含六層的標(biāo)題結(jié)構(gòu)？為什么在這個 3D 圖形加速卡和復(fù)雜用戶界面的時代，Web 頁面卻要讓用戶用笨拙的文本框和單選按鈕來輸入？
因此毫不奇怪，各種不同的組織再次迫切地要求改進(jìn) HTML，使 Web 發(fā)布和 Web 應(yīng)用程序使用現(xiàn)代用戶界面提供的更多技術(shù)。這些人有誰呢？粗略地說可分為三類。首先是利用現(xiàn)有技術(shù)進(jìn)行改造的那些人。這就是 Asynchronous JavaScript and XML (Ajax) 所宣揚(yáng)的：使用 JavaScript 和瀏覽器 XMLHttpRequest 對象建立動態(tài)的用戶界面。取得的效果是驚人的，但這不是進(jìn)步的標(biāo)準(zhǔn)方式。
另外兩類人關(guān)注未來的改進(jìn)。W3C 根據(jù)各種供應(yīng)商（不僅僅是桌面瀏覽器制造者）的需要，提出了 XHTML 2.0。XHTML 2.0 被看作是革命性的一步。相反，Web Hypertext Application Technology Working Group (WHATWG) 則提出了一套遞增式的規(guī)范，改進(jìn) HTML 從而為瀏覽器增加了最迫切需要的功能。一些 WHATWG 特性已經(jīng)在 Apple 的 Safari 瀏覽器和 Mozilla Firefox 1.5 中實現(xiàn)了。
這兩期文章將討論 W3C 和 WHATWG 的工作。Ajax 已經(jīng)在 developerWorks 的其他文章（請參閱 參考資料）中討論過了。雖然還沒有引起最初 HTML 引入 W3C 時所爆發(fā)的大規(guī)模的標(biāo)準(zhǔn)之爭，但這兩個組織對 HTML 走向何方并非總是一致的。我將解釋和評論這兩種方法。
就像其網(wǎng)頁上所宣稱的那樣，WHATWG 是 “Web 瀏覽器生產(chǎn)廠商和一些相關(guān)團(tuán)體形成的一個松散的、非正式的協(xié)作組織，這些團(tuán)體希望發(fā)展一些新的技術(shù)，從而開發(fā)人員可以在互聯(lián)網(wǎng)上編寫并部署應(yīng)用。這里有兩點特別值得關(guān)注：WHATWG 的主要參與者是瀏覽器（Mozilla、Opera）制造商，他們改進(jìn)的目標(biāo)是創(chuàng)建 Web 應(yīng)用程序。
WHATWG 的標(biāo)志性規(guī)范的代號是 HTML5，但更為人所知的名稱是 Web Applications 1.0。HTML5 的目標(biāo)是保持和當(dāng)前 HTML 標(biāo)準(zhǔn) HTML 4.01 以及 HTML 的 XML 版本 XHTML 1.0 向后兼容。該規(guī)范繼續(xù)了 W3C HTML 所致力的 HTML 和 XHTML 的融合，雖然它提出實現(xiàn)的方法可能不同。
除了 HTML5，Web Forms 2.0 規(guī)范，也尋求解決開發(fā)人員對當(dāng)前 HTML 表單的不滿之處。目前的表單省略了普通桌面應(yīng)用程序的很多基本特性，比如驗證和更豐富的小部件。
那么HTML5 中有什么呢？一句話，很多。Web Applications 1.0 規(guī)范仍然在演化之中，提到的有些特性比另一些開發(fā)得更完善。下面是對這些新特性的簡要說明：
1.新的布局元素，包括日歷控件、地址卡、靈活的數(shù)據(jù)網(wǎng)格、標(biāo)尺和進(jìn)度條、拖放、菜單
2.對文檔對象模型（DOM）的編程擴(kuò)展，包括服務(wù)器發(fā)送的 DOM 事件
3.事實標(biāo)準(zhǔn) XMLHttpRequest 對象的正式化，它是 Ajax 通信的核心
4.基于 canvas 元素的動態(tài)位圖圖像
可以看到其中很多源自目前 Web 上用 JavaScript 一次性實現(xiàn)的特性。事實上，最近 Ajax 工具箱的流行已經(jīng)引起了標(biāo)尺、日歷等控件的泛濫。
HTML5 特性（即 Web 瀏覽器的一部分）的傳統(tǒng)實現(xiàn)目前還僅限于上述少數(shù)技術(shù)。其中最知名的是 canvas 元素。Firefox 1.5 和 Apple 的 Safari 瀏覽器也實現(xiàn)了 canvas。
雖然 W3C 的 Scalable Vector Graphics (SVG) 語言已經(jīng)提供了在瀏覽器中顯示圖形的一種方式，但 canvas 采用了不同的方法。不是像 SVG 那樣實現(xiàn)一種聲明性文檔，它提供了一個空白面供 JavaScript 在上面繪圖。這種命令式的繪圖模型更類似于 OpenGL 風(fēng)格的繪制，而不是聲明性的 Web。
圖1顯示了一個簡單的 canvas 示例的截屏圖。當(dāng)用戶把鼠標(biāo)移到該圖形上時，圖形慢慢地放大。這個例子表明，實現(xiàn)用戶界面需要的所有成分 ——繪制、用戶輸入事件和定時器 —— 都已經(jīng)就位。
通過實現(xiàn)一個簡單的 3D 迷宮，canvas 應(yīng)用程序已經(jīng)離最明顯的目標(biāo)（游戲！）只有一步之遙了，如圖2所示。
為了了解如何對 canvas 編程，請看一些簡單的代碼。清單1 顯示了一個很容易理解的例子，它的結(jié)果如圖3所示。
- <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>
因為 canvas 沒有提供任何聲明性語義，很可能更多地用于用戶界面實現(xiàn)領(lǐng)域而不是其他方面。canvas 令人感興趣的一點是作為新的瀏覽器界面元素和特性的原型基礎(chǔ)。最好的例子是 Antoine Quint 使用 canvas 部分實現(xiàn)了 SVG。使用 Quint 的方法，要呈現(xiàn)內(nèi)嵌 SVG 的 HTML 文件，可以增加兩行代碼導(dǎo)入其 JavaScript SVG 呈現(xiàn)引擎。圖4 顯示了使用該方法呈現(xiàn)的類似的老虎圖像。
圖 4. 使用 JavaScript 和 canvas 元素呈現(xiàn)的 SVG 老虎圖像
時間將證明 canvas 是否會成為主流的 Web 設(shè)置。它的功能和 Java applet 有些類似，但是其 JavaScript 接口更容易使用，也更容易與其他瀏覽器元素交互。
WHATWG 表單規(guī)范的版本號表明它的目標(biāo)是以 HTML4 中的表單規(guī)范為基礎(chǔ)。與 Web Applications (HTML5) 規(guī)范不同，這是個成熟的規(guī)范。Web Forms 2.0 的范圍也更狹窄，僅僅著眼于改進(jìn)瀏覽器中提供的表單控件。
這次對表單的修訂增加了什么呢？其中包括：
1.驗證結(jié)構(gòu)允許瀏覽器在提交表單前做更多的檢查。新的屬性，包括 required、min 和 max。
2.驗證的 DOM 支持，為表單元素增加了 validity 屬性和新的 invalid 事件。
3.對表單元素自動完成的控制，允許文檔作者指明是否讓瀏覽器記住字段值并自動填充。預(yù)定義的值可通過 list 屬性傳遞。
4.autofocus 屬性指定加載文檔時哪一個表單元素?fù)碛休斎虢裹c。
5.inputmode 屬性允許對存放文本的表單元素提示適當(dāng)?shù)恼Z言輸入模式。
6.文件上傳控制的改進(jìn)，可以指定文件類型，限制文件大小。
7.模板化表單元素的循環(huán)。
8.新的輸入控件包括：datetime、number、range、email 和 url。增加了限制輸入值的模式（pattern）。
Web Forms 規(guī)范比 HTML5 更加一致，已經(jīng)出現(xiàn)了一些實現(xiàn)：Opera 9 的 beta 版包括 Web Forms 2.0 支持；開放源碼 Web Forms 項目為 Internet Explorer 提供了 DHTML+Behaviors 實現(xiàn) 。
W3C 為下一代表單提供的答案是 XForms。XForms 和 Web Forms 2.0 不同，根據(jù)傳遞的 XML 文檔開發(fā)了一種新的瀏覽器-服務(wù)器交互模型。相反，Web Forms 2.0 是對現(xiàn)有表單模型的改良，目的是使現(xiàn)在的瀏覽器表單更好用。這兩種規(guī)范針對不同的需求，雖然存在明顯的共同之處。正如 Web Forms 規(guī)范所指出的：
本規(guī)范嘗試增加 XForms 的一些功能，并盡量減少對現(xiàn)有的、被廣泛實現(xiàn)的表單模型的影響。如果需要，向后兼容、易于編輯、易于實現(xiàn)要優(yōu)先于理論的純粹性。
canvas 是瀏覽器實現(xiàn)的主要 WHATWG 特性。HTML5 的其他部分仍然處在初級階段，可能永遠(yuǎn)不會完全實現(xiàn)。
但是，Web Applications 和 Web Forms 規(guī)范可能顯示出最初沒有預(yù)料到的重要性。近幾個月中，出現(xiàn)了一些功能全面的項目，用于為 Web 應(yīng)用程序開發(fā)用戶界面工具箱。這些實現(xiàn)使用 HTML 再加上 JavaScript 技術(shù)或者 Flash。其中多數(shù)可能已經(jīng)認(rèn)識到 “重新發(fā)明輪子” 是毫無意義的，開始考慮使 WHATWG 規(guī)范標(biāo)準(zhǔn)化，比方說其正式實現(xiàn)。
由于明顯的需求和規(guī)范的完整性，Web Forms 2.0 規(guī)范很可能被實現(xiàn)并最終成為認(rèn)可的標(biāo)準(zhǔn)。事實上 Web Forms 2.0 已經(jīng)提交給 W3C 請求評論，就像是 WHATWG 合作者的資產(chǎn)負(fù)債表和構(gòu)造塊。
但是，僅僅根據(jù) WHATWG 規(guī)范很難描繪 HTML 的未來。一些部分僅僅描述了當(dāng)前的創(chuàng)新，如 XMLHttpRequest 和 canvas，其他部分似乎還很模糊，沒有引起實現(xiàn)者的興趣。此外，HTML5 的主要動機(jī)是桌面的、以應(yīng)用程序為中心的應(yīng)用。非 PC 設(shè)備上還沒有大量使用 HTML，這也是需要發(fā)展的一個方向。
隨著基于 Ajax 的瀏覽器界面工具箱的興起，HTML5 中某些更深刻的想法可能已經(jīng)過時了。既然有可擴(kuò)展的工具箱使用，開發(fā)人員何必在文檔中使用有限的一組控件呢？更豐富的 Web 界面更有可能通過市場而不是委員會而實現(xiàn)標(biāo)準(zhǔn)化。
我高興地看到已經(jīng)通常實現(xiàn)但還沒有標(biāo)準(zhǔn)化的技術(shù)如 canvas 和 XMLHttpRequest 的進(jìn)展，希望能夠改進(jìn)這些重要特性的互操作性。要使瀏覽器技術(shù)沿著自己的方向發(fā)展，HTML5 必須更加清晰，最好分為三個規(guī)范，分別描述目前、近期 和設(shè)想 的特性。
