前端入门教程


前端最核心的还是html,css,js这三个,不管技术更新换代多么快,这三个都是基本,学好了再去学其他框架就会很快,所以一开始不要追新,学好js和jquery就足够了。

首先,刚开始学html和css的时候,建议用windows自带的记事本,等你对这些基本的语法熟练后推荐用IDE,这里推荐几款IDE:Atom,sublime text,VS Code,HBuilder

html

html基本没什么可以说的,记得分清楚块级元素(div,p,h1,header等等)和非块级元素(a,span,i等等),建议看w3school的教程。html入门教程

html5需要注意canvas,客户端储存(localStorage,sessionStorage),拖放,这个具体参考《javascript高级程序设计》

注意:html语义化很重要,可以多用html5新元素,比如header,footer这些,有利于语义化。

css

css比较繁琐,入门还是建议去看w3school的教程:链接描述

css比较重要的内容还是浮动,定位(绝对定位,相对定位),盒模型(margin,padding,width,border),选择器优先级(id选择器,类选择器,属性选择器等等),line-height,vertical-align,display,两列自适应布局,三列自适应布局,flex布局,响应式布局。这里每一个都特别重要,也都是基础。

css3则需要重视转换(translate,rotate,scale,skew,matrix),过渡(transition),动画(animation),媒体查询,rem布局等等。

注意:一定要注意各种属性的兼容性,尤其是ie下的兼容性。

进阶建议看张鑫旭的博客:张鑫旭的博客
其中对浮动,行框,vertical-align等等有很深的讲解。

这里还有篇文章讲解css中的布局:css中的那些布局

javascript

javascript是最重要的,js分为三部分,ECMAScript,DOM和BOM。

最基本的这些数据类型(string,number,boolean等等)肯定是要会的,其他的引用类型,变量,作用域,函数这些也都是基础,正则表达式很重要,这部分建议先看w3school的教程。

然后ECMAScript最重要的还是面向对象,因为ECMAScript不是常规的那种面向对象,没有类的概念,需要用构造函数和原型来模拟其他语言里面的类,所以构造函数,原型这两个是最最基本的,必须要会的,其次就是继承,这个在面向对象中也是很重要的概念,然后个人认为最重要的还是闭包,闭包可以有各种用法,这个太重要了,一时半会也说不完,建议看看js的模块模式,这里还是建议看《javascript高级程序设计》,也可以结合其他语言里面的面向对象进行理解,比如c++,可以尝试用js来模拟c++里面的类,私有变量等等。

接下来是写网页必须用到的DOM了,DOM全部都很重要,《javascript高级程序设计》这本书里面说的很详细了,DOM的基本操作,DOM里面的各种事件,都是一定会用到的,当然《javascript dom编程艺术》这本书也是很不错的,对DOM也有很深的讲解。

BOM则主要是那些个浏览器对象,其中有windows对象,navigator对象,location对象等等。

最后则是浏览器的能力检测,这个用来解决兼容性问题。

注意:严格模式也需要多了解一下,很多时候会用到。

jquery

jquery是javascript的一个库,对js的各种操作进行了封装,可以让使用更加方便,这个建议看《锋利的jquery》这本书,讲述的很全面详细,初学时建议记笔记,这样可以来区分原生js的dom和jquery里面对象的区别,因为很多api实在太像了,我刚学的时候就各种搞错,而且等js学到很好很好的时候,建议去看jquery的源码,可以了解闭包的各种灵活应用,模块化,也可以对js里面的各种api印象更加深刻一些,推荐高云的《jquery技术内幕》

ajax

ajax内容比较少,一般jquery的ajax操作用的比较方便,除了常规的操作外,ajax需要注意的是跨域请求问题,cors和jsonp等等,以及get,post等请求的区别,前后端的交互。

目前就想到这么多吧,以后再完善,这些应该足够看了。

更具体的学习路线可以参考我在知乎的回答:前端入门


发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>