用HTML5.0製作網頁的教學_html5教學技巧

根據你們詢問的人，HTML 5不是邁向創造更語義化的網絡的下一個重要步伐，就是用一系列不完整的標籤和標記大雜燴讓網路陷入困境的災難。

爭論雙方的問題在於，很少的網站在自然環境下使用HTML 5，所以現在所認識到的問題的理論解決方案仍然在很大程度上未經考驗。

即便如此，我們不難發現下一代網路標記工具的好處和潛在的問題。

內容

1.     HTML 5 有什麼不同？

2.     最終，任何人都可以記住的文件類型

3.     最基本的語意結構

1.    

2.    

3.    

1.    

2.    

3.    

4.     把他們放在一起

5.     為新元素寫出樣式

6.     舊與舊的瀏覽器

7.     現在你可以使用HTML 5了，但你會用麼？

HTML 5有什麼不同？

首先，我們透過HTML 5表達什麼？ First off, what do we mean by HTML 5?理論上，我們表達所有的事－新的語意結構標籤，例如canvas或離​​線儲存等API規範，以及新的內聯語意標籤。儘管如此，我們把實際的原因 （PS：瀏覽器支援問題）僅限於結構標籤。 canvas，離線儲存，本地影片或地理定位API都很絕妙，然而他們還不能被所有瀏覽器一致的支援。

「但是等等」你說，「大多數瀏覽器也不支援新的結構元素！」這是真的，但他們中的絕大多數將會很樂意去接受你想要創建的任何標籤。甚至連IE6也可以處理新標籤，儘管如果你想要使用CSS設定樣式，你需要一點JavaScript的幫助。

當你為新標籤設定樣式時，你需要記住一件事，那就是未知標籤在大部分瀏覽器中沒有預設樣式。他 同時被認為是行級元素。儘管如此，由於大部分HTML 5的新標籤可以構造，我們將讓他們擁有區塊級元素的行為。解決方法是確認你在CSS樣式中包含了display:block;。

為了幫助了解當今HTML 5的一些新玩意兒，我們現在就進入正題，開始使用一些新的結構元素。

最終，一個任何人都可以記住的文檔類型

我們建立HTML 5文件第一件需要做的事情就是使用新的文件類型。現在，如果你還清楚的記得HTML 4或XHTML 1.x的文件類型，你真是比我們更強的淘氣鬼。每當我們新建一個頁面，我們必須打開一個舊的文件，剪下並貼上文檔類型定義。

這真是痛苦，也是為什麼我們喜歡新的HTML 5文件類型。你準備好了麼？他出現了：

不會太難記。簡單且容易理解。不區分大小寫。

這個構想是停止HTML版本化，讓向後相容變得更容易。從長遠看是否成功是另外的事情，但至少 他節省了你輸入的平均時間。

最基本語意結構

我們已經將我們的頁面定義為HTML 5文件。到現在為止，一切都還不錯。現在，這些我們已經聽說的新標籤到底是什麼？

在我們鑽研新標籤前，想想你一般網頁的結構，大概像這樣：

這對於展示用途很好，但如果我們想要知道一些關於頁面元素包含什麼的問題，這又怎麼辦呢？

上面的例子中，我們為我們所有的結構div添加了ID。這在有見識的設計師中是很平常的事。目 的有兩個方面，首先，ID提供了可以能用於給頁面的特殊段落應用樣式的錨，其次，ID充當基本的偽語義結構。高明的解析器將會查看標籤的ID屬性，並嘗試 去猜測他們的含義，但當每個站點的ID名稱不同的時候很難。

這就是新結構標籤到來的理由。

當認識到這些ID成為了慣例，HTML 5的締造者們更進一步，使這些元素中的一部分變成他們獨立的標籤。這兒有一個HTML 5中生效的新標籤的快速摘要：

頭部標籤被設計為關於一個章節或一整張網頁介紹資訊的容器。

標籤可以包含從你位於大多數頁面頂部的典型標誌或標語，到介紹一個章節的標語和開場白的任何東西。如果你還在你的頁面使用

，那可以用

取代

nav元素非常明顯，這是你的導航元素。當然什麼被算為導航是有一些爭議的，有一個基本的網站 導航，但有些情況下還可能有頁面導航元素。 HTML5的創造者WHATWG最近在修改

的解釋，來表現如何在同一個頁面使用兩次。

更多關於nav的資訊以及關於HTML5的激烈爭論，請參閱Jeffrey Zeldman關於nav元素的文章。

如果你還在使用

標籤來包含你的頁面導航，你可以使用簡潔的

標籤來替換。

Section可能是新標籤中最模糊的。根據HTML 5定義，一個章節是一個內容的主題集合，通常在header標籤後，在footer標籤前。但是如果 需要，section也可以互相嵌套。

在我們上面的例子裡，被「content」標記的div就是一個變成section的很好的選 擇。另外在那個section內，根據內容，我們可以增加section。

根絕WHATWG的註釋，article元素可以包含「組成文件或網站獨立部分的一段內容；例 如，雜誌或新聞的文章，或部落格文章。」

記住一個頁面裡可以有多個article標籤；例如一個部落格首頁可能有最新的十篇文章，每一篇 包含在一個article標籤內。 Article也可以透過使用section標籤分成多個段落，然而當你規劃你的結構時需要稍微仔細一些，否則你容易引 起以一些難看的標籤大雜燴結尾的情況。

另一個相當模糊的標籤，aside元素用於「與組成文件主要的正文流內容無關的」內容。那表示 一條附加的評論，內聯的腳註，引用，註解或像你看到的在這篇文章右邊的更多典型的邊欄內容。

根據WHATWG的註釋，看起來

可以用於所有的這些情況，儘管你邊 欄裡的引用和標籤雲有著很大的不同。

沒人說HTML 5是完美的！

Footer的用處也應該是很明顯的，除了可能你不清楚可以擁有多個腳標。換句話說，除了通常 在大多數頁面底部看到的主腳標，段落也可以含有腳標。

把他們放在一起

讓我們用新標籤重新寫我們原來的範例：

非常清楚，而且容易理解，不是麼？一些註釋：我們可以在header標籤中包含我們 的

My Article

標題。我沒有這樣做，因為h1元素已經表達了標題的含義，但如果你還有發布日期，署名或其他資料在你文章的頂部， 為標籤集添加一個header容器標籤是一個很好的選擇。

同時注意我們可以在article元素下添加第二個footer元素來包含諸如翻頁導航，相關 文章或其他內容。

為新標籤寫樣式

在大多數瀏覽器中，所有你需要做的就是像你通常做的那樣，為在新標籤上應用樣式表，簡單的定義 你的樣式。但請確認為每一個元素添加了display:block;規則，無論如何，從現在開始。經過一段時間後，當瀏覽器開始標準化，並支援新元素後， 那就不必要了。

例如，讓我們在我們的header裡應用一些樣式：

記住，你仍然可以為這些標籤添加類別和ID屬性。所以，如果你想要單獨為一個導航設定樣式，你可 以輕易的為這個標籤添加一個類別或樣式，就像這樣：

然後你可以套用一個樣式：

相容舊的瀏覽器

但等一下，IE怎麼辦？這些樣式完全不能在IE6下工作。如果你仍然需要支援像IE6一類遺產 般的瀏覽器，這裡有一個解決方法。 IE6解析和顯示這些標籤還好，但你不能對他們設定任何CSS。解決方法是使用一點JavaScript。

我們只需要讓IE去為我們使用createElement方法創造的的HTML 5標籤設定樣式。在HTML 5檔案的head標籤內加入此東西。或者，你可以把他保存在一個特定的文件裡，並用這種方法包含。

我知道你在想什麼：「哥，你根本沒有為那個腳本標籤定義一個MIME類型。」

你根本不需要在HTML 5做這些事。在HTML 5中，所有的腳本都被假定為type=”text/javascript”，所以沒有必要讓屬性把你的腳本標籤搞得亂七八糟（除非你的腳本並不是 JavaScript）。

這解決了IE的問題，但我們並沒有擺脫困境。現在被證明Gecko渲染引擎有一個bug，導致 了Firefox2和Camino的一些版本在這些標籤上卡住。

這兒有兩個方法來處理這個bug，沒有一個是理想的。更多的細節請看HTML5doctor的這篇文章。這篇文章同時附有一個讓所有HTML 5元素都生效的方便腳本。

記住，儘管Firefox 2的使用率很快在所有網站流量中降到了10%以下，但單純忽略這個bug可能還是需要根據你網站的訪客來定。

現在你可以使用HTML 5了，但你會用麼？

簡短的回答是：我們會。

複雜一點的是：那要看站點了。如果你指責重新製作CNN主頁，好吧，你可能會有一點抗拒，直到 瀏覽器​​的支援變好些。但如果你要給你的部落格改版，我們支持你。這裡還有一些可以幫助你的Wordpress插 件，如果你正在使用這麼流行的發布系統。這兒是一個Jeff Starr製作的HTML 5主題。

同時，試試以網站為主的HTML 5美術館，並且查看原始碼，看看他們做了什麼。

儘管如此，如果IE的缺點阻止你了，這樣考慮吧：就連Google也在他們的主要搜尋頁面上使 用了HTML 5的文檔類型。就算如果你不使用所有新的結構標籤，你可以至少利用一下簡潔的腳本聲明和下次我們會介紹的關於一些非結構的語義標籤。