Html5零基础学习

前端的基础无外乎HTML、CSS、js三类，HTML控制内容、CSS控制表现、js控制动效。由于题主的要求中还有`迅速`这个要求，所以基础学习的时间分配可以有侧重：

1. HTML、HTML5标签过一遍：大概2天。不要求对每个标签的每个属性都了如指掌，知道什么情况下用什么标签就足矣，死记硬背也没什么意义，后面用的多了自然就熟了。

2. CSS、CSS3：也还是整体先过一遍：大概3天。重点关注选择器语法、选择器优先级计算，要写出高效简洁的CSS，其实也就是看选择器写得好不好而已。

3. 了解常见布局：大概2天。熟悉一下常见的2列3列自适应布局方案，各种居中，各种行列的实现方式有哪些，响应式布局的实现方式等。

4. 模仿几个PC、移动端网页：7天。学编程主要是靠练习，前面学的都是比较零散的细节，这时候可以找一个比较简洁的网站去模仿它的静态页面。这个时候的重点不是某个CSS属性的用法，而是要看一下一个网站的HTML结构是怎样的， CSS样式是怎么组织起来的，HTML与CSS是怎么结合的。

我来谈谈，零基础如何学习HTML5？

非技术方面：

学习HTML5之前，我个人建议先去了解一下HTML5行业。如果对行业状况不是很了解就要学HTML5会让你有点盲目？因为有的人选择HTML5行业的目的是为了高薪，有的人是真正的喜欢才选择它，不同的目的会产生不同的结果。

另外，了解HTML5行业能够帮助你分析一下自己是否适合学习HTML5。我的好朋友也有好多做前端的，有初中学历，有高中学历，还有本科学历且是软件工程专业的，看起来HTML5行业0基础也是可以学，难道是真的0基础可以学吗？我很认真的说不是，HTML5行业深似水，前期看起来发展都一样，但是到了后期会受到计算机相关专业知识的影响，导致无计算机相关知识的开发人员发展缓慢，也就是说很难往深入的方向发展，所以需要看看自己是不是适合做前端。但是，不排除无计算机相关专业的人发展也很不错，他们主要还是靠后期的努力弥补欠缺的知识。总之，还是那句话，兴趣才是你最好的导师。

技术方面：

HTML5开发工程师需要经常与网页设计图打交道，所以可以先从PS学起，学会从设计图获取数据、抠图、简单处理图片等，掌握的越多越好。其次，学习HTML和CSS，要懂得实现静态页面的布局，包括移动端和PC端，当然兼容问题也要掌握。这部分内容对于后期学习有很大的影响，所以需要把它打扎实一点。然后，学习原生JS的基础语法，因为它是学JS框架的重要基础，也是前端的核心技术。最后，JS掌握了面向对象、设计模式等后再去学习angular等比较流行的框架。对于HTML5知识的获取你可以到W3CSchool、HTML5学堂、掘金等平台进行学习。

最后提一下，如果想在前端行业发展的不错，后台语言、设计都需要掌握一些，才能把网页做的更好，而不是单纯的去实现网页。

网名：梦幻雪冰(IceBoy)

1.如果题主零基础的情况下想去学代码的话，就得把HTML5、CSS3、JavaScript三个一口气都学了，这样就不需要各种求供应商和技术了。

这种情况下建议题主在网上学习+课本学习同步进行：

网上学习强推网易云课堂上浙大的翁恺老师的计算机课程。

其一，翁恺老师本身就是高校里面的人气教师，讲课简明生动，很适合初学者入门【之前学过一些计算机课程，因为太过晦涩，对程序语言甚至有点心理阴影，所以初学者学的课程还是要谨慎选择】。

其二，翁恺老师在网上授课已经有蛮多经验了，也不会出现什么讲课中途遮住了PPT，代码看不清等等诡异的问题。。。

其三，网易云课堂上的三门课程都已经整理完毕，方便学习，平台也比较稳定。而且这些课程完全免费，每门课都有几万人在学

HTML5入门：HTML5入门 - 网易云课堂

CSS3：CSS3 - 网易云课堂

JavaScript：JavaScript - 网易云课堂

书的话，还是推荐一些经典的吧：

《Head first HTML&CSS》：入门级必备，难度合适

《JavaScript DOM编程艺术》：同样入门级教材

《HTML5权威指南》：内容全面，进阶阶段可看

《JavaScript高级程序设计》：JS圣经，殿堂级教材

建议交错搭配学习，加深理解，不过这样学习来比较费时间就对了

2、如果只需要能制作出简单的H5页面，就可以绕过代码这关，善用各类H5制作平台，应该都能轻松上手。

Maka：MAKA.im | 简单、强大的HTML5创作工具

印象中是最早开始做H5页面的平台之一，目前只有web端没有移动端，但网页上各类模板齐全，动态效果和交互也做得不错，只要自己填充内容就好，简单易上手。

初页：初页 - 优质H5手机页、微信海报

和maka不同，专门做移动端的，也有一些预设的模板，支持添加文字、图片、音乐等，方便在手机上直接制作，胜在速度。

秀制作：秀米 XIUMI

来自微信公众号排版常用的工具秀米出品，可以和秀米配合使用，目前也只有web端。

Epub360意派：Epub360意派-专业级H5微场景设计平台

模板不多，但自由度较高，适合有设计感的设计师来 *** 刀制作，发挥交互功能，不过只能免费制作10个，而且作品还自带logo，有ipad版和web版。

---