小说改编的网页游戏,小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

通過WHATWG看HTML5的未來

HTML 不是一種很好的制作網(wǎng)頁的語言。但卻是形成 Web 的一種很好的語言。

龍城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

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 頁面卻要讓用戶用笨拙的文本框和單選按鈕來輸入？

因此毫不奇怪，各種不同的組織再次迫切地要求改進 HTML，使 Web 發(fā)布和 Web 應(yīng)用程序使用現(xiàn)代用戶界面提供的更多技術(shù)。這些人有誰呢？粗略地說可分為三類。首先是利用現(xiàn)有技術(shù)進行改造的那些人。這就是 Asynchronous JavaScript and XML (Ajax) 所宣揚的：使用 JavaScript 和瀏覽器 XMLHttpRequest 對象建立動態(tài)的用戶界面。取得的效果是驚人的，但這不是進步的標(biāo)準(zhǔn)方式。

另外兩類人關(guān)注未來的改進。W3C 根據(jù)各種供應(yīng)商（不僅僅是桌面瀏覽器制造者）的需要，提出了 XHTML 2.0。XHTML 2.0 被看作是革命性的一步。相反，Web Hypertext Application Technology Working Group (WHATWG) 則提出了一套遞增式的規(guī)范，改進 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 走向何方并非總是一致的。我將解釋和評論這兩種方法。

WHATWG、HTML 5 和 Web Forms 2.0

就像其網(wǎng)頁上所宣稱的那樣，WHATWG 是 “Web 瀏覽器生產(chǎn)廠商和一些相關(guān)團體形成的一個松散的、非正式的協(xié)作組織，這些團體希望發(fā)展一些新的技術(shù)，從而開發(fā)人員可以在互聯(lián)網(wǎng)上編寫并部署應(yīng)用。這里有兩點特別值得關(guān)注：WHATWG 的主要參與者是瀏覽器（Mozilla、Opera）制造商，他們改進的目標(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)尺和進度條、拖放、菜單

2.對文檔對象模型（DOM）的編程擴展，包括服務(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)就位。

圖 1. 交互式畫布示例的截屏

通過實現(xiàn)一個簡單的 3D 迷宮，canvas 應(yīng)用程序已經(jīng)離最明顯的目標(biāo)（游戲?。┲挥幸徊街b了，如圖2所示。

圖 2. 簡單的迷宮游戲

為了了解如何對 canvas 編程，請看一些簡單的代碼。清單1 顯示了一個很容易理解的例子，它的結(jié)果如圖3所示。

清單 1. 簡單的 canvas 例子

 
 
 
 
  
  
  
   
  
  
  
     
  
  
  
      Canvas demo 
  
  
  
       
  
  
  
        function draw () {  
  
  
  
          var canvas = document.getElementById ('hello');  
  
  
  
          if (canvas.getContext) {  
  
  
  
            var ctx = canvas.getContext('2d');  
  
  
  
            ctx.fillRect (25, 25, 50, 50);  
  
  
  
          }  
  
  
  
        }  
  
  
  
       
  
  
  
       
  
  
  
        canvas { border: 2px solid red; }

圖 3. 清單 1 的結(jié)果

因為 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 接口更容易使用，也更容易與其他瀏覽器元素交互。

Web Forms 2.0

WHATWG 表單規(guī)范的版本號表明它的目標(biāo)是以 HTML4 中的表單規(guī)范為基礎(chǔ)。與 Web Applications (HTML5) 規(guī)范不同，這是個成熟的規(guī)范。Web Forms 2.0 的范圍也更狹窄，僅僅著眼于改進瀏覽器中提供的表單控件。

這次對表單的修訂增加了什么呢？其中包括：

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.文件上傳控制的改進，可以指定文件類型，限制文件大小。

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)先于理論的純粹性。

其他實現(xiàn)

canvas 是瀏覽器實現(xiàn)的主要 WHATWG 特性。HTML5 的其他部分仍然處在初級階段，可能永遠不會完全實現(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)。

結(jié)束語

由于明顯的需求和規(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 的主要動機是桌面的、以應(yīng)用程序為中心的應(yīng)用。非 PC 設(shè)備上還沒有大量使用 HTML，這也是需要發(fā)展的一個方向。

隨著基于 Ajax 的瀏覽器界面工具箱的興起，HTML5 中某些更深刻的想法可能已經(jīng)過時了。既然有可擴展的工具箱使用，開發(fā)人員何必在文檔中使用有限的一組控件呢？更豐富的 Web 界面更有可能通過市場而不是委員會而實現(xiàn)標(biāo)準(zhǔn)化。

我高興地看到已經(jīng)通常實現(xiàn)但還沒有標(biāo)準(zhǔn)化的技術(shù)如 canvas 和 XMLHttpRequest 的進展，希望能夠改進這些重要特性的互操作性。要使瀏覽器技術(shù)沿著自己的方向發(fā)展，HTML5 必須更加清晰，最好分為三個規(guī)范，分別描述目前、近期和設(shè)想的特性。

當(dāng)前文章：通過WHATWG看HTML5的未來
網(wǎng)頁URL：http://m.fisionsoft.com.cn/article/cdjsdpd.html

新聞中心

其他資訊