39個(gè)讓你受益的HTML5教程

目錄(?)[+]

閑話(huà)少說(shuō)，本文作者為大家收集了網(wǎng)上學(xué)習HTML5的資源，期望它們可以幫助大家更好地學(xué)習HTML5. 好人啊! 不過(guò),作者原來(lái)說(shuō)的40個(gè)只有39個(gè)，因為第5個(gè)和第8個(gè)是重復的。

原文在此!

1. 五分鐘入門(mén)HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman

毫無(wú)疑問(wèn),HTML5是一個(gè)熱門(mén)話(huà)題。如果你需要一個(gè)迅速了解HTML基礎的速成課程,那這就是你需要的。我將介紹新的語(yǔ)義標簽(markups)、 使用canvas進(jìn)行繪制和動(dòng)畫(huà)、視頻(<video>)和音頻(<audio>)的支持, 以及如何在舊瀏覽器中使用HTML5?？赡苡悬c(diǎn)超過(guò)5分鐘,但我保證我會(huì )言簡(jiǎn)意賅。來(lái)吧，這是絕對值得一讀!

2. HTML5 Canvas開(kāi)發(fā)者指南 (The Developers Guide to HTML5 Canvas)  By Malcolm Sheridan

毋庸置疑, canvas元素是HTML5中最神的功能. 開(kāi)發(fā)人員可以使用它開(kāi)發(fā)真正的富網(wǎng)頁(yè)應用程序(rich web application)而不需要安裝瀏覽器安裝像Adobe Flash播放器那樣的插件(plugins)?，F代的瀏覽器,比如Chrome,Firefox和Internet Explorer 9和10都支持它。 但什么是HTML5 canvas? 你如何使用它來(lái)創(chuàng )建富網(wǎng)頁(yè)應用程序呢?

3.如何使用HTML5 canvas創(chuàng )建一個(gè)可視化的圖像庫(How to Create a Visual Library of Images in HTML5 Canvas) by David Catuhe

作為對UI很挑剔的我, 無(wú)法拒絕使用HTML5 Canvas開(kāi)發(fā)。它采用了整套全新的方法來(lái)實(shí)現網(wǎng)頁(yè)圖像和數據的可視化。在本教程中,我將帶您把它應用你的網(wǎng)頁(yè)上。

4.創(chuàng )建HTML5應用:你應當了解的那些事 (Building Apps with HTML5: What You Need to Know) by Brandon Satrom

HTML5出馬,網(wǎng)頁(yè)將與眾不同。毫無(wú)疑問(wèn)你已經(jīng)聽(tīng)說(shuō)過(guò)這類(lèi)說(shuō)辭。為什么?  HTML5有可能改變我們的互聯(lián)網(wǎng),但它也被吹上天了。更重要的是,它的真正含義仍然難以捉摸的。這是一個(gè)廣泛的話(huà)題, 因此不要讓自己束縛于HTML5, 而不知道從哪里開(kāi)始。

5. 讓你的HTML5視頻可以在移動(dòng)設備上播放 (Make your HTML5 video play on mobile devices) by Nigel Parker

當被問(wèn)及如何通過(guò)開(kāi)始使用HTML5視頻時(shí),我會(huì )反問(wèn)"你想解決什么問(wèn)題?" 幾乎每次我都聽(tīng)到,"我只想要我的視頻可以在移動(dòng)設備上播放。 " 很容易! 我將向您展示如何開(kāi)始。

6. 6堂完備的HTML5和CSS課程 (HTML 5 and CSS: Six Complete Lessons)

HTML 5與CSS的強強聯(lián)合正在成為新的熱門(mén)語(yǔ)言。我也很高興的宣布我們已經(jīng)創(chuàng )建了六個(gè)完整的課程,涵蓋最有趣的和動(dòng)態(tài)HTML 5的新特性,是專(zhuān)為準備進(jìn)入到Web開(kāi)發(fā)的你準備的。每堂課都有PPT, 完整的帶有實(shí)作的閱讀任務(wù)。一個(gè)單一的教程約75 - 100分鐘的時(shí)間。說(shuō)是完整，那完全不是蓋的！

7.HTML5和CSS3，你將要使用的技術(shù)! (HTML 5 and CSS 3: The Techniques You’ll Soon Be Using)

在本教程中,我們將使用HTML 5和CSS 3建立一個(gè)博客頁(yè)面。如果你已經(jīng)了解HTML和CSS,應該很容易學(xué)完。

8. 讓HTML5音樂(lè )響起來(lái) (Crank Up the Volume with HTML5 Music) By Ed Tittel

HTML5讓網(wǎng)絡(luò )音樂(lè )卷土重來(lái)。使用<audio>標記將不需要外部的音樂(lè )播放器, 而允許由你的網(wǎng)頁(yè)自己播放你的音樂(lè )。

9.釋放HTML5 <audio>的能量 ( Unlocking the power of HTML5 <audio>) By Giorgio Sardo

音樂(lè )是咱們生活的旋律! 現在,HTML5 <audio>元素允許Web開(kāi)發(fā)人員在應用中嵌入聲音。靈活的控制加上平臺整合,允許多個(gè)場(chǎng)景效果, 從簡(jiǎn)單的背景音效到到游戲中更復雜的音頻引擎。

10.HTML5應用:定位 (HTML5 Apps: Positioning with Geolocation)

定位(positioning and geolocation)是每個(gè)基于地理位置應用的核心。在本教程中,您將學(xué)習地理定位(geolocation)功能和基本原理, 并把它應用在你的下一個(gè)HTML5應用程序中!

11.測驗:看看你了解HTML5多少? (Quiz : How Well do you Know HTML5?)

這是一個(gè)很棒的地方, 來(lái)測測試你的HTML5基礎知識。不要太驕傲! 它們會(huì )讓你求饒的！祝你好運！

12.如何讓所有瀏覽器都正確解析HTML5 (How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6)

HTML 5提供了一些很棒的新特性, 代碼可讀性, 語(yǔ)義化的布局。然而,HTML 5的支持仍在不斷完善中,Internet Explorer是最遲一個(gè)添加支持的。在本教程中,我們將使用HTML5創(chuàng )建一個(gè)常見(jiàn)的布局, 然后使用JavaScript和CSS使我們的設計向后兼容IE。是的,包括IE 6!

13.如何創(chuàng )建一個(gè)跨瀏覽器的表單(How to Build Cross-Browser HTML5 Forms)

第一個(gè)HTML5所見(jiàn)即所得的努力是Web Forms 2.0, 最初叫做XForms Basic。 后來(lái),它被納入HTML5, 隨后被剝奪了重復模式, 最終演化為我們今天所熟知的HTML5表單(Forms)。

14. HTML5速查表 (HTML 5 Cheat Sheet (PDF))

 XHTML 2工作小組預計2009年底停止工作, 相反地，W3C正計劃增加在HTML5上的投入。甚至盡管HTML 5到2022年也不會(huì )被完全支持,但并不影響它正被廣泛的采用！我們決定完成一個(gè)方便的可打印HTML 5小抄,列出了目前支持的所有標記,它們的描述,它們的屬性, 以及他們是否在HTML 4中。

15. 使用HTML5設計博客的基礎知識 (Basic Knowledge Designing a blog with html5)

大部分的HTML 5的特性集包含了JavaScript API,使它更容易開(kāi)發(fā)交互式頁(yè)面, 但是有大量的新元素,為常規的Web 1.0頁(yè)面提供了額外的語(yǔ)義。為了研究這些,讓我們看看如何在博客中應用它們。

16. HTML5中的結構化標簽 (Structural Tags in HTML5)

HTML5規范已經(jīng)增加了一些有趣和有用的標記用于結構化。對于多數應用,這些標簽將會(huì )取代典型的div條目。所以讓我們深入挖掘一下。

17.編寫(xiě)一個(gè)CSS3&HTML5的單網(wǎng)頁(yè)模板(Coding a CSS3 & HTML5 One-Page Website Template)

搞Web開(kāi)發(fā), 你必須要跟上最新的技術(shù), 這樣才能使你站在最前面。這也是一個(gè)以驚人的速度變化的領(lǐng)域?，F在的標準很快將在幾年內被淘汰。所以你要跟上腳步，來(lái)學(xué)習一下CSS3與HTML5搭檔的應用。(后面一句是我加的! ^_^)

18. HTML5可視化的速查表(HTML5 Visual Cheat Sheet)

這個(gè)速查表本質(zhì)上是一個(gè)簡(jiǎn)單的視覺(jué)表格,包含所有的HTML標簽和相關(guān)HTML5屬性的列表。簡(jiǎn)單的視覺(jué)風(fēng)格讓你一眼就能發(fā)現你正在尋找的東東。請留下你的評論! 感謝每一個(gè)建議!

Download

19. HTML5 Canvas速查表 (HTML5 Canvas Cheat Sheet)

Download

20.用HTML5設計并編寫(xiě)一個(gè)很酷的iPhone應用 (Design & Code a Cool iPhone App Website in HTML5)

在本教程中我們將會(huì )體驗到如何來(lái)構建一個(gè)很酷的iPhone應用程序, 使用的不是Cocoa touch, 而是HTML5和一些CSS3的視覺(jué)效果。

21. 使用HTML5 Canvas優(yōu)化圖像顯示 (Optimize Images With HTML5 Canvas)

每個(gè)網(wǎng)站都要用圖片。如果你真的很為你的訪(fǎng)客著(zhù)想,那么就花一些時(shí)間優(yōu)化你的圖像顯示。請記住,現代Web瀏覽器有足夠的力量在用戶(hù)的電腦上提升圖像顯示能力。在本文中,我將演示一個(gè)可行的解決方案。

22.HTML5和文檔的顯示算法(HTML5 And The Document Outlining Algorithm)

現在,我們都知道應該使用HTML5制作網(wǎng)站。這里要討論的是如何正確使用HTML5。重要的是HTML5有一個(gè)還沒(méi)有被廣為理解的內容:布局(sectioning),包括:段落(section),條目(article), 頁(yè)邊欄目(aside)和導航。理解這部分的內容,我們需要掌握文件的顯示算法(outlining algorithm)。

23. HTML5語(yǔ)義學(xué) (HTML5 Semantics)

HTML5有許多令人興奮的新API: 本地存儲、應用程序緩存,Web Worker,2D繪圖等。但是不要忘記,HTML5帶給我們的30個(gè)新元素來(lái)標記文件和應用程序。 

24. 從頭編寫(xiě)HTML5布局(Coding An HTML 5 Layout From Scratch)

 HTML5和CSS3, 所有這些技術(shù)都是純粹的工具, 在等待一個(gè)熟練的開(kāi)發(fā)人員應用于正確的項目。為此，我們得到了一個(gè)全新的概念并修正我們的編碼習慣以保證我們的網(wǎng)頁(yè)功能。

25.與HTML5視頻同步 (Syncing Content With HTML5 Video)

相對于用戶(hù)交互限制于文本、鏈接、圖片和表格的HTML4, HTML5更傾向于使用多媒體。包括從一個(gè)通用的<object>元素改為更高層次的<video>和<audio>元素, 以及一套豐富的API來(lái)供在JavaScript中使用。

26.進(jìn)入HTML5物理定位的大千世界 (Entering The Wonderful World of Geo Location with HTL5)

27.如何使用HTML5 Canvas來(lái)創(chuàng )建進(jìn)度條 (How to create a Progress bar with HTML5 Canvas)

Web 2.0的進(jìn)度條有了圓角、深度和體積,即陰影和梯度。

28. CSS3和HTML5中的提示欄 (Tooltips in CSS3 and HTML5)

僅僅使用CSS3和HTML5來(lái)實(shí)現簡(jiǎn)單的提示欄。

29.使用HTML5 Canvas創(chuàng )建一個(gè)條形圖 (Create a Bar Graph with HTML5 Canvas and JavaScript)

本教程將展示如何創(chuàng )建一個(gè)簡(jiǎn)單的條形圖(HTML5 Canvas+JavaScript)。這個(gè)代碼可用本文末尾的下載。

30.轉換到HTML5 (Making the Transition to HTML5)

毫無(wú)疑問(wèn),每個(gè)人都在談?wù)揌TML5。但是并不太清楚是誰(shuí)在使用以及如何使用。

31. JavaScript人臉識別+Canvas+Video=HTML眼鏡! (JavaScript Face Detection + Canvas + Video = HTML5 Glasses!)

我一直想把CCV JavaScript庫的人臉識別用起來(lái)。這個(gè)庫給出的幾個(gè)示例都是用于靜態(tài)圖像,但是通過(guò)查看代碼,了解到它的顯示使用的是畫(huà)布(canvas)元素。于是, 我把它用在了HTML5視頻的每一幀的處理上。

32.HTML5的內容可編輯特性 (Content editable Feature in HTML5)

 HTML5有一個(gè)創(chuàng )新可以使瀏覽器中的網(wǎng)頁(yè)成為能夠編輯的頁(yè)面，這一特性稱(chēng)為可編輯內容(content editable)。它適用于所有現代瀏覽器。為了使頁(yè)面編輯,你需要把標簽屬性contenteditable = " true "。在這篇文章中我將展示這個(gè)新特性。

33.HTML5快速學(xué)習指南 (HTML5 Quick Learning Guide)

HTML5語(yǔ)同時(shí)法兼容HTML4和XHTML1。 

34.HTML5 canvas基礎 (HTML5 canvas – the basics)

對于每個(gè)canvas元素可以使用“上下文(context)”(想像一下繪圖板),你可以在其中使用JavaScript命令繪制。瀏覽器則為繪圖功能實(shí)現多個(gè)畫(huà)布上下文和不同的API。

35. 如何讓HTML5工作在IE和FireFox2中 (How to get HTML5 working in IE and Firefox 2)

HTML 5可能是最新和最好的技術(shù),但一些瀏覽器沒(méi)有原生支持新的語(yǔ)義元素。讓我們暫時(shí)忘記這些性感的功能,專(zhuān)注于如何讓元素正常呈現出來(lái)。

36. HTML5中的極致表單 (Making Forms Fabulous with HTML5)

并沒(méi)有很多人對表單感興趣, 但HTML5仍然帶來(lái)一些大的改進(jìn)。新表單元素、屬性、輸入類(lèi)型,基于瀏覽器的驗證、CSS3的樣式技術(shù)和FormData對象可以讓你輕松愉快的創(chuàng )建表單。

37.新的HTML5表單元件 (New HTML5 Form Elements)

表單是任何網(wǎng)站中最基本的特性。在HTML表單元素中可以使用包括文本框、復選框、單選框、按鈕、下拉列表、密碼錄入框和文件選擇器等。重點(diǎn)是要提高表單元件的可用性和有效性,這是好UI的基石,應當給予高度關(guān)注。

38. HTML5中的占位符 (Placeholder Text in HTML5)

 HTML5帶給Web表單的第一個(gè)改進(jìn),就是可在文本框中設置占位符。占位符文字當字段內容為空時(shí)會(huì )被顯示出來(lái)，一旦你點(diǎn)擊(或移入)輸入框中,占位符文本就消失了。

39. HTML5輸入相關(guān)屬性的支持 (HTML5 inputs and attribute support)

轉載請注明出處:http://blog.csdn.net/horkychen