前言

• HTML5由于可以基本適用于所有移動端的語言，移動端的畫面感、尺寸大小、顯示效果等都不會受到限制和局限。這讓它強(qiáng)勢崛起，成為了互聯(lián)網(wǎng)行業(yè)的新寵，讓更多的人想要系統(tǒng)的學(xué)習(xí)它。而大多數(shù)人獲取HTML5知識的重要途徑都是網(wǎng)絡(luò)，不過面對五花八門的搜索結(jié)果，是不是覺得摸不著頭腦，無法抉擇？本文作者以自己的實踐經(jīng)驗，結(jié)合很多網(wǎng)友的推薦并自己親自測驗，篩選出來11個在線學(xué)習(xí)HTML5開發(fā)的網(wǎng)站，讓HTML5的學(xué)習(xí)可以跟隨自己的節(jié)奏進(jìn)行，不再那么困難。同樣，可以編譯HTML的編譯器也同樣很多，
• 這里我也將推薦兩款很好用的可以編譯HTML的編譯器。
• 幾本成為優(yōu)秀前端開發(fā)者必讀的書籍，附PDF下載方式。

HTML5基本支持所有移動端.png

自學(xué)網(wǎng)站推薦

1.W3School

• W3School是學(xué)習(xí)HTML5最好的資源之一，它擁有的教程都帶有例子，幾乎可以解決你所需要的所有知識點。如果你想從基礎(chǔ)開始學(xué)習(xí)HTML5的話，那么這個網(wǎng)站會是一個很好的選擇。你可以學(xué)習(xí)到HTML5的所有元素，比如標(biāo)簽、圖像、圖形，以及無需多做其他操作，只需跟隨教程的教書步驟走即可，用簡單的語言解釋和交互讓學(xué)習(xí)變得簡單。并且該網(wǎng)站也有CSS以及JS的知識講解，你需要的是按照從上至下，一點點學(xué)下去，并將例子等都在編譯器上敲寫一遍，很簡單的一些網(wǎng)頁界面你都可以輕松獨(dú)自做出來。

W3School網(wǎng)站.png

2.Html Goodies

• 如果想要觀看HTML5的速成課程，以及獲取學(xué)習(xí)HTML5的所有性能，那么htmlgoodies會是一個不錯的開始。在網(wǎng)站的左邊部分，你可以看到分類細(xì)致的基礎(chǔ)、教程。問答等，你可以任意快速跳轉(zhuǎn)到自己想要開始學(xué)習(xí)的部分。不過這個網(wǎng)站可能需要你有一定的英語基礎(chǔ)，真是想學(xué)這都不是障礙，你可以下載歐路詞典，可以選中翻譯就可以讀懂啦！

  
  
  HTMLGOODIES界面.png

3.Html5Doctor

• HTML5 Doctor網(wǎng)站提供了許多內(nèi)容不錯的文章，這些文章將會幫你更好的學(xué)習(xí)和實現(xiàn)HTML5開發(fā)。而且，除了這一特色，網(wǎng)站還有一個“Ask the Doctor”部分，在這里，可以向?qū)＜姨釂?，通過他們的專業(yè)講解解決你遇到的所有問題。

  
  
  Heml5doctor界面.png

4.Html5-tutorial

• HTML5-tutorial可以讓你在短時間內(nèi)有一個良好的開局，在這里，你可以了解HTML5的基本知識和要點，如何構(gòu)建一個網(wǎng)站、編輯和調(diào)試代碼進(jìn)行開發(fā)學(xué)習(xí)，很適合初學(xué)者入門學(xué)習(xí)。

  
  
  Heml5-tutorial.png

5.慕課網(wǎng)

• 這是一個在線編程網(wǎng)站，你就不需要自己安裝編譯器了。課程介紹：前端開發(fā)(HTML、CSS、JavaScript)、PHP開發(fā)，每個方向的課程又分為初、中、高三個級別。支持包括Java、Python、Nodejs、C等多種編程語言。特點：慕課網(wǎng)課程自制，并且全部免費(fèi)。交互式社交化在線編程學(xué)習(xí)，用戶可以在線討論，進(jìn)行代碼快照交流;提供實操性強(qiáng)的案例視頻，動畫元素豐富，趣味性強(qiáng)。同時，也提供iOS、Android應(yīng)用，用戶能隨時隨地利用碎片時間進(jìn)行學(xué)習(xí)。

  
  
  慕課網(wǎng)首頁截圖.png

6.百度傳課

• 這是一個視頻教學(xué)網(wǎng)站，有收費(fèi)的，也有很多不收費(fèi)的課程，在這里不僅僅可以學(xué)習(xí)Html5，還可以學(xué)習(xí)很多其它的前段開發(fā)的知識。

  
  
  百度傳課.png

7.萌碼網(wǎng)

• 適合初學(xué)者的學(xué)習(xí)的在線編程學(xué)習(xí)網(wǎng)站
  1、在線開發(fā)環(huán)境
  在萌碼學(xué)習(xí)，用戶無需配置編程環(huán)境，所有學(xué)習(xí)和操作在網(wǎng)頁中均能實現(xiàn)。
  2、互動式學(xué)習(xí)
  “互動式”的教學(xué)過程如同老師手把手教學(xué)，消除了用戶學(xué)習(xí)過程中的干擾因素；同時，網(wǎng)站還將理論與實踐融為一體，用戶能夠一邊學(xué)習(xí)一邊進(jìn)行實際操作，掌握知識點的同時便能實踐，從而加深了學(xué)習(xí)記憶。通過這種人機(jī)交互，就算是最零基礎(chǔ)的“小白”用戶也能搞定。
  3、時光機(jī)
  “時光機(jī)”功能類似程序員們 debug 的過程，它能讓用戶回放每一個編程步驟，看每一步的程序運(yùn)行過程和結(jié)果，并以圖形化方式顯示，這樣用戶可以清晰地理解每一步的含義，并找出代碼出錯的地方進(jìn)行修正，從而避免在未來的編程過程中再犯類似的錯誤。

  
  
  萌碼網(wǎng)站.png

8.源碼之家

• 這是一個下載優(yōu)秀源碼的地方，這里有各種大神分享的自己做的各種酷炫的特效網(wǎng)頁，還有分享自己的開發(fā)經(jīng)驗等，非常值得你存下來，沒事看看。

  
  
  源碼之家可下載例子.png

好用的編譯器

• 通過在線編程的網(wǎng)站學(xué)習(xí)是不需要編譯器的，但是要是想方便自己練習(xí)，那么你就需要有個好用的編譯器，下面我將推薦兩個我用著很好的編譯器。

1.Sumlime Text

這個編譯器簡單便捷，界面直觀簡單，支持多種開發(fā)語言，并且體積小，只有20M左右，并且支持Mac版和Window版，但是需要下載一些插件，才能讓你的編譯更加快捷，只需要百度就可以。

Sumblme Text.png

2.Dreamweaver(簡稱Dw)

• 這是我十分推薦的一款軟件，關(guān)于詳情可以看我前面寫的一篇專門介紹這個軟件的博文點我看查看!我也提供了下載鏈接和破解方法，這個軟件的優(yōu)點就是，不需要下載插件，并能實時查看你的寫的代碼的效果。具體，看之前的博文即可，強(qiáng)烈推薦該軟件！
  
  左代碼區(qū)右代碼效果.png

優(yōu)秀前端開發(fā)者必讀書籍推薦

• 第一階段：《JavaScript DOM編程藝術(shù)》
  看這本書之前，請先確認(rèn)您對Javascript有個基本的了解，應(yīng)該知道if else之類的語法，如果不懂，先去看看我第二階段推薦的《Javascript高級程序設(shè)計》的前三章，記住看三章就別往下看了，回到《JavaScript DOM編程藝術(shù)》這本書上來。
  學(xué)習(xí)Javascript用《JavaScript DOM編程藝術(shù)》來入門最好不過了，老老實實看兩遍，看完了你就會對JS有一個大概的了解，整本書都圍繞著一個網(wǎng)頁效果例子展開，你跟著老老實實敲一篇，敲完之后，你會發(fā)現(xiàn)這個效果不是常在網(wǎng)頁中看到么，發(fā)現(xiàn)自己也能做出來網(wǎng)上的效果了，嘿嘿，小有成就感吧。

• 第二階段：《JavaScript高級程序設(shè)計》
  有的書是用來成為經(jīng)典的，比如犀牛書；還有些書是用來超越經(jīng)典的，顯然這本書就是這種。書中章章經(jīng)典，由淺入深，其中第6章，關(guān)于JS面向?qū)ο蟮慕庹f，沒有教程出其右。
  如果有一場滿分100分的JS考試，看了《JavaScript DOM編程藝術(shù)》能讓你拿到20分，那么看完這本書，你就能拿到60分以上了。學(xué)完后，你會成就感倍增的，相信我（至少看兩遍，推薦三篇，跟著書上的代碼一行行的敲）。
  這本書強(qiáng)烈推薦購買，寫的太TMD牛逼了，給你帶來的價值超過百倍千倍。
  這本書最新的是第三版，貌似就是前些日子出來的，我看的是第二版，第三版相對第二版變動不大，添加了幾章內(nèi)容，價格目前相差10元左右。
  接下來，恭喜你可以下山了，這個時候可以自己做一些事情了
  需要多敲代碼多發(fā)現(xiàn)，但必須要去看書。千萬不能學(xué)習(xí)網(wǎng)上那種浮躁的方法，直接實踐，不懂然后直接找解決方案，這可以幫助你解決一時之需，但遇到類似的問題的時候，你并不能馬上觸類旁通，長遠(yuǎn)來說這無論對于程序員還是其它職業(yè)來說無疑是降低了學(xué)習(xí)的效率。只有書籍里面的內(nèi)容才是經(jīng)得起考驗，真正放心地放到我們的知識存儲里面。
  你可以去Ferris這個教程看看他寫的這些效果，看看源代碼，怎么樣，是不是覺得有一部分很簡單了，嘗試著跟著他寫一寫這些效果吧。
  學(xué)技術(shù)閉門造車是行不通的，適當(dāng)?shù)募右粌蓚€QQ群交流（注重質(zhì)量），常去論壇逛逛，你會經(jīng)常有些小收獲的。
  再有就是看看前輩這些牛人前輩們分享的文章，它會讓你的學(xué)習(xí)事半功倍的。

• 第三階段：《JavaScript語言精粹》和《高性能JavaScript》
  接下來兩本書《JavaScript語言精粹》和《高性能JavaScript》算是JS高級教程的補(bǔ)充，里面有一些內(nèi)容和JS高級教程重復(fù)了，兩本書可以同時看，都不厚，可以對前面所學(xué)的有一個很好的加強(qiáng)和鞏固。

• 第四階段：《JavaScript DOM高級程序設(shè)計》和《JavaScript設(shè)計模式》
  在吃透了前面所說的書之后，接下來兩本書的順序已經(jīng)無關(guān)緊要了，《JavaScript DOM高級程序設(shè)計》（注意和《JavaScript 高級程序設(shè)計》相區(qū)別）和《JavaScript設(shè)計模式》，這兩本都是重量級的書，能讓你的JS技術(shù)上一個新的臺階；這兩本書前者主修煉外功，后者主修煉內(nèi)功，有點想乾坤大挪移和九陽神功的關(guān)系。
  《JavaScript DOM高級程序設(shè)計》 首先教你搭建一個類似JQuery的額工具函數(shù)庫，然后通過講解幾個實際中經(jīng)常遇到的幾個應(yīng)用例子，會讓初學(xué)者受益匪淺。
  《JavaScript設(shè)計模式》主要講Javascript的設(shè)計模式，說實話，翻譯的質(zhì)量很一般，有些生硬，但已經(jīng)基本不影響你的學(xué)習(xí)，看代碼完全可以理解出自己的意思。
  看書的目的主要是掌握理論知識，梳理JS的知識結(jié)構(gòu)。對JS的高級特性，個人感覺視頻不能達(dá)到那個深度。而且JS的一些基礎(chǔ)的問題，或一個知識的擴(kuò)充，限于各種條件的限制，可能無法完全表達(dá)出來。所以要結(jié)合書來補(bǔ)充。

結(jié)語

• 一般學(xué)習(xí)的心態(tài)是：不急不躁，不快不慢。持之以恒，相信自己。
• 下載推薦的書籍PDF版本 （提取碼：3d6f）
• 如果你也有很多自己覺得很不錯的學(xué)習(xí)網(wǎng)站，歡迎留言，我將會加到文章中，互聯(lián)網(wǎng)是一個多分享才能多學(xué)習(xí)的地方，歡迎在評論區(qū)分享哦！
• 如果對你有幫助就點個贊吧！有錯誤歡迎指正。