39個讓你受益的HTML5教程

標籤：des   style   blog   http   java   使用   os   io   

閑話少說，本文作者為大家收集了網上學習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所見即所得 (WYSIWYG)的努力是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. JavaScriptFace Service+Canvas+Video=HTML眼鏡! (JavaScript Face Detection + Canvas + Video = HTML5 Glasses!)

我一直想把CCV JavaScript庫的Face Service用起來。這個庫給出的幾個示範範例都是用於靜態映像,可是通過查看代碼,瞭解到它的顯示使用的是畫布(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