由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了。
語意標籤讓開發人員在維護時，更容易理解網頁的內容
▲利用section標籤，將標題＜header＞、內文＜article＞及版權資訊＜footer＞，分為三個區塊。
以前在製作網頁時，我們常會利用＜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＞標籤是用來標示製作者、著作權等資訊，一般都是擺在文件的下方。
轉載自：http://www.ithome.com.tw/itadm/article.php?c=71041
沒有留言:
張貼留言