使用HTML5 和CSS3創建現代Web站點

開始之前本教程假定您具有 HTML、CSS 和 JavaScript 的一些基本經驗。假定您知道什麼是 HTML 元素或標記、屬性表示什麼、HTML 標記的基本語法、Web 頁面的常規結構等等。關於 CSS，您應該熟悉元素、類、以及基於 ID 的選擇器、CSS 特性的語法以及如何使用內嵌或外部樣式表在您的 Web 頁面中包括 CSS。最後，假定您具有一些 JavaScript 的工作知識，例如什麼是變量、函數、if 語句和 for 循環以及如何在您的 Web 頁面中包括 JavaScript 代碼。如果您決定需要在開始之前先復習一下以上任何技術，請跳至 參考資料部分，查找一些有用的教程和文章，它們將幫助您快速了解 HTML、CSS 和 JavaScript 開發的基礎知識。

關於本教程

在過去的十年左右，Web 2.0、富因特網應用程序（RIA）以及 Semantic Web 等概念都將 HTML、CSS 和 JavaScript 推到了它們的極限以及極限之外，建成依賴 Adobe® Flash 等插件來支持視頻和音頻等組件以及高度圖形化和交互的應用程序。Adobe Flex 開發框架、Microsoft® 的 Silverlight 平台和 JavaFX 都似乎在 HTML 的缺點使得開發人員犯難時來提供支持。但是，使用 HTML5，標記語言將具有完整的多媒體支持、本地存儲和脫機應用程序支持、原生 2D 繪圖 API 以及承載新應用程序開發 API，提供所有這些都是旨在證明 HTML、CSS 和 JavaScript 可以為您的 Web 站點和應用程序提供一個豐富的前端。

HTML5 被廣泛認為是計劃在 2010 年出現的最重要的新技術之一，已經有幾本關於該主題的書正在編寫過程中，其中一些將最早在今年三月初出版。在過去許多年，Web 都是依賴於外部插件來提供 Web 浏覽器自己無法支持的功能，特別是在 2D 繪圖、動畫以及多媒體方面。HTML 和 CSS 規范的最新版本目的是不再需要這些額外的浏覽器組件來促進此類功能，以及減少進行以下細小操作所需的 JavaScript（或者在某些情況下完全不再需要 JavaScript）：行拖放、行條帶化等等。請按照本教程學習如何使用 HTML5。

先決條件

HTML5 是一種對象較新的規范，因為浏覽器支持是非常有限的（在編寫本教程時）。本教程中提供的代碼盡可能是跨浏覽器兼容的，但是一些功能將無法在所有浏覽器中使用。當前為浏覽器特定的任何功能都會在本教程中明確指出。為了確保您可以體驗所有這些新功能，建議您在開發 HTML5 和 CSS3 應用程序時在您的系統上安裝以下 Web 浏覽器的最新版本：

• Mozilla Firefox（版本3.5+）
• Apple Safari（版本 4.0+）
• Opera（版本 10.0+）
• Google Chrome（版本 3.0+）

您不需任何特定軟件來編寫 HTML 和 CSS 代碼；任何基本文本編輯器都可以（例如 Notepad、vi、emacs 等等）。在本教程中，假定 源代碼 存儲在您本地計算機上的一個目錄中 — 您不需要使用 Web 服務器或將文件上載到 Web 承載服務。

HTML5 中的新功能

在本部分，您將了解 HTML5 提供的一些很好的新功能。您將首先學習一些新的語義元素，這些元素用來提供現在 Web 頁面的各個部分的意義：頁眉、頁腳、導航欄、邊欄等等。然後，您將學習重要的新 <canvas> 元素和 2D 繪圖 JavaScript API，可以用來創建形狀、文本、動畫、過渡等等。接下來，您將看到新的 <audio> 和 <video> 元素如何用來替代 Web 當前對 Flash 作為一種多媒體交付平台的依賴。接著，將向您介紹本地存儲 API 和脫機應用程序支持，它們將進一步使 Web 應用程序在功能方面與其桌面對應項相一致，甚至在未連接到網絡或互聯網時也是如此。本部分結尾部分將簡要概述 HTML5 規范中包括的其他新元素、屬性和 API。