前言
- 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）
- 如果你也有很多自己觉得很不错的学习网站，欢迎留言，我将会加到文章中，互联网是一个多分享才能多学习的地方，欢迎在评论区分享哦！
- 如果对你有帮助就点个赞吧！有错误欢迎指正。
