級別: 初級
Edd Dumbill, 主席, XTech Conference
2005 年 12 月 29 日
本
系列包括兩篇文章，Edd Dumbill 分析了 Web 作者、瀏覽器開發人員和標準組織所期望的 HTML 未來趨勢各種方式。介紹了
WHATWG 闡述的漸進式方法和 W3C 所提議的 XHTML 的大清洗式的方法。此外，作者還考察了 W3C 最新的 Rich Client
Activity。本文是第 1 部分，Edd 主要討論 WHARWG 開發的兩種規范：Web Applications 1.0 (HTML5)
和 Web Forms 2.0。
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>
<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 必須更加清晰，最好分為三個規范，分別描述目前、近期 和設想 的特性。
參考資料
學習
獲得產品和技術
關于作者
|
|
|
Edd Dumbill 是 Web 和 XML 技術 XTech 會議的主席，Web 和 XML 技術的常設評論員和開放源碼開發人員。
|