如何学习web前端

学习最重要的是找准方向,否则再多的努力也是与成功背道而驰的。

很多时候,成功不仅需要勇气和坚持,更需要正确的方向。也许有了正确的方向,成功会比预想的来得更快。如果跑错了路,再怎么努力也无济于事。学习Web前端也是如此。首先,明确自己的学习路线。以下是学习web前端的四个阶段:

1.超文本标记语言

首先,学习HTML。HTML(超文本标记语言)是网页的骨架。无论是静态网页还是动态网页,HTML代码最终都是返回给浏览器,浏览器对HTML代码进行解释和渲染,呈现给用户。所以一定要掌握HTML的基本结构和常用标签、属性。

学习HTML是一个记忆和理解的过程。在学习过程中,可以使用Dreamweaver的“拆分”视图来辅助学习。在“设计”视图中见效果,在“代码”视图中学精髓,发挥各种视图的优势。这种对比学习的方法弥补了单纯记忆HTML标签和属性的枯燥,对于刚学习web前端开发的新手来说一定是个不错的方法。

学了HTML,只是掌握了各种“原材料”的制作方法。如果我要建一栋楼,我得按照我们的设计方案把这些“原材料”组合起来,美化一些风格。

2.半铸钢ˌ钢性铸铁(Cast Semi-Steel)

然后学CSS。CSS(Cascading Style Sheets)是一种风格设计语言,可以真正将网页的呈现和内容分离。与传统的HTML相比,它的样式可以重用,大大提高了我们的开发速度,降低了维护成本。

同时,CSS中的盒子模型、相对布局、绝对布局等可以在像素级实现对网页中各个对象的位置布局的精确控制。通过这一阶段的学习,可以顺利完成“一栋楼”的建造。

大楼建成后,可以交给用户,但如果想让用户获得更好的体验,可以进一步“装修”大楼,让它看起来更豪华。

3.java描述语言

JavaScript是一种在客户端广泛使用的脚本语言。JavaScript为我们提供了一些内置的函数、对象和DOM操作。有了这些内容,我们就可以实现一些客户端特效、验证、交互,让页面看起来更加生动。

虽然JavaScript有很多优点,让你大吃一惊,但是当项目经理对你说“这个效果在XXX浏览器不兼容,重做吧!”这时候你一定很困惑:“合不来?那花了我一个晚上写了几百行代码!”

的确,JavaScript的兼容性和复杂性有时候真的很让人头疼,但好在有“大神”帮我们打包。

4.jQUery

最后,学习jquery。JQuery是一个免费、开源、轻量级的JavaScript库,兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)。同时,基于jQuery的插件有很多可供选择,可以更容易、更快捷地实现一些丰富的动态效果,大大节省了开发时间,提高了开发速度,这也充分体现了其“writeless,domore”(多写)。

“豪华建筑”在这里拔地而起,但是盖楼,日复一日,年复一年,是如此的复杂!如果我们可以将建筑中的每个独立部分模块化,当需要盖楼时,就可以像堆叠的木头一样简单快速地组合在一起。

这个思路同样适用于Web前端开发,于是各种前端框架应运而生。下面介绍自举。

Bootstrap是Twitter推出的用于前端开发的开源工具包。它是一个CSS/HTML框架,支持响应式布局。一经推出就大受欢迎,一直是GitHub上广受欢迎的开源项目。

在项目开发过程中,借助Bootstrap提供的CSS样式、组件、JavaScript插件,可以快速完成页面布局和样式设置,然后对样式进行微调,大大缩短了基于框架的开发周期。

二、关于学习Web前端的建议

最后给大家一些学习Web前端过程中的建议。

在CSS布局中,需要注意一个问题:很多同学缺乏对页面布局的整体分析,无法从宏观角度把握页面中方框之间的嵌套关系,急于求成,导致页面中元素之间的关系混乱,浮动时容易出现方框错位的情况。因此在布局上采用了“自上而下,逐步细化”的思路。首先把页面整体分成几个盒子,然后盒子逐渐嵌套在盒子里。

“君子生而不同,善于作伪。”在学习过程中,他也要多逛一些优秀的网站,善于分析和借鉴他们的设计思路和布局方法,多方面的知识,从而融会贯通,取长补短,为己所用。

同时要善于使用Firebug。Firebug一方面可以帮助我们调试自己的页面,另一方面可以方便的使用Firebug查看和分析别人网站的源代码。

随着移动互联网热潮的到来,移动开发越来越受到大家的欢迎,对响应式布局和微站点的需求越来越大,这也是Web前端未来的发展方向之一。对web前端开发感兴趣的同学可以多了解一下。