前言
- HTML5由于可以基本適用于所有移動端的語言，移動端的畫面感、尺寸大小、顯示效果等都不會受到限制和局限。這讓它強勢崛起，成為了互聯網行業的新寵，讓更多的人想要系統的學習它。而大多數人獲取HTML5知識的重要途徑都是網絡，不過面對五花八門的搜索結果，是不是覺得摸不著頭腦，無法抉擇？本文作者以自己的實踐經驗，結合很多網友的推薦并自己親自測驗，篩選出來11個在線學習HTML5開發的網站，讓HTML5的學習可以跟隨自己的節奏進行，不再那么困難。同樣，可以編譯HTML的編譯器也同樣很多，
- 這里我也將推薦兩款很好用的可以編譯HTML的編譯器。
- 幾本成為優秀前端開發者必讀的書籍，附PDF下載方式。
自學網站推薦
1.W3School
- W3School是學習HTML5最好的資源之一，它擁有的教程都帶有例子，幾乎可以解決你所需要的所有知識點。如果你想從基礎開始學習HTML5的話，那么這個網站會是一個很好的選擇。你可以學習到HTML5的所有元素，比如標簽、圖像、圖形，以及無需多做其他操作，只需跟隨教程的教書步驟走即可，用簡單的語言解釋和交互讓學習變得簡單。并且該網站也有CSS以及JS的知識講解，你需要的是按照從上至下，一點點學下去，并將例子等都在編譯器上敲寫一遍，很簡單的一些網頁界面你都可以輕松獨自做出來。
2.Html Goodies
-
如果想要觀看HTML5的速成課程，以及獲取學習HTML5的所有性能，那么htmlgoodies會是一個不錯的開始。在網站的左邊部分，你可以看到分類細致的基礎、教程。問答等，你可以任意快速跳轉到自己想要開始學習的部分。不過這個網站可能需要你有一定的英語基礎，真是想學這都不是障礙，你可以下載歐路詞典，可以選中翻譯就可以讀懂啦！
HTMLGOODIES界面.png
3.Html5Doctor
-
HTML5 Doctor網站提供了許多內容不錯的文章，這些文章將會幫你更好的學習和實現HTML5開發。而且，除了這一特色，網站還有一個“Ask the Doctor”部分，在這里，可以向專家提問，通過他們的專業講解解決你遇到的所有問題。
Heml5doctor界面.png
4.Html5-tutorial
-
HTML5-tutorial可以讓你在短時間內有一個良好的開局，在這里，你可以了解HTML5的基本知識和要點，如何構建一個網站、編輯和調試代碼進行開發學習，很適合初學者入門學習。
Heml5-tutorial.png
5.慕課網
-
這是一個在線編程網站，你就不需要自己安裝編譯器了。課程介紹：前端開發(HTML、CSS、JavaScript)、PHP開發，每個方向的課程又分為初、中、高三個級別。支持包括Java、Python、Nodejs、C等多種編程語言。特點：慕課網課程自制，并且全部免費。交互式社交化在線編程學習，用戶可以在線討論，進行代碼快照交流;提供實操性強的案例視頻，動畫元素豐富，趣味性強。同時，也提供iOS、Android應用，用戶能隨時隨地利用碎片時間進行學習。
慕課網首頁截圖.png
6.百度傳課
-
這是一個視頻教學網站，有收費的，也有很多不收費的課程，在這里不僅僅可以學習Html5，還可以學習很多其它的前段開發的知識。
百度傳課.png
7.萌碼網
-
適合初學者的學習的在線編程學習網站
1、在線開發環境
在萌碼學習，用戶無需配置編程環境，所有學習和操作在網頁中均能實現。
2、互動式學習
“互動式”的教學過程如同老師手把手教學，消除了用戶學習過程中的干擾因素；同時，網站還將理論與實踐融為一體，用戶能夠一邊學習一邊進行實際操作，掌握知識點的同時便能實踐，從而加深了學習記憶。通過這種人機交互，就算是最零基礎的“小白”用戶也能搞定。
3、時光機
“時光機”功能類似程序員們 debug 的過程，它能讓用戶回放每一個編程步驟，看每一步的程序運行過程和結果，并以圖形化方式顯示，這樣用戶可以清晰地理解每一步的含義，并找出代碼出錯的地方進行修正，從而避免在未來的編程過程中再犯類似的錯誤。
萌碼網站.png
8.源碼之家
-
這是一個下載優秀源碼的地方，這里有各種大神分享的自己做的各種酷炫的特效網頁，還有分享自己的開發經驗等，非常值得你存下來，沒事看看。
源碼之家可下載例子.png
好用的編譯器
- 通過在線編程的網站學習是不需要編譯器的，但是要是想方便自己練習，那么你就需要有個好用的編譯器，下面我將推薦兩個我用著很好的編譯器。
1.Sumlime Text
這個編譯器簡單便捷，界面直觀簡單，支持多種開發語言，并且體積小，只有20M左右，并且支持Mac版和Window版，但是需要下載一些插件，才能讓你的編譯更加快捷，只需要百度就可以。
2.Dreamweaver(簡稱Dw)
- 這是我十分推薦的一款軟件，關于詳情可以看我前面寫的一篇專門介紹這個軟件的博文點我看查看!我也提供了下載鏈接和破解方法，這個軟件的優點就是，不需要下載插件，并能實時查看你的寫的代碼的效果。具體，看之前的博文即可，強烈推薦該軟件！
左代碼區右代碼效果.png
優秀前端開發者必讀書籍推薦
第一階段：《JavaScript DOM編程藝術》
看這本書之前，請先確認您對Javascript有個基本的了解，應該知道if else之類的語法，如果不懂，先去看看我第二階段推薦的《Javascript高級程序設計》的前三章，記住看三章就別往下看了，回到《JavaScript DOM編程藝術》這本書上來。
學習Javascript用《JavaScript DOM編程藝術》來入門最好不過了，老老實實看兩遍，看完了你就會對JS有一個大概的了解，整本書都圍繞著一個網頁效果例子展開，你跟著老老實實敲一篇，敲完之后，你會發現這個效果不是常在網頁中看到么，發現自己也能做出來網上的效果了，嘿嘿，小有成就感吧。第二階段：《JavaScript高級程序設計》
有的書是用來成為經典的，比如犀牛書；還有些書是用來超越經典的，顯然這本書就是這種。書中章章經典，由淺入深，其中第6章，關于JS面向對象的解說，沒有教程出其右。
如果有一場滿分100分的JS考試，看了《JavaScript DOM編程藝術》能讓你拿到20分，那么看完這本書，你就能拿到60分以上了。學完后，你會成就感倍增的，相信我（至少看兩遍，推薦三篇，跟著書上的代碼一行行的敲）。
這本書強烈推薦購買，寫的太TMD牛逼了，給你帶來的價值超過百倍千倍。
這本書最新的是第三版，貌似就是前些日子出來的，我看的是第二版，第三版相對第二版變動不大，添加了幾章內容，價格目前相差10元左右。
接下來，恭喜你可以下山了，這個時候可以自己做一些事情了
需要多敲代碼多發現，但必須要去看書。千萬不能學習網上那種浮躁的方法，直接實踐，不懂然后直接找解決方案，這可以幫助你解決一時之需，但遇到類似的問題的時候，你并不能馬上觸類旁通，長遠來說這無論對于程序員還是其它職業來說無疑是降低了學習的效率。只有書籍里面的內容才是經得起考驗，真正放心地放到我們的知識存儲里面。
你可以去Ferris這個教程看看他寫的這些效果，看看源代碼，怎么樣，是不是覺得有一部分很簡單了，嘗試著跟著他寫一寫這些效果吧。
學技術閉門造車是行不通的，適當的加一兩個QQ群交流（注重質量），常去論壇逛逛，你會經常有些小收獲的。
再有就是看看前輩這些牛人前輩們分享的文章，它會讓你的學習事半功倍的。第三階段：《JavaScript語言精粹》和《高性能JavaScript》
接下來兩本書《JavaScript語言精粹》和《高性能JavaScript》算是JS高級教程的補充，里面有一些內容和JS高級教程重復了，兩本書可以同時看，都不厚，可以對前面所學的有一個很好的加強和鞏固。第四階段：《JavaScript DOM高級程序設計》和《JavaScript設計模式》
在吃透了前面所說的書之后，接下來兩本書的順序已經無關緊要了，《JavaScript DOM高級程序設計》（注意和《JavaScript 高級程序設計》相區別）和《JavaScript設計模式》，這兩本都是重量級的書，能讓你的JS技術上一個新的臺階；這兩本書前者主修煉外功，后者主修煉內功，有點想乾坤大挪移和九陽神功的關系。
《JavaScript DOM高級程序設計》 首先教你搭建一個類似JQuery的額工具函數庫，然后通過講解幾個實際中經常遇到的幾個應用例子，會讓初學者受益匪淺。
《JavaScript設計模式》主要講Javascript的設計模式，說實話，翻譯的質量很一般，有些生硬，但已經基本不影響你的學習，看代碼完全可以理解出自己的意思。
看書的目的主要是掌握理論知識，梳理JS的知識結構。對JS的高級特性，個人感覺視頻不能達到那個深度。而且JS的一些基礎的問題，或一個知識的擴充，限于各種條件的限制，可能無法完全表達出來。所以要結合書來補充。
結語
- 一般學習的心態是：不急不躁，不快不慢。持之以恒，相信自己。
- 下載推薦的書籍PDF版本 （提取碼：3d6f）
- 如果你也有很多自己覺得很不錯的學習網站，歡迎留言，我將會加到文章中，互聯網是一個多分享才能多學習的地方，歡迎在評論區分享哦！
- 如果對你有幫助就點個贊吧！有錯誤歡迎指正。
