第一章 1.5 無插件範式

過去，不少功能只能經過插件或者複雜的 hack（本地繪圖 API、本地 socket 等）來實現，但在 HTML5 中提供了對這些功能的原生支持。插件的方式存在不少問題：

    插件安裝可能失敗；

    插件能夠被禁用或屏蔽（例如 Apple 的 iPad 就不支持 Flash 插件）；

    插件自身會成爲被攻擊的對象；

    插件不容易與 HTML 文檔的其餘部分集成（由於插件邊界、剪裁和透明度問題）。

    雖然一些插件的安裝率很高，但在控制嚴格的公司內部網絡環境中常常會被封鎖。此外，因爲插件常常還會給用戶帶來煩人的廣告，一些用戶也會選擇屏蔽此類插件。這樣的話，一旦用戶禁用了插件，就意味着依賴該插件顯示的內容也沒法表現出來了。

    在已經設計好的頁面中，要想把插件顯示的內容與頁面上其餘元素集成也比較困難，由於會引發剪裁和透明度等問題。插件使用的是自帶的渲染模型，與普通 Web 頁面所使用的不同，因此當彈出菜單或者其餘可視化元素與插件重疊時，會特別麻煩。此時，HTML5 卻能夠站出來，揮舞着它的原生功能魔棒，對這類問題笑而不語，它能夠直接用 CSS 和 JavaScript 的方式控制頁面佈局。實際上這是 HTML5 的最大亮點，顯示了先前任何 HTML 版本都不具有的強大能力。HTML5 不只僅是提供新元素支持新功能，更重要的是添加了對腳本和佈局之間的原生交互能力，基於此，咱們能夠實現之前不能實現的效果。

    以 HTML5 中的 canvas 元素爲例，有不少很是底層的事情之前是沒辦法作到的（好比在HTML4 的頁面中就難畫出對角線），而有了 canvas 就能夠很輕易地實現了。更爲重要的是新API 釋放出來的潛能，以及經過寥寥幾行 CSS 代碼就能完成佈局的能力。基於 HTML5 的各種API 的優秀設計，咱們能夠輕鬆地對它們進行組合應用。好比，從 video 元素中抓取的幀能夠顯示在 canvas 裏面，用戶點擊canvas 便可播放這幀對應的視頻文件。這只是一個使用原生方法實現插件功能的示例。其實，當工做再也不基於黑盒後，開發反而會變得更簡單。HTML5 的不一樣功能組合應用爲 Web 開發注入了一股強大的新生力量，這也是咱們爲何決定寫一本關於HTML5 編程的書，而不僅僅是介紹那些新元素的緣由。

HTML5 包括什麼，不包括什麼

    那麼，HTML5 到底包括些什麼？仔細閱讀過規範的讀者，可能會發現本書中講解的不少功能其實在規範中是沒有的。例如，Geolocation 和 Web Workers 就不在規範中。那爲何還要將它們歸入本書的討論範圍呢？炒做？固然不是！

    不少 HTML5 的研究成果（如 Web Storage 和 Canvas 2D）起初都是 HTML5 規範的一部分，後來移出來列入了單獨的規範中，這麼作是爲了讓 HTML5 規範更好地突出重點。在成爲官方規範以前，先單列出來進行討論和編輯不失爲一個好辦法。這樣的話，即便存在爭議，也不會影響到整個規範。

    在討論某個功能的時候，特定領域的專家可經過郵件列表的方式共同探討，不會由於喋喋不休而引發激辯。業界仍然傾向於把原始功能集都視爲 HTML5，其中包括 Geolocation。這樣的話，HTML5 不只涵蓋了核心的標記元素，同時也能夠包括不少很酷的新 API。寫這本書的時候，下面這些功能也屬於 HTML5：

Canvas（2D 和 3D）

Channel 消息傳送

Cross-document 消息傳送

Geolocation

MathML

Microdata

Server-Sent Events

Scalable Vector Graphics (SVG)

WebSocket API 及協議

Web Origin Concept

Web Storage

Web SQL database

Web Workers

XMLHttpRequest Level 2

    能夠看到本書中所討論到的 API 大多都在上面的列表中。爲何選擇這些 API 呢？咱們挑選的都是基本成熟的功能，也就是說這些功能已經獲得了不止一種瀏覽器的支持，其餘功能（不太成熟的）可能只在個別瀏覽器的某個 beta 版中可用，或者基本上只是個概念。

    對於咱們要討論的 HTML5 功能，本書將提供各類瀏覽器的最新支持狀況。不過，無論如今支持狀況如何，不久的未來確定會變，由於 HTML5 發展的速度很是快。不用擔憂，咱們會推薦一些很是好的在線資源，用以查看當前（以及未來）瀏覽器的支持狀況。www.caniuse.com網站按 照 瀏 覽 器 的 版 本 提 供 了 詳 盡 的 HTML5 功 能 支 持 情 況 。 若 用 戶 通 過 瀏 覽 器 訪 問www.html5test.com的話，該網站會直接顯示用戶瀏覽器對 HTML5 規範的支持狀況。

    此外，本書的重點不是討論使用某種模擬或者變通的方法讓 HTML5 程序可以運行在舊瀏覽器上，而是着重關注 HTML5 規範自己，以及它的使用方法。也就是說，在本書中咱們針對所討論的每一個 API 都會提供一些示例代碼，開發人員能夠直接拿來檢測其可用性。由於檢測用戶代理的方式常常不可靠，因此咱們使用特性檢測。固然，還可使用 Modernizr —— 一個 JavaScript庫，它提供了很是先進的 HTML5 和 CSS3 檢測功能。咱們強烈推薦使用 Modernizr，由於它是檢測瀏覽器是否支持某些特性的最佳工具。

對於 HTML 多說幾句

「 你們好，我是 Frank①，我喜歡畫畫。

    我見過的第一個 HTML canvas 演示是一款簡單的繪圖程序，用戶界面模仿的是微軟的畫圖程序。儘管那落後於數碼繪圖幾十年，而且當時只有個別瀏覽器支持，不過它卻讓我對其表現能力充滿了期待。

    當我開始數碼繪圖的時候，通常都使用安裝在本地的桌面軟件。不能否認，有些軟件至關不錯，但它們不具有 Web 應用的迷人特性。簡而言之，這些軟件都是離線的。想要共享數碼做品，必須先從軟件中將圖像導出，而後上傳至 Web。可是在 Web 的實時畫布上協做討論的話就不存在這種問題了。HTML5 應用能夠省掉如今數碼繪圖流程中的導出環節，將整個創做過程都轉移到線上，直至做品完成。

    不能用 HTML5 實現的應用已經變得愈來愈少了。對於文本，Web 已然成爲雙向溝通的理想媒介。經過全 Web 的方式處理文本的應用程序比比皆是，而相似繪圖、視頻編輯、3D 建模等圖形類程序纔剛剛起步。如今，咱們已經開發出了許多功能強大的單機軟件，用以建立和欣賞圖片、音樂、電影等。

更進一步，咱們能夠將這些軟件移植到 Web 這個功能強大、無處不在的在線平臺上。」

——Frank