自己動手寫HTML5網頁

由W3C負責制定的HTML是用來編寫網頁的標記語言，而目前我們所使用的版本為4.01。如果開啟網頁的原始檔查看，會發現到很多類似＜html＞這樣由＜及＞符號包含文字的標籤，這就是HTML語言。其實說穿了，網頁就是一堆標籤的組合。

HTML標籤通常都有起始標籤與結束標籤，例如＜html＞與＜/html＞，而要構成一個網頁，最基本的標籤有＜html＞、＜head＞、＜title＞與＜body＞。＜html＞及＜/html＞一定是放在程式的第一行與最後一行，告訴瀏覽器這是一份HTML文件。而＜head＞則是檔頭宣告，定義這一個網頁的屬性，例如使用何種編碼方式，裡面的內容除了＜title＞外，不會出現在網頁上。title標籤被包含在head內，主要是顯示網頁標題，裡面的文字會出現在網頁最上方的標題欄。而＜body＞標籤的內容則是要呈現在網頁上的資訊。

由於HTML 4.01只能傳達文字或圖片等的靜態資訊，於是為了讓網頁能有動態的效果，開始出現了像JavaScript語言這樣的技術，達成與使用者互動的目標，後來還出現像DHTML、XHTML等標準，這些規格的出現都是為了加強與使用者的互動。不過這些技術也都是以HTML 4.01為核心所衍生出來的。隨著寬頻的普及，網路應用愈來愈廣，例如線上觀看影音、網頁遊戲等。但目前我們所使用的4.01版本已經無法應付這些技術，於是才會出現如Flash、Silverlight等外掛程式，實現這些功能。

不過由於這些外掛程式都是由不同公司所開發的，這之中牽涉到專利的問題，因此，開始有瀏覽器業者認為有制定新標準的必要。這些瀏覽器業者組成WHATWG團體，研究新的HTML標準，後來WHATWG與W3C合併，由W3C繼續制定的工作。

由W3C所制定的新一代網頁標準HTML5，雖然目前還在草案階段，預計在2012年3月才會正式發表，但由於許多知名瀏覽器如IE、Chrome、Firefox都已開始支援，而iPhone及Android等智慧型手機更是早就支援了此規格。另外Amazon及Google等公司，也都使用HTML5開發Web App，例如Google Docs、Kindle Cloud Reader等。

網路上也有許多人利用HTML5開發出許多有趣的網頁應用程式，像是線上小畫家、文字雲等，同時由於HTML5具有跨平臺的特性，未來開發人員只需寫一套應用程式，不再需要針對不同平臺開發相對應的程式碼，進而減少開發時間及成本，因此HTML5成為了目前較熱門的話題之一。

為減少外掛程式為目標而誕生的HTML新標準

以往要在網頁上觀賞影音或者玩網頁遊戲，必須要安裝外掛程式才能做到，而HTML5的制定則是為了要減少瀏覽器對外掛程式的需求，因為如此，HTML5新增了許多可以用來製作網頁應用程式的API，同時也增加了canvas標籤，以達成能在網頁上繪圖的功能，要使用這些功能，必須搭配JavaScript語言使用。另外網頁的美化，例如文字大小與顏色等，在以前雖然也可以使用＜font＞等標籤做出來，但這樣勢必會讓整分文件變得更複雜難懂。因此將美化的工作抽出來，交給CSS負責。而HTML5也廢除了＜font＞及＜center＞標籤。因此，廣義來說，HTML5包含了HTML、JavaScript、CSS等三個部分。

在HTML5中主要新增的功能有──首先是使用語意標籤來加強文件的結構化、接著是新增＜video＞及＜audio＞標籤強化對聲音及影像等多媒體的播放功能、以及增加可以自由描繪圖形的＜canvas＞標籤、最後則是提供多種有助於網頁應用程式開發的API。如果要製作HTML5網頁，只要在檔案內容的第一行寫入＜！DOCTYPE html＞，意思是宣告這文件為HTML5文件，瀏覽器只要讀到這一行，就會將此文件視為HTML5了。

語意標籤讓開發人員在維護時，更容易理解網頁的內容

以前在製作網頁時，我們常會利用＜div＞或＜table＞標籤來對文件進行排版，在HTML5中則使用了具有意義的語意標籤，例如＜header＞標籤是用來表示網頁的標題或主選單。這裡的＜header＞跟＜head＞雖然字面上看起來很像，但這二者代表的意思是不一樣的，也就是說二者之間並沒什麼關係。

使用語意標籤製作網頁文件，好處有很多，對開發人員而言，只要看到標籤就能了解這部分是標題、內文還是選單；而搜尋引擎在檢索尋網頁內容時，可以更精確地找到所要的資料；要構成一個具有完整結構化的HTML5網頁，主要有＜header＞、＜nav＞、＜section＞、＜article＞、＜aside＞、＜footer＞這6個語意標籤。

＜header＞標籤通常置於文件的頂部，它可以放在網站或文章的開頭當作標題使用，主要的功能是用來放置網站的介紹資訊、主選單及網站Logo。在這之中也能使用其它HTML標籤，例如，當作標題時，我們可以使用＜h1＞到＜h6＞標籤，也能使用＜img＞放置圖片，而使用＜form＞標籤時，則是為了插入主選單或搜尋視窗。

＜nav＞標籤則是用來放置網站的選單或連結等，它可以放在＜header＞或＜footer＞標籤裡，也可以獨立使用。如果在網頁中需一次使用多個＜nav＞時，只要另外指定不同ID即可，例如＜nav id=”link1”＞。

而＜section＞標籤的功能是定義文件的區段，將具有主題性的內容群組化，例如，我們可以將網頁中依照選單、主文、連絡資訊，區分為3個區段。當使用＜section＞標籤定義群組之後，我們也能在其中置入＜section＞形成一個巢狀的section或者是置入＜article＞標籤。

＜article＞標籤是用來標示本文中的主要內容，在一個＜article＞標籤中，可以包含標題、主文等。而同一個網頁中也可以有多個＜article＞標籤。一般來說，部落格文章、論壇發文或網頁內容等都可以包含在內。而＜article＞與＜section＞標籤不同的地方在於，＜article＞所包含的通常是一段獨立的文章，而＜section＞標籤包含的是文件中的一個章節或段落。

如果要置入本文之外的其他部分，則是使用＜aside＞標籤，通常用於與主要內容相關的部分，例如補充說明等。而＜footer＞標籤是用來標示製作者、著作權等資訊，一般都是擺在文件的下方。

其他新增的標籤功能

在HTML5裡新增的標籤還有＜figure＞和＜figcaption＞，以前沒有為網頁中的圖片加上解說文字的方法，但現在利用這二個標籤就可以輕鬆做到，使用的方法如下：

＜figure＞

　＜img src=”檔案位置”＞

　＜figcaption＞圖片解說＜/figcaption＞

＜/figure＞

在＜figure＞標籤裡，也可以放入多個＜img＞標籤。如果要強調文件中某一段文字，可以在文字前後加上＜mark＞＜/mark＞。＜mark＞標籤主要的功能是透過CSS的設定，改變所標示文字的背景顏色或文字顏色，藉以強調該段文字。另外HTML5還提供了可以表示日期格式的＜time＞標籤，只要在＜time＞標籤裡指定日期，就能在瀏覽器中辨識日期，而日期的格式為yyyy-mm-dd，例如2011-10-10。＜address＞標籤則是用來標示網頁製作者的名稱或連絡資訊等，用＜address＞所標示的文字會呈現出斜體樣式。

支援影音播放，減少外掛程式需求

HTML5裡另一個受矚目的功能，就是新增了用來播放音訊的＜audio＞，以及影片的＜video＞標籤。不過目前各家瀏覽器所支援的格式並不相同，那是因為HTML5的標準規格還未確定，等正式的標準訂立之後，程式碼應該會變得更簡潔。

＜audio＞標籤的屬性包含了用來指定音訊檔案位置的src屬性，當開啟網頁時是否自動載入的preload屬性，而controls屬性則是指定是否顯示控制面板，如果指定了，控制面板就會顯示在畫面上，此時使用者就可以藉由面板進行播放、暫停等動作。

＜audio＞標籤的用法大致如下：

＜audio src=”檔案位置”controls＞

未支援此標籤時顯示的內容

＜/audio>

要注意的是由於各家瀏覽器支援的音樂格式都不同，例如，Firefox並不支援MP3，而是支援.OGG格式的音訊檔案，所以在使用＜audio＞標籤時，必須考慮到這點，因此可以改成使用＜source src＞標籤的方法。

例如要讓Firefox也能播放音樂，可以將程式碼改成：

＜audio controls＞

  ＜source src=”檔案名稱.mp3＞

　＜source src=”檔案名稱.ogg＞

未支援此標籤時顯示的內容

＜/audio＞

而＜video＞標籤的用法大致與＜audio＞相同。

在使用＜video＞插入影片時，需先指定影片的大小，例如＜video width=”500” height=”400”＞。同樣的，由於各家的瀏覽器所支援的視訊解碼器不太相同，因此在置入視訊時，也必須考慮到這點。

目前各家瀏覽器所支援的視訊格式主要分為OGG（*.ogv）與MPEG4（*.mp4）二種。而在使用＜source src＞標籤時，開發人員還必須指定檔案類型（type），例如＜source src=”test.ogv  type=”video/ogg”＞及＜source src=”test.mp4  type=”video/mp4”＞。

canvas標籤功能，讓網頁也能繪出圖形

HTML5新增了具有繪圖功能的＜canvas＞標籤，利用這項功能可以直接在網頁上畫出線條、圖形及動畫，甚至還能做出網頁遊戲。不過＜canvas＞標籤並不能直接使用，而必須搭配JavaScript來操作。而且，目前＜canvas＞標籤僅能畫出2D圖形。

要使用canvas的功能，必須先配置＜canvas＞標籤，首先要指定ID名稱，接著指定畫布的大小，例如＜canvas id=”draw”  width=”500”  height=”400”＞，記得最後要加上＜/canvas＞作為結尾。

設定好畫布之後，接著就可以使用JavaScript進行繪圖。首先必須使用document.getElementById（）方法來取得canvas物件，可以寫成var canvas= document.getElementById（draw），再使用canvas的getContext（）方法取得繪圖函數，例如var ctx=canvas.getContext（2d）；取得繪圖方法之後，就要呼叫用來描繪的方法進行繪圖。fillRect方法負責描繪矩形，fillStyle則是指定顏色。

＜canvas＞標籤裡唯一提供的圖形只有矩形，如果要畫三角形或圓形等其他圖形，必須使用路徑方法繪製。

而使用路徑繪製圖形的方法有beginPath（開始繪製路徑）、closePath（關閉路徑）、stroke（繪製路徑邊框）、fill（將圖形填色）。另外，moveTo（x, y）方法則是將繪製路徑的起點移至（x,y）位置，若沒有使用moveTo（），則路徑起點預設是在（0,0）。lineTo（x,y）方法則是由目前端點到（x,y）畫一直線。

要繪製圓形或圓弧則是使用arc方法，我們可以寫成arc（x,  y,  r,  startAngle,  endAngle, anticlockwise），意思是從（x,y）為起點畫出半徑（r）的圓形，其中的startAngle和endAngle參數是以角度標示圓形的起點及終點，而anticlockwise參數則是指定是否由逆時鐘順序來繪製，可以指定true（真）和false（假）。

提供多種API開發網頁應用程式

HTML5為了讓開發者能開發網頁應用程式，提供了多種的API給開發者使用，例如應用程式快取（Application Cache）。

一般來說，網頁應用程式必須在網路連線的情況下才能使用，這種API的目的，則是為了讓這些應用程式在離線狀態下也能使用。

另一個值得介紹的API是Web SQL Database，則是當裝置沒有連上網路，可以利用此功能存取資料。

如果要使用這些API，你必須對JavaScript有一定程度的理解，同時也要了解DOM（Document Object Model）的相關知識才行。

使用新的的語意標籤，製作具結構化的網頁

利用section標籤，將標題＜header＞、內文＜article＞及版權資訊＜footer＞，分為三個區塊。

測試瀏覽器對HTML5的支援

利用HTML5 Test網站，可以實際測試你使用的瀏覽器，支援那些新的HTML功能。

HTML 5新增為圖片加上說明的方法

利用<figure>及<figcaption>標籤，就能輕鬆為圖片加上文字。

利用新增的canvas標籤繪出圖形

利用section標籤，將標題＜header＞、內文＜article＞及版權資訊＜footer＞，分為三個區塊。範例成果(點此看圖)