29個(gè)非常實(shí)用的HTML 5實(shí)例、教程和技巧
原創(chuàng)【51CTO精選譯文】對(duì)于想要著手新建Web項(xiàng)目的人來(lái)說(shuō)，HTML5實(shí)例確實(shí)很能給人以靈感，畢竟HTML5是未來(lái)的網(wǎng)頁(yè)標(biāo)記技術(shù)，我們都需要為此作好準(zhǔn)備。HTML5是作為HTML(超文本標(biāo)記語(yǔ)言)的下一個(gè)主要版本而開(kāi)發(fā)的。主要的市場(chǎng)和互聯(lián)網(wǎng)領(lǐng)導(dǎo)企業(yè)已經(jīng)在轉(zhuǎn)而改用HTML 5平臺(tái)。由于蘋果和谷歌都大力推行這項(xiàng)標(biāo)準(zhǔn)，以便從事更高級(jí)的Web開(kāi)發(fā)，隨著更多的公司支持HTML 5的先進(jìn)特性，我們現(xiàn)在看到實(shí)施HTML 5的網(wǎng)站遍地開(kāi)花。
51CTO推薦專題：HTML 5 下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)詳解
由于Flash在Web和互聯(lián)網(wǎng)應(yīng)用程序中的應(yīng)用越來(lái)越少，HTML5為Web設(shè)計(jì)師和開(kāi)發(fā)者打開(kāi)了新的大門。在這種情況下，每一個(gè)Web開(kāi)發(fā)者的確有必要了解HTML 5的基本教程、技巧和術(shù)語(yǔ)。
下面我們介紹了一份完整的列表——如果你是位Web開(kāi)發(fā)者，絕對(duì)不想錯(cuò)過(guò)這30余個(gè)HTML5實(shí)例、教程和技巧。
不妨先看一下幾個(gè)HTML5實(shí)例
1. 用HTML5創(chuàng)建移動(dòng)設(shè)備上的離線Web應(yīng)用程序
IBM的技術(shù)庫(kù)里面有一篇由IT架構(gòu)師Dietmar Krueger撰寫的內(nèi)容翔實(shí)的文章。作者在該文中描述和介紹了為什么為操作系統(tǒng)和移動(dòng)平臺(tái)編寫應(yīng)用程序困難重重。作者選擇了走開(kāi)放的道路，通過(guò)HTML 5來(lái)進(jìn)行開(kāi)發(fā)，而不是依賴學(xué)習(xí)針對(duì)特定平臺(tái)的語(yǔ)言，比如面向iPhone平臺(tái)的帶Cocoa框架的Objective-C語(yǔ)言。這篇文章介紹得非常清晰、深入淺出。
這個(gè)網(wǎng)站到處都有HTML5實(shí)例，還有很不錯(cuò)的實(shí)例。有些是本人一起改動(dòng)的HTML 5實(shí)例和演示。點(diǎn)擊瀏覽器支持圖標(biāo)或技術(shù)標(biāo)簽，就可以過(guò)濾演示(過(guò)濾器是“或”過(guò)濾器)。
3. WTF is HTML5
這一頁(yè)概述了HTML5，非常實(shí)用，還有很不錯(cuò)的HTML5實(shí)例!
4. 用PHP以及HTML 5構(gòu)建一個(gè)實(shí)時(shí)新聞博客系統(tǒng)
這個(gè)教程表明了如何用HTML 5和CSS3來(lái)構(gòu)建一個(gè)新聞網(wǎng)站。HTML和CSS中的每一行代碼都附有解釋。
HTML 5的功能特性大部分涉及JavaScript應(yīng)用編程接口(API)，因而讓你更容易開(kāi)發(fā)出交互網(wǎng)頁(yè)，但是有一批新的元素讓你可以為傳統(tǒng)的Web 1.0網(wǎng)頁(yè)添加額外的語(yǔ)義。這個(gè)教程通過(guò)為你提供博客布局，以便研究分析這些元素。
#p#
在最近一年左右的時(shí)間里，萬(wàn)維網(wǎng)聯(lián)盟(W3C)最近加大力度開(kāi)發(fā)的下一代HTML：HTML 5發(fā)展勢(shì)頭相當(dāng)猛。這是個(gè)龐大項(xiàng)目，不但涵蓋HTML的結(jié)構(gòu)，還涵蓋解析模型、錯(cuò)誤處理模型、文檔對(duì)象模型(DOM)、資源獲取算法、媒體內(nèi)容、2D繪圖、數(shù)據(jù)模板、安全模型、網(wǎng)頁(yè)裝入模塊、客戶端數(shù)據(jù)存儲(chǔ)等方面。
HTML的結(jié)構(gòu)、語(yǔ)法和語(yǔ)義也進(jìn)行了修改，一些內(nèi)容在Lachlan Hunt所著的《HTML 5先睹為快》一書(http://www.alistapart.com/articles/previewofhtml5)中有所提及。
在本文中，我們不妨只關(guān)注HTML的語(yǔ)義。它是作者多年來(lái)關(guān)注的方面;他認(rèn)為，語(yǔ)言對(duì)HTML的未來(lái)來(lái)說(shuō)至關(guān)重要。
概述了HTML 5瀏覽器兼容性。
Dive Into HTML 5力求詳細(xì)介紹從HTML 5規(guī)范及其他優(yōu)秀標(biāo)準(zhǔn)精挑細(xì)選的一系列特性。時(shí)間允許的話，我會(huì)定期發(fā)布草案(Drafts)。
你在這里能找到非常實(shí)用的兼容性表，介紹了HTML5、CSS3、SVG及其他即將推出的Web技術(shù)中的特性。
#p#
HTML 5規(guī)范里面有一堆好東東，其中之一是Canvas，這是一種使用JavaScript，以編程方式來(lái)繪圖的方法。 我們會(huì)在本文中介紹Canvas的基本細(xì)節(jié)，并演示了可以用實(shí)例和鏈接來(lái)實(shí)現(xiàn)什么。
12. 用HTML5表單大顯身手
表單通常被認(rèn)為是我們必須添加標(biāo)記和樣式的討厭鬼。我不敢茍同：表單(其重要性不亞于表)是我們所要處理的最激動(dòng)人心的東西。
我們?cè)谶@里要看一下如何運(yùn)用一些先進(jìn)的CSS和***的CSS3技巧，為漂亮的HTML 5表單添加樣式。你看了本文后，我保證你也想為自己的表單添加樣式。
13. 將Web設(shè)計(jì)概念編程成為HTML5
14. 利用HTML 5和CSS3，編寫向后兼容的單頁(yè)網(wǎng)站模板
HTML5是Web開(kāi)發(fā)的未來(lái);但信不信由你，你現(xiàn)在可以使用它。HTML5非常顧及語(yǔ)義和可訪問(wèn)性，因?yàn)槲覀儧](méi)必要到處添加毫無(wú)意義的div標(biāo)簽。它為導(dǎo)航和腳注等常用元素引入了有意義的標(biāo)簽，這些標(biāo)簽極其合理，也更自然。
這概述了HTML5和CSS3的基本內(nèi)容，同時(shí)仍關(guān)注舊版瀏覽器。在我們開(kāi)始之前，記下這個(gè)問(wèn)題的答案。
網(wǎng)址：http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/
#p#
誠(chéng)然，HTML5和CSS3都在完善之中，這種情況還會(huì)持續(xù)一段時(shí)日，但沒(méi)有理由不立即開(kāi)始使用。畢竟，時(shí)間證明實(shí)施未完成的規(guī)范確實(shí)可行，很容易換成W3C建議的完整版。這時(shí)候，漸進(jìn)增強(qiáng)和適度降級(jí)就能發(fā)揮作用。這里有一些很不錯(cuò)的HTML5實(shí)例。
16. 如何開(kāi)發(fā)一個(gè)HTML5 iPhone應(yīng)用程序
我知道，你郁悶了差不多有一年。所有鐵桿派的Objective-C開(kāi)發(fā)者一直在爭(zhēng)先恐后地為iPhone編寫應(yīng)用程序。你也許甚至試著讀一兩篇關(guān)于為iPhone進(jìn)行開(kāi)發(fā)的教程，但是發(fā)現(xiàn)很難學(xué)會(huì)。
你可以運(yùn)用已經(jīng)擁有的技巧來(lái)進(jìn)行開(kāi)發(fā)：HTML(5)、CSS和JavaScript。
這個(gè)教程表明了如何開(kāi)發(fā)一個(gè)離線的HTML5 iPhone應(yīng)用程序。更具體地說(shuō)，我會(huì)逐步介紹開(kāi)發(fā)俄羅斯方塊游戲的過(guò)程。
17. 用HTML 5和CSS3構(gòu)建一個(gè)精致的網(wǎng)站
學(xué)習(xí)通過(guò)五個(gè)宏步驟，運(yùn)用大腦、鉛筆、紙、Photoshop、HTML和CSS來(lái)構(gòu)建一個(gè)精致的網(wǎng)站。但幸好技術(shù)并沒(méi)有止步，我們將來(lái)還有另外兩個(gè)朋友：HTML 5和CSS3來(lái)設(shè)計(jì)更好的網(wǎng)站。
18. 編寫CSS3和HTML5單頁(yè)網(wǎng)站模板
看看如何使用CSS3和jQuery帶來(lái)的一些新特性，以及scrollTo插件，創(chuàng)建一個(gè)HTML5 Web模板。由于HTML5仍在完善中，你還有個(gè)辦法：可以在這里(http://tutorialzine.com/2010/02/free-xhtml-css3-website-template/)下載XHTML版的模板。
19. 用HTML 5設(shè)計(jì)和編寫一個(gè)酷酷的iPhone應(yīng)用網(wǎng)站
HTML5絕對(duì)是眼下的寵兒，每個(gè)設(shè)計(jì)者都為它的發(fā)布而激動(dòng)。在該教程中，我們將領(lǐng)略通過(guò)使用HTML 5結(jié)構(gòu)來(lái)編寫酷酷的iPhone應(yīng)用網(wǎng)站會(huì)怎樣，并運(yùn)用一些CSS3效果來(lái)添加可視化樣式。
20. HTML 5和CSS 3：你很快就會(huì)使用的技巧
在這個(gè)教程中，我們將使用來(lái)自HTML 5和CSS 3的下一代技巧，構(gòu)建一個(gè)博客網(wǎng)頁(yè)。該教程旨在演示等規(guī)范完成后、瀏覽器開(kāi)發(fā)商實(shí)施這些規(guī)范后，我們將如何構(gòu)建網(wǎng)站。如果你已經(jīng)知道HTML和CSS，應(yīng)該很容易按步驟行事。
#p#
21. 面向初學(xué)者的HTML 5：現(xiàn)在就使用，它很容易!
面向初學(xué)者的HTML5有很不錯(cuò)的HTML5實(shí)例?，F(xiàn)在就使用，它很容易!本文饒有趣味地介紹了HTML5的一些基本方面。
22. Rocking HTML5
這里演示的是一個(gè)HTML5網(wǎng)站，它非常詳細(xì)而清晰地概述了HTML5的元素。
23. 用HTML 5構(gòu)建網(wǎng)頁(yè)
HTML 5不是構(gòu)建語(yǔ)義更豐富的Web的下一個(gè)重要步驟，就是會(huì)用另一組不全面的標(biāo)簽和標(biāo)記淹沒(méi)Web的災(zāi)難，這取決于你在問(wèn)誰(shuí)了。
不管是哪一派觀點(diǎn)，存在的問(wèn)題在于，目前外面使用HTML 5的網(wǎng)站為數(shù)不多;所以要解決明顯的問(wèn)題，理論上的辦法仍然基本上沒(méi)有得到考驗(yàn)。
話雖如此，不難看到下一代Web標(biāo)記工具存在的好處和潛在問(wèn)題。
24. HTML5速查表
網(wǎng)址：http://www.html5test.com/
這不是HTML5實(shí)例，HTML 5 Visual Cheat Sheet是我為Web設(shè)計(jì)者和開(kāi)發(fā)者設(shè)計(jì)的一份實(shí)用的速查表。這份速查表實(shí)際上就是一個(gè)簡(jiǎn)單的可視網(wǎng)格，列出了所有HTML標(biāo)簽以及HTML版本4.01及/或5支持的相關(guān)屬性。我用來(lái)設(shè)計(jì)該速查表的可視化樣式讓你一眼就能看清楚所要尋找的東西。
#p#
25. html5test.com
這是個(gè)瀏覽器測(cè)試，有許多細(xì)節(jié)。非常實(shí)用。
我們可以體驗(yàn)一下這項(xiàng)技術(shù)。我們創(chuàng)建了一個(gè)小試驗(yàn)，裝入100條與HTML5有關(guān)的Twitter消息，然后用基于Javascript的粒子引擎來(lái)顯示它們。每個(gè)粒子代表一條Twitter消息——點(diǎn)擊其中一個(gè)粒子，它就會(huì)在屏幕上顯示(點(diǎn)擊圖像就能看到它的實(shí)際運(yùn)行。)
你在這里可以找到一組極出色的基于HTML5 canvas的試驗(yàn)，你會(huì)從此愛(ài)上HTML5。
28. HTML 5速查表(PDF)
29. html5手冊(cè)
好了，你看到HTML 5已出現(xiàn)在我們面前，那你應(yīng)該使用它嗎?
我通常認(rèn)為這取決于你在開(kāi)發(fā)的網(wǎng)站。如果它是訪問(wèn)量很大的商業(yè)網(wǎng)站，那么你可能需要再忍一陣子。不過(guò)如果它是個(gè)人博客，我認(rèn)為現(xiàn)在就可以入手，學(xué)習(xí)如何使用HTML 5中的新特性。
英文：http://www.tripwiremagazine.com/2010/07/30-very-useful-html5-tutorials-techniques-and-examples-for-web-developers.html
【編輯推薦】
