五分鐘學會HTML5！（一）

語義标簽和頁面布局

我們首先講一個關于一所大學的經典故事。這所大學在建設校園草地時，沒有開辟任何步行小道，他們把整個空地種上草，然後等待。

一年以後，人們經常走過的地方，草都被踩光了。于是，這所大學就将這些地方鋪設為真正的人行道。

棒極了！這些人行道是人們真正“走”出來的。

HTML5新語義元素的誕生正是基于同樣的邏輯。（關于這一點，可以參看W3C設計指南中的“Pave the Cowpaths”。）

語義元素清晰地向浏覽器和開發人員表明了它們的涵義和用途，要了解這一點，可以将它們與< div>标簽進行對比。在HTML檔案内，< div>标簽能定義出一個分區或者一個小節，但是它無法告訴我們分區裡的内容，不能傳達任何清晰的涵義。

開發人員通常會将ID或者類名與< div>标簽配合使用，這會向程式員傳達更多的涵義。但遺憾的是，這并不能幫助浏覽器領會那種标簽的用途。< div id="header">

在HTML5中，有不少新的富含語義的元素，可以向浏覽器和開發人員傳達元素的用途。< header>

W3C挖掘了數億個的Web頁面，找出開發人員一直在使用的ID和類名。一旦開發人員抛出div1、div2這些無意義标簽，他們就得到了一個描述非常細緻的已經在使用的元素的清單，并讓其成為W3C的标準設定。

下面是HTML5的一部分新的語義元素：

• article

• aside

• figcaption

• figure

• footer

• header

• hgroup

• mark

• nav

• section

• time

由于這些元素的語義很豐富，相信你可能會猜出其中大部分元素的作用。

為了說得更清楚，下面給出一張圖示。

header和footer的作用不言自明，nav将創造一個導覽列或者菜單條。此外，你可以用section和article将頁面内容分為幾個部分。最後，aside元素用來安置附帶的内容，比如說，以邊欄的形式放上一些相關連結。

下面是一個簡單的例子，其中的代碼就用到了這些元素。

複制代碼

當然，在這個例子裡，我也引出了另外幾個新元素。

不知道你是否注意到hgroup元素，它将h1和h2這兩個header組合到一起了？

我們可以用mark元素将重要文本高亮顯示或标記出來。如果要在内容中插入一張圖（圖像、圖表、照片和代碼片段等），可以使用figure元素。而figcaption元素能為圖加上标題。當把以上代碼和一些CSS代碼組合後，得到的Web頁面如下圖所示。

在一些擅長CSS的朋友（可惜我不擅長CSS）的幫助下，上面這個結果看起來靓爆了！實際上，有了HTML的描述性，完成這個頁面非常容易。

還要說明一點，如果你是Visual Studio的擁趸，請確定已經安裝了Visual Studio 2010 SP1。否則，你将發現Visual Studio并不了解HTML5元素，進而導緻Web頁面上到處是歪歪曲曲的線條。

然後，在Visual Studio菜單中依次選擇“Tools”-“Options”，打開一個“Options”對話框。從左側的導航面闆，依次展開 “Text Editor”和“HTML”，單擊“Validation”。在“Target”下拉清單框中選擇HTML5，這樣就能得到對 HTML5 IntelliSense的支援了。

使用Canvas元素在HTML5中進行繪畫

HTML5中另外一個新元素是< canvas>标簽。顧名思義，它就是一塊用來繪畫的空白平面。你需要使用JavaScript在這塊畫布上進行操作和繪畫。

你可能需要為canvas元素賦予一個id屬性，這樣就能通過JavaScript代碼以程式設計的方式通路它。如果你正在使用jQuery，并且在頁面上隻有一個canvas，你可以使用$(‘canvas’)來通路它，而不用為它命名。

你也可以為canvas指定height（高度）和width（寬度），但這不是必需的。在< canvas> 和< /canvas>标簽之間，你還可以指定一些文本，顯示在不支援canvas元素的浏覽器中。

下面是使用canvas進行繪畫的一個簡單例子。（我希望畫一張蘇格蘭國旗，如果畫得不是非常精确，請見諒。）

上面的代碼将生成以下結果。

現在我們從頭到尾分析一下代碼。

首先，我建立了一塊畫布（canvas），并為它賦予了一個ID叫“myCanvas”。如果運作這段代碼的浏覽器不支援canvas元素，它就會在旗幟 原本要出現的位置顯示“Your browser does not support the canvas tag”。

接下來，我編寫了一段腳本。記住，canvas标簽隻是一個用來畫圖的容器，你必須用JavaScript來畫圖并将其呈現出來。我首先通過使用 ID“myCanvas”獲得了對canvas的一個引用，然後得到canvas的上下文。上下文所提供的方法和屬性，都可以用來在canvas上操作圖 形和進行繪畫。這裡指定了參數“2d”，表示我将在2維的環境中來進行繪畫。

第三步，完成藍色矩形的繪畫。我用fillStyle方法指定了矩形的顔色為藍色，再用fillRect方法畫出了矩形，後者的參數指定了矩形的大小與位 置。fillRect(0, 0, 125, 75)表示：從左上角的頂點（0,0）開始畫一個矩形，寬為125像素，高為75像素。

最後，我在旗幟上畫出了一個白色的“X”。我首先調用beginPath方法啟動畫路徑的程序。指定的lineWidth屬性值（也就是路徑的寬度）為 15像素，這是通過不斷猜想加嘗試才找到的看起來最合适的值。另一個屬性strokeStyle則被指定為“white”，以表示路徑顔色為白色。接下 來，依靠moveTo和lineTo兩個方法描繪出了整個路徑。這兩個方法都會定位出一個用來繪圖的光标，其差別在于：前者移動光标的時候不會畫出一條 線，而後者在移動的同時會畫線。在畫X的過程中，首先從（0,0）——左上角開始，然後畫一條線到（125,75）——右下角。接着把光标移到 （125,0）——右上角，一筆畫到（0,75）——左下角。最後的stroke方法将真正地呈現這些筆畫。

canvas與SVG的簡單對比

可縮放矢量圖形（Scalable Vector Graphics，簡稱SVG）是在浏覽器視窗進行繪畫的一個早期标準。随着HTML5的canvas的釋出，許多人都想知道它們之間到底孰優孰劣。

在我看來，它們之間最大的差別就是：canvas使用立即呈現模式，而SVG使用保留呈現模式。這意味着，canvas可以讓所畫的圖形立即呈現在顯示器 裡。在上面給出的代碼中，一旦旗幟畫完，系統就會“忘掉”它，且不會有任何狀态保留下來。如果對它進行改動，将會導緻徹底的重畫。與之相比，SVG保留了 所呈現對象的一個完整模型。要對圖做出改動時，你隻需要指出改動的地方（例如矩形的新位置），浏覽器來負責呈現新的圖形。這節省了開發人員的工作，但也為 維護子產品付出了性能上的代價。

能夠同時通過CSS和JavaScript來進行設計，是SVG另一個值得稱道的優點。與之相比，canvas隻能通過JavaScript來進行操作。

兩者其他的差別如下表所示。

如果想了解更多細節的不同之處，推薦你去閱讀下面一些文章（前面的表就是經過作者同意後從下面的文章裡拿來的）。

SVG和Canvas使用心得（Patrick Dengler著）

深入HTML5 Canvas（Jatinder Mann著）

HTML5 Canvas入門（John Bristowe著）

音頻和視訊支援

HTML5最大的新特色之一就是支援音頻和視訊。在HTML5之前，我們必須使用插件如Silverlight 或Flash來實作這些功能。在HTML5中，你可以直接使用新标簽< audio> 和 < video>将音頻和視訊嵌入到頁面。

從編碼的角度來看，audio和video元素使用起來很簡單（下面我會深入地談到它們的一些屬性）。所有的主流浏覽器都支援audio和video元 素，包括最新版本的IE、Firefox、Chrome、Opera和Safari。雖然如此，有一點很關鍵：你需要編碼×××去播放音頻和視訊，而不同 的浏覽器支援的編碼×××是不同的（想要進一步了解視訊容器和編碼×××，可以通路連結http://diveintohtml5.org /video.html）。幸運的是，這不會成為技術障礙，因為HTML5對音頻和視訊的支援方式非常靈活（各個浏覽器支援的音頻和視訊格式一般有好幾 種，它會輪流使用這幾種格式去播放音頻和視訊）。*當然，你最好提供多種格式的音頻和視訊源，以滿足不同浏覽器的需求。*此外，你還可以繼續使用 Silverlight或Flash插件。最後，在開始和結束标簽（例如< audio> 和 < /audio>）之間的文 本，會在浏覽器不支援audio或video元素的時候顯示到web頁面上。

例如：

執行這段代碼時，浏覽器将首先試圖播放laughter.mp3檔案。如果沒有合适的編碼×××去播放，它會轉向播放下一個檔案 laughter.ogg。如果浏覽器根本不認識audio元素，它會在音頻控件的位置顯示文本 “Your browser does not support the audio element”。

關于音頻和視訊，需要警告大家的是：HTML5并沒有内置的數字版權管理（digital rights management，簡稱DRM）支援，作為開發人員，你必須自己實作它。

現在，讓我們深入探讨這兩個新元素。

音頻

首先，讓我們看看< audio>的更多細節。

前面已經介紹過，浏覽器會依次嘗試播放每個音頻源，直到找到一個能播放的源。

注意這裡多了一個controls屬性。使用這個屬性後，浏覽器将顯示音頻回放控件，包括播放/暫停按鈕、時間顯示控件、靜音按鈕和音量控件。在絕大多數 情形下，把這些控件展示給使用者是明智的。我非常讨厭打開一個網頁時有聲音響起，而且沒法把它停止、靜音或者調低，難道你不是這樣？

在IE浏覽器中，各種音頻控件如下圖所示。

在不同的浏覽器中，這些控件的外觀并不一樣。Chrome浏覽器中的音頻回放控件如下圖所示（它正在播放一首歌）。當你的滑鼠指針懸停在整個控件最右邊的聲音圖示上時，将會彈出一個下拉式的音量控制條。

下圖是Firefox中的控件樣式，截圖停在了一首歌暫停的時刻。和Chrome一樣，它也有一個彈出式的音量控制條（本圖未顯示），可以通過将滑鼠指針懸停在控件最右邊的聲音圖示上彈出它。

audio元素的其他一些有趣的屬性如下表所示。

下面這段示例代碼，執行時将顯示音頻回放控件，并在音頻檔案加載完成後立刻自動播放，完成後再一遍又一遍地重複播放。

如果你想在自己的浏覽器中好好研究< audio>元素，可以參考http://w3schools.com/上的 “Tryit Editor”。它可以用來編輯一些示例代碼，然後看看會發生什麼。此外，你也可以參閱下面這篇文章—— How to add an HTML5 audio player to your site（如何向你的站點添加HTML5音頻播放器）。

視訊

現在，讓我們試試< video>元素。

前面講過，video元素也支援多個源，它會按順序依次嘗試播放。

與audio元素相同，video元素也有一個controls屬性。視訊控件在IE浏覽器中的截圖如下所示。

video元素其他一些有趣的屬性如下表所示。

如果你希望繼續研究< video>元素，可以使用來自http://w3schools.com/的“Tryit Editor”，用它來編輯一些示例代碼，然後看看代碼生成的效果。

如果想學習關于video和audio的更多内容，請通路以下幾個連結。

使用< audio>和< video>必須知道的5件事情

如何向你的站點添加HTML5音頻檔案

W3C Schools HTML5 video