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

時間 2019-11-18

標籤轉帖讓你受益 html5 html 教程欄目 HTML5 简体版

原文原文鏈接

39個讓你受益的HTML5教程 javascript

閒話少說，本文做者爲你們收集了網上學習HTML5的資源，指望它們能夠幫助你們更好地學習HTML5. 好人啊! 不過,做者原來講的40個只有39個，由於第5個和第8個是重複的。css

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

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

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? 你如何使用它來建立富網頁應用程序呢?css3

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

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

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視頻時,我會反問"你想解決什麼問題?" 幾乎每次我都聽到,"我只想要個人視頻能夠在移動設備上播放。 " 很容易! 我將向您展現如何開始。canvas

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,應該很容易學完。

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,使它更容易開發交互式頁面, 可是有大量的新元素,爲常規的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)。