首先分享经验，若想做好一件事，就得花费功夫。要多学、多思、多练、多交流、多总结，从而发现自身问题，并且一定要克服这些问题。在状态不好时，往往需要及时进行调整。新手学习前端时，要思考学习的原因以及自身的心态，接着要定位好自己。可以多向大牛请教，也可以教一些水平不如自己的人，这样往往能促使自己快速成长，千万不要急躁。初学可以观看一些入门视频教程，之后可以购买一些书籍，做一些小项目，要学会进行投资，分析自己的现状和能力，并且要实时进行调整，一定要有自己的想法，懂得创新。在这里一定要对自己做分析，然后找出一种适合的学习方法。

Web前端的学习误区

网页制作是计算机专业同学在大学期间会接触到的课程。学习网页制作时，所用的第一个集成开发环境（IDE），大多是那种所见即所得的。这种“吊炸天”的 IDE 为我们制作网页带来了很大的方便。

入门快且见效快，这使我们在不知不觉间就深深爱上了网页制作。在这个时候，很多人会走入一个误区，那就是因为借助了如此帅气的 IDE，通过鼠标点击菜单就能够快速便捷地制作网页。

那么我们为何还要学习 HTML 呢？为何还要学习 CSS 呢？这些代码难道不苦逼吗？这难道不是舍简求繁吗？

但是随着学习不断深入，我们会发现自己步入了一种困境。那就是我们过度依赖 IDE 了，这使得我们不清楚它实现的本质，只是知道它能这样做，但却不明白为什么能这样做。

当页面效果出现问题时，我们会不知该如何是好，更别提去进行页面优化以及完成一些更高级的应用了。原因很明显，聪明的 IDE 助长了我们的惰性，让我们忽略了华丽网页背后最本质的东西，也就是 code。

正确的方向胜过无谓的努力

有两只蚂蚁想要翻越一段墙，去寻找墙那头的食物。一只蚂蚁到达墙脚后，立刻毫不犹豫地开始向上爬。然而，每当它爬到大半的时候，就会因为劳累和疲倦而掉下来。尽管它不灰心，一次次掉下来后，又能快速地调整自己，接着重新开始向上爬。

一只蚂蚁进行了观察，接着决定绕过墙。不久后，这只蚂蚁成功绕过墙抵达食物跟前，然后开始享用食物；然而，另一只蚂蚁依旧在不断地跌落下去之后又重新开始。

很多时候，成功除了需要勇气和坚持不懈之外，还需要有方向。或许有了一个良好的方向，成功到来的速度会比想象中更快。倘若在错误的道路上奔跑，无论怎样努力都是徒劳的。学习 Web 前端也是这样，首先应当选择一条正确的学习路线。

Web前端的学习路线

我的学习经历、近年来辅导学生的经验以及公司中实际项目的需求都表明，在这里可以将 Web 前端的学习划分成以下几个阶段，并且具体的学习路线图呈现于此。

第一阶段——HTML的学习

超文本标记语言（Mark-up，简称 HTML）是构成网页的基础。无论是静态网页还是动态网页，最终在浏览器端呈现的都是 HTML 代码。浏览器会对 HTML 代码进行解释和渲染，然后将网页呈现给用户。所以，我们一定要掌握 HTML 的基本结构以及常用的标记和属性。

HTML 的学习包含记忆和理解这两个方面。在学习时，可以借助“拆分”视图来辅助学习。在“设计”视图中能看到效果，在“代码”视图中能学到本质。把各种视图的优势都发挥到最大程度，这种对照学习的方法弥补了单纯识记 HTML 标签和属性的枯燥性，对各位初学的小盆友们来说是非常好的。

学习了 HTML 之后，我们仅仅掌握了各种“原材料”的制作方式。若要盖一幢楼房，就还需要把这些“原材料”依据我们设计的方案进行组合布局，并且还要对其进行一些样式的美化。

第二个阶段——CSS的学习

CSS 是一种样式设计语言，其英文全称为 。它能够实现网页表现与内容的分离。与传统 HTML 的表现方式相比，它的样式具有可复用性，这极大地提升了我们的开发速度，同时也降低了维护成本。

CSS 中的盒子模型可以实现对网页中各对象位置排版的精确控制，相对布局也能做到，绝对布局同样可以。通过此阶段的学习，我们就能够顺利完成“一幢楼房”的建设。

楼房建设完毕后，便可交给用户使用。倘若想让用户有更好的体验，还能对楼房进行更深入的装修，使其看上去更豪华。

第三个阶段——的学习

一种在客户端被广泛运用的脚本语言，它为我们在客户端提供了一些内置的函数、对象以及 DOM 操作。凭借这些内容，我们能够实现一些客户端的特效、验证、交互等功能，让我们的页面不再那么呆板，仿佛屌丝瞬间逆袭成了高富帅！有没有？

此时，你或许还沉浸在某事物给你带来的惊喜里。然而，你的项目经理却突然对你大声吼叫起来。

“这个效果在××浏览器下不兼容，重新搞……”

“不兼容?”瞬间石化了有木有?

哎呀，太坑人啦！那可是我花费了一整个晚上才写出几百行代码才搞定的呢，都快把我给气吐血啦！

兼容性和复杂性有时确实会让我们感到烦恼，所幸有“大神”为我们进行了封装。

第四个阶段——的学习

它是一个免费且开源的轻量级库，兼容各种浏览器（.0 及后续版本不再支持 IE6/7/8 浏览器），现在有很多基于它的插件可供选择，这使得我们在实现一些丰富的动态效果时更便捷，能大大节省开发时间，提高开发速度，充分体现了其“less，do more”的核心宗旨。这个Feel倍儿爽!有么有?

豪华大楼在此处拔地而起。然而，每天都这样日复一日、年复一年地盖楼，实在是太繁琐了！能否将大楼里面的每一个单独部件都模块化呢？当需要盖楼时，就像堆积木一样将它们组合在一起，这样难道不是很惬意吗？可以实现这样的方式吗？答案是肯定的。

这种思想在 Web 前端开发中是适用的，接着就有了各种前端框架，在此向大家推荐的是。

推出了一个开源的前端开发工具包，它是一个 CSS/HTML 框架，还支持响应式布局。推出后很受欢迎，一直是热门开源项目。

在项目开发期间，我们能够利用提供的 CSS 样式、组件以及插件等，从而迅速地完成页面布局和样式设置。接着，我们可以有针对性地对样式进行微调。通过这种基于框架进行开发的方式，大大缩减了开发周期。站在巨人的肩膀上，确实令人感到愉悦！

Web前端的学习建议

最后给大家聊聊在学习Web前端中的一些建议和方法。

在 CSS 布局时需注意的一个问题是，很多同学缺乏对页面布局做整体分析的能力，无法从宏观上把握页面中盒子间的嵌套关系，就急于动手操作，这会致使页面中各元素间的关系变得很混乱，容易出现盒子在浮动时出现错位等状况。建议大家在进行布局时秉持“自顶向下，逐步细化”的理念。首先，用几个盒子把页面从整体层面进行划分。接着，再逐步在这些盒子内部继续嵌套盒子。

君子并非生来就有差异，而是善于借助外物。在学习时，要多去浏览一些优秀的网站，善于对其设计思路和布局方法进行分析借鉴。见得多了，才能识广，之后才可以融会贯通，将他人的长处化为己用。

同时要擅长运用这个利器。一方面它能在我们学习时帮助我们调试自身的页面；另一方面我们能便捷地查看和分析他人网站的源代码，“偷”也属于一种技能！

每个人的成长情况和基础各不相同。要结合自身的实际状况去执行。再次强调，前端的核心是 js。css 并不难，不过需要逐步积累。对于前端，我的看法如下：

css就像一瓶酒，得品。

html 和 css 就包含那些标签、选择器以及属性等内容。然而，要写出一个具有扩展性、健壮性或维护性的页面并非易事。如今在写页面时，基本会形成条件反射，关注点不再仅仅是如何快速完成，而是思考当有界面需求需要修改时，怎样在修改代码最少的情况下迅速完成需求任务。这对前端的耐力、体力以及智力都是一种三重考验。

js就像一把剑，得磨。

js 最初只是用于校验。随着社会的发展，它承担的角色越来越重要。刚开始只是觉得玩玩就会 js 了，然而实际上这只是冰山一角。随着对 js 的了解不断增加，它既变态又可爱，既好玩又难以掌控，既有很多兼容问题，但解决兼容却是我们的基本生存之道。从 ajax 开始，一路前行一路观察，高载潮一浪高过一浪。

人生就是一场梦，得作。

技术只是生活的一部分。曾经满怀雄心壮志，如今却低头写码。我们要改变能够改变的，同时接受无法改变的。人生是有限的，应当珍惜每一个朝夕。人生的学习态度是：既不急躁，也不快慢。要有持之以恒的精神，要相信自己。不求能够改变整个世界，只求能够改变自己的生活。不求能够健步如飞，只求能够一步一个脚印。要感谢磨难，因为它能让我们的内心更加坚强。感谢挫折，它能让我们不断成长。感谢 bug，它能使我们的思维更加深邃。感谢前端，它让我们更加相信，撑起一片天空需要十八般武艺。

文章有部分内容源自互联网，学习其中对自己有用的东西即可。倘若感觉有不妥之处，完全可以直接忽略，它仅仅是一个参考罢了。愿大家在前端之路上能够越走越远。