【HTML5 1】39個讓你受益的HTML5教程

閒話少說，本文做者爲你們收集了網上學習HTML5的資源，指望它們可以幫助你們更好地學習HTML5. 好人啊! 只是,做者原來講的40個僅僅有39個，因爲第5個和第8個是反覆的。

原文在此!

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

毫無疑問,HTML5是一個熱門話題。假設你需要一個迅速瞭解HTML基礎的速成課程,那這就是你需要的。我將介紹新的語義標籤(markups)、 使用canvas進行繪製和動畫、視頻(<video>)和音頻(<audio>)的支持, 以及怎樣在舊瀏覽器中使用HTML5。可能有點超過5分鐘,但我保證我會言簡意賅。來吧，這是絕對值得一讀!

 

2. HTML5 Canvas開發人員指南 (The Developers Guide to HTML5 Canvas)  By Malcolm Sheridan

毋庸置疑, canvas元素是HTML5中最神的功能. 開發者可以使用它開發真正的富網頁應用程序(rich web application)而不需要安裝瀏覽器安裝像Adobe Flash播放器那樣的插件(plugins)。現代的瀏覽器,比方Chrome,Firefox和Internet Explorer 9和10都支持它。 但什麼是HTML5 canvas? 你怎樣使用它來建立富網頁應用程序呢?

 

3.怎樣使用HTML5 canvas建立一個可視化的圖像庫(How to Create a Visual Library of Images in HTML5 Canvas) by David Catuhe

做爲對UI很是挑剔的我, 沒法拒絕使用HTML5 Canvas開發。它採用了整套全新的方法來實現網頁圖像和數據的可視化。在本教程中,我將帶您把它應用你的網頁上。

 

4.建立HTML5應用:你應當瞭解的那些事 (Building Apps with HTML5: What You Need to Know) by Brandon Satrom

HTML5出馬,網頁將不同凡響。毫無疑問你已經據說過這類說辭。爲何?  HTML5有可能改變咱們的互聯網,但它也被吹上天了。更重要的是,它的真正含義仍然難以捉摸的。這是一個普遍的話題, 所以不要讓本身束縛於HTML5, 而不知道從哪裏開始。

 

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

當被問及怎樣經過開始使用HTML5視頻時,我會反問"你想解決什麼問題?" 差點兒每次我都聽到,"我僅僅想要個人視頻可以在移動設備上播放。 " 很是easy! 我將向您展現怎樣開始。

 

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

HTML 5與CSS的強強聯合正在成爲新的熱門語言。我也很是高興的宣佈咱們已經建立了六個完整的課程,涵蓋最有趣的和動態HTML 5的新特性,是專爲準備進入到Web開發的你準備的。每堂課都有PPT, 完整的帶有實做的閱讀任務。一個單一的教程約75 - 100分鐘的時間。說是完整，那全然不是蓋的！

 

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

在本教程中,咱們將使用HTML 5和CSS 3創建一個博客頁面。假設你已經瞭解HTML和CSS,應該很是easy學完。

 

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

HTML5讓網絡音樂捲土重來。使用<audio>標記將不需要外部的音樂播放器, 而贊成由你的網頁本身播放你的音樂。

 

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

音樂是我們生活的旋律! 現在,HTML5 <audio>元素贊成Web開發者在應用中嵌入聲音。靈活的控制加上平臺整合,贊成多個場景效果, 從簡單的背景音效到到遊戲中更復雜的音頻引擎。

 

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

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

 

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

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

 

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

HTML 5提供了一些很是棒的新特性, 代碼可讀性, 語義化的佈局。然而,HTML 5的支持仍在不斷無缺中,Internet Explorer是最遲一個加入支持的。在本教程中,咱們將使用HTML5建立一個常見的佈局, 而後使用JavaScript和CSS使咱們的設計向後兼容IE。是的,包含IE 6!

 

13.怎樣建立一個跨瀏覽器的表單(How to Build Cross-Browser HTML5 Forms)

第一個HTML5所見即所得的努力是Web Forms 2.0, 最初叫作XForms Basic。 後來,它被歸入HTML5, 隨後被剝奪了反覆模式, 終於演化爲咱們今天所熟知的HTML5表單(Forms)。

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

 XHTML 2工做小組估計2009年末中止工做, 相反地，W3C正計劃添加在HTML5上的投入。甚至雖然HTML 5到2022年也不會被全然支持,但並不影響它正被普遍的採用！咱們決定完畢一個方便的可打印HTML 5小抄,列出了眼下支持的所有標記,它們的描寫敘述,它們的屬性, 以及他們是否在HTML 4中。

 

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

大部分的HTML 5的特性集包括了JavaScript API,使它更easy開發交互式頁面, 但是有大量的新元素,爲常規的Web 1.0頁面提供了額外的語義。爲了研究這些,讓咱們看看怎樣在博客中應用它們。

 

 

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

HTML5規範已經添加了一些有趣和實用的標記用於結構化。對於多數應用,這些標籤將會代替典型的div條目。因此讓咱們深刻挖掘一下。

 

 

17.編寫一個CSS3&HTML5的單網頁模板(Coding a CSS3 & HTML5 One-Page Website Template)

搞Web開發, 你必須要跟上最新的技術, 這樣才幹使你站在最前面。這也是一個以驚人的速度變化的領域。現在的標準很是快將在幾年內被淘汰。因此你要跟上腳步，來學習一下CSS3與HTML5搭檔的應用。(後面一句是我加的! ^_^)

 

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

這個速查表本質上是一個簡單的視覺表格,包括所有的HTML標籤和相關HTML5屬性的列表。簡單的視覺風格讓你一眼就能發現你正在尋找的東東。請留下你的評論! 感謝每一個建議!

Download

 

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

Download

 

20.用HTML5設計並編寫一個很是酷的iPhone應用 (Design & Code a Cool iPhone App Website in HTML5)

在本教程中咱們將會體驗到怎樣來構建一個很是酷的iPhone應用程序, 使用的不是Cocoa touch, 而是HTML5和一些CSS3的視覺效果。

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

每個站點都要用圖片。假設你真的很是爲你的訪客着想,那麼就花一些時間優化你的圖像顯示。請記住,現代Web瀏覽器有足夠的力量在用戶的電腦上提高圖像顯示能力。在本文中,我將演示一個可行的解決方式。

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

現在,咱們都知道應該使用HTML5製做站點。這裏要討論的是怎樣正確使用HTML5。重要的是HTML5有一個尚未被廣爲理解的內容:佈局(sectioning),包含:段落(section),條目(article), 頁邊欄目(aside)和導航。理解這部分的內容,咱們需要掌握文件的顯示算法(outlining algorithm)。

 

23. HTML5語義學 (HTML5 Semantics)

HTML5有不少使人興奮的新API: 本地存儲、應用程序緩存,Web Worker,2D畫圖等。但是不要忘記,HTML5帶給咱們的30個新元素來標記文件和應用程序。 

 

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

 HTML5和CSS3, 所有這些技術都是純粹的工具, 在等待一個熟練的開發者應用於正確的項目。爲此，咱們獲得了一個全新的概念並修正咱們的編碼習慣以保證咱們的網頁功能。

 

 

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

相對於用戶交互限制於文本、連接、圖片和表格的HTML4, HTML5更傾向於使用多媒體。包含從一個通用的<object>元素改成更高層次的<video>和<audio>元素, 以及一套豐富的API來供在JavaScript中使用。

 

 

 

 

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

 

27.怎樣使用HTML5 Canvas來建立進度條 (How to create a Progress bar with HTML5 Canvas)

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

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

只使用CSS3和HTML5來實現簡單的提示欄。

 

29.使用HTML5 Canvas建立一個條形圖 (Create a Bar Graph with HTML5 Canvas and JavaScript)

本教程將展現怎樣建立一個簡單的條形圖(HTML5 Canvas+JavaScript)。這個代碼可用本文末尾的下載。

 

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

 

毫無疑問,每個人都在談論HTML5。但是並不太清楚是誰在使用以及怎樣使用。

 

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

我一直想把CCV JavaScript庫的人臉識別用起來。這個庫給出的幾個演示樣例都是用於靜態圖像,但是經過查看代碼,瞭解到它的顯示使用的是畫布(canvas)元素。因而, 我把它用在了HTML5視頻的每一幀的處理上。

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

 HTML5有一個創新可使瀏覽器中的網頁成爲能夠編輯的頁面，這一特性稱爲可編輯內容(content editable)。它適用於所有現代瀏覽器。爲了使頁面編輯,你需要把標籤屬性contenteditable = " true "。在這篇文章中我將展現這個新特性。

 

33.HTML5高速學習指南 (HTML5 Quick Learning Guide)

HTML5語同一時候法兼容HTML4和XHTML1。 

 

 

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

對於每個canvas元素可以使用「上下文(context)」(想像一下畫圖板),你可以在當中使用JavaScript命令繪製。瀏覽器則爲畫圖功能實現多個畫布上下文和不一樣的API。

 

35. 怎樣讓HTML5工做在IE和FireFox2中 (How to get HTML5 working in IE and Firefox 2)

HTML 5多是最新和最好的技術,但一些瀏覽器沒有原生支持新的語義元素。讓咱們臨時忘記這些性感的功能,專一於怎樣讓元素正常呈現出來。

 

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

並無很是多人對錶單感興趣, 但HTML5仍然帶來一些大的改進。新表單元素、屬性、輸入類型,基於瀏覽器的驗證、CSS3的樣式技術和FormData對象可以讓你輕鬆愉快的建立表單。

 

 

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

表單是不論什麼站點中最主要的特性。在HTML表單元素中可以使用包含文本框、複選框、單選框、button、下拉列表、password錄入框和文件選擇器等。重點是要提升表單元件的可用性和有效性,這是好UI的基石,應當給予高度關注。

 

 

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

 HTML5帶給Web表單的第一個改進,就是可在文本框中設置佔位符。佔位符文字當字段內容爲空時會被顯示出來，一旦你點擊(或移入)輸入框中,佔位符文本就消失了。

 

 

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

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