UDN-企业互联网技术人气社区

板块导航

浏览  : 3046
回复  : 24

[问答] 零基础的网站开发初学者应如何系统地学习?

[复制链接]
大前端的头像 楼主
发表于 2015-7-30 17:39:29 | 显示全部楼层 |阅读模式

相关帖子

发表于 2015-7-30 18:02:21 | 显示全部楼层
  网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习:

  基础知识:

  1. html + css 这部分建议在 w3school 在线教程 上学习,边学边练,每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后,可以系统的读一两本书,推荐《head first html 与 css 中文版》,这本书讲的太细了,我没能拿出耐心细读。你可以根据情况斟酌。

  2. javascript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》,js是一门很混乱的语言,这本书能够帮助你区分哪些是语言的精华,哪些是糟粕,对于语言精华,应该深入学习。糟粕部分能看懂别人写的代码就行,自己就不用尝试了。

  进阶:

  有了以上基础,就可以进行一般的静态网页设计,不过对于复杂的页面还需要进一步学习。

  1. css。必看《精通css》,看完这本书你应该对:盒子模型,流动,block,inline,层叠,样式优先级,等概念非常了解了。作为练习可以看下《css艺门之匠》这本书,它对标题,背景,圆角,导航条,table,表单等主题都有详细的介绍。

  2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后,进一步学习内容包括:

  a) 框架。推荐jQuery,简单易用,在w3school简单学习js后,直接上手jQuery即可完成一些简单的项目。学习方法也很简单,照着产品文档做几个页面就行了,不用面面俱到,以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性,让你能更专注与web开发学习的精髓部分。补充: 可以使用 codecademy 学习 javascript,jQuery,用户体验真的很好(感谢 TonyOuyang )。

  b) javascript 语言范式 。这个名字可能并不恰当,只是我找不到可以描述“面向对象”,“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言,它的很多设计理念都有函数编程语言的影子,甚至说如果你不用面向对象,完全可以把它理解成一门函数式编程语言。javascript的很多语言特性,都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论,对封装,继承,多态等概念要理解,维基百科,百度百科会是你的帮手,另外推荐《object oriented javascript》,应该有中文版。对与函数式编程我了解的也不系统,不好多说,可以自己百度一下。

  c) javascript 语言内部机制。必须弄清如下概念:js中变量的作用域,变量传递方式,函数的定义环境与执行环境,闭包,函数的四种调用方式(一般函数,对象的方法,apply,call),以及四种调用方式下,‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。另外,你必须理解json。

  d) dom编程,这个web前端工程师的核心技能之一。必读《dom编程艺术》,另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。

  e) ajax编程,这是另一核心技术。ajax建议在网上查些资料,了解这个概念的来龙去脉,百度百科,维基百科上的内容就足够了。真正编程是很容易的,如今几乎所有框架都对ajax有良好的封装,编程并不复杂。

  f) 了解浏览器差异性。这部分包括css和js两部分,浏览器差异内容很多,建议在实践中多多积累。另外对于浏览器的渲染模式,DOCTYPE等内容应该系统学习。

  再进一阶 · 代码层面:

  有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但要想成为更专业的前端,你还需继续努力。更高的要求大概还有四方面:1易维护,2可测试,3高性能,4低流量(移动端)。

  1. 易维护。对于页面你该理解‘样式’,‘数据’,‘行为’三者分离,对应的当然就是css,html,js。对于js代码,你最好了解设计模式,重构,MVC等内容。

  2. 可测性。

  3. 高性能。必读《高性能javascript》

  4. 低流量。移动端关注比较多。

  再进一阶 · 工程层面:

  前端项目同样面临软件生命周期的各个环节,首先是代码管理,你必须学会使用svn和git。其次是代码的构建,如今前端代码构建已经不是简单的压缩一下了,需要进行依赖管理、模块合并、各种编译,比需要学会使用grunt等前端构建工具,最近gulp比较火,也需要了解。

  补充:

  对于前段开发,基本内容就这些了,可以根据自己的兴趣爱好选择性学习以下内容。

  1. 交互设计。大公司依然有专业人士搞这些,不过不懂交互的前端一定不是好前端。推荐《简约至上》。

  2. 后端。应该说前段工程师必须至少了解一门后端语言,不过如果爱好也可深入学习,入手难度比较低的应该是php了。这部分由可分为基于页面,基于框架两种。大型项目都是基于框架开发的,建议至少了解一个MVC框架,比如php的ci, yii, yaf 等,好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用,推荐大家使用在Node上使用Express框架做一些后端服务的开发。

  3. flash。我并没有吧flash作为前端工程的核心技能之一,因为我不会,不过ActionScript应该和js大同小异,可以根据工作需要学习。不过我的原则是能不用就尽量不用,其实很多效果通过js,css都可以实现,完全不需要flash。而且随着html5的发展flash早晚会淘汰。

  4. html5和css3 。HTML5规范已经于2014年10月28日发布了,移动端html5和css3已经得到了非常广泛的使用,相关的工具和环境也比过去好很多,有志前端必学。

  5. Android和ios开发。时至今日,前端的工作领域已经非常广泛,native的界面开发本质上也是前端开发,个大公司都面临着Native环境和web环境页面同时维护的问题,如果能够在技术上得到统一,将会有巨大的价值。对于学有余力的同学,应该了解Native开发的基本流程,至少了解到界面构建的技术。

  (以上内容最初发布于2012年上半年,快三年了,修改过几次,我会持续维护,希望对后来人有帮助。加油、共勉!)
使用道具 举报

回复

发表于 2015-7-30 20:10:58 | 显示全部楼层
  首先你已经不是零基础了。

  其实这种事情没有什么捷径,亲自动手,一步一步来即可,不能好高骛远。

  Step 1: 用 HTML + CSS 模仿几个漂亮的静态页面。当你看到现在大部分的网页都觉得能大概猜到怎样做,并且花时间真的能做出来的时候,即可进入下一步。注意,这个时候请你不要管浏览器兼容性或者太过注意代码的优雅结构,因为没必要。做到能兼容现代浏览器,内容和样式基本完全分离即可。这大概需要半个月到一个月的学习时间。

  Step 2: 用 HTML + CSS + JS 写几个有交互的页面。例如,你可以写一个漂亮的注册页面,它能够验证各种输入是否符合条件并且有一个用原生 JS 实现的日期选择器(Date Picker)。或者,写一个漂亮的,有动画的相册。注意,这个阶段请使用原生 JavaScript。同样的,兼容现代浏览器即可。这大概需要半个月的学习时间。

  Step 3: 入门一门后端语言。按照你的情况,就 php 吧。有了上面的经验,php 入门之后,相信你能够做一个漂亮的无用户留言版了。请把数据存贮在文件中,因为你还没有学习 SQL 嘛。这大概需要半个月的时间,如果你学习能力强,一个星期也不是没有可能。

  Step 4: 入门一个关系数据库。比如说 MySQL。DDL 和 CRUD ,请一定要熟练。恩,这个阶段不要谈什么优化,那是扯淡。现在,你大概可以做一个多用户的博客程序了。这大概需要半个月的时间。

  你看,两个半月不到你就可以成为一个初级的 Web 开发者了。博客做好之后,你可以尝试造更多的轮子。比如:带简单的用户权限的论坛程序、简单的记账工具,等等,做你喜欢做的任何小程序都行。在这个过程中,你会变成一个熟练的初级程序员,或者,你为了偷懒,会学会 jQuery,Smarty 等框架。

  有一天,你发现你靠写小程序提高不了水平了。接下来就要学习真正的干货了。

  学习 C 语言。别问我为什么,我就是觉得一个程序员应该要学过 C 语言,牛逼不牛逼是另外一会事儿,况且很多书都是用的 C 语言描述。别光学语法,弄清编译是什么,链接是什么,指针是又怎么一会事儿。学习数据结构和简单的算法。你看,你学完 C 语言就能学数据结构和算法了,我难以想象用 php 来描述数据结构和算法会有多么地奇怪。如果你觉得学了之后还是不知道数据结构究竟是什么,有什么用,那证明你还没有真的学到。学习一门面向对象的静态编程语言。推荐 Java。学得有多好,就看你花了多少时间了。请务必仔细阅读各类相关书籍,深刻领会面向对象的重要编程思想(不过,切忌迷信面向对象编程)。学习操作系统和计算机网络。至少一些基本的概念需要弄清楚,具体的细节,没有必要过于纠结。

  Okay...以上都可划为「不求甚解」的阶段,接下来就可以选一个方向(前端,或者后端)「求甚解」了。在「求甚解」的阶段里,我这里就不细说了,也没法儿细说,并且你到了这个阶段,一般是不需要别人告诉你需要学什么了。所以,我只说在进入这个阶段之前,或者刚刚进入这个阶段时,最好去做的一些事情:

  看书或文档抛弃中文译本,借助各种工具阅读英文原版。学习使用 Unix-like 系统。学会提问[1]。订阅科技博客,了解业界正在发生什么事情。Happy hacking!
点评 ( 1 ) 收起 / 展开点评

静静的小婊妹 2015年08月20日 15:09 详情 回复

很好的回复,很系统

使用道具 举报

回复

发表于 2015-7-30 22:57:18 | 显示全部楼层
  如果你一直从事程序相关的工作,比如说程序员,但是并没有深入研究过前端。可能你会和我有一样的困惑。html+css或者前几年比较流行的说法div+css,好像很简单,html不就是几个标签,css不就是几个渲染效果,为什么别人用得那么溜,为什么在我手里就这么不对,到处都是错位。

  那么,你或许应该和我一起熟悉下以下这几个概念

  文档流

  什么叫做文档流? 将窗体自上而下分成一行行,并在每行中按从左至右的顺序排列元素,即为文档流。

  有三种情况使得元素脱离文档流而存在,分别是浮动,绝对定位,固定定位。

  没错,这就是文档流,就像写信一样,从左至右,自上而下,就这么简单,互联网一开始就是为了浏览这些文档。

  但是,这样不利于排版,于是,早期的互联网专家们为了更方便的写出更直观的文档,他们制定了HTML并且规定了一些基本原则,比如,所有的元素分为三类:块级元素(block),内联元素(inline),可变元素(这个其实可以不算进去)。

  块级元素(block)

  每个非浮动块级元素都独占一行,浮动元素按规定负载行的一端。若当前行容不下,则另起新行浮动。

  块元素(block element)

  address - 地址

  blockquote - 块引用

  center - 举中对齐块

  dir - 目录列表

  div - 常用块级容易,也是css layout的主要标签

  dl - 定义列表

  fieldset - form控制组

  form - 交互表单

  h1 - 大标题

  h2 - 副标题

  h3 - 3级标题

  h4 - 4级标题

  h5 - 5级标题

  h6 - 6级标题

  hr - 水平分隔线

  isindex - input prompt

  menu - 菜单列表

  noframes - frames可选内容(对于不支持frame的浏览器显示此区块内容)

  noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

  ol - 排序列表

  p - 段落

  pre - 格式化文本

  table - 表格

  ul - 非排序列表

  内联元素(inline)

  任何不适块级元素的课件元素都是内联元素。其表现的特性是行布局,这里的行布局就是说其表现形式始终以行进行。

  内联元素(inline element)

  a - 锚点

  abbr - 缩写

  acronym - 首字

  b - 粗体(不推荐)

  bdo - bidi override

  big - 大字体

  br - 换行

  cite - 引用

  code - 计算机代码(在引用源码的时候需要)

  dfn - 定义字段

  em - 强调

  font - 字体设定(不推荐)

  i - 斜体

  img - 图片

  input - 输入框

  kbd - 定义键盘文本

  label - 表格标签

  q - 短引用

  s - 中划线(不推荐)

  samp - 定义范例计算机代码

  select - 项目选择

  small - 小字体文本

  span - 常用内联容器,定义文本内区块

  strike - 中划线

  strong - 粗体强调

  sub - 下标

  sup - 上标

  textarea - 多行文本输入框

  tt - 电传文本

  u - 下划线

  var - 定义变量

  可变元素

  可变元素为根据上下文语境决定该元素为块元素或者内联元素。 不用纠结这个概念,它就是块元素或者内联元素。

  可变元素 + applet - java applet + button - 按钮 + del - 删除文本 + iframe - inline frame + ins - 插入的文本 + map - 图片区块(map) + object - object对象 + script - 客户端脚本

  块元素与内联元素及其它

  不管是块元素还是内联元素都是长方形的盒子,这就是下面要讲的盒子模型。
01142518_5GT0.png

  两者之间可以通过display:inline;或者display:block;互相转换。

  浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。(浏览器的兼容性里浮动是个大问题是因为各个浏览器对浮动理论的理解不同,这里写得应该是IE的理解)

  基于文档流,我们可以很容易理解以下定位模式:

  相对定位(relative),即相对于元素在文档中的位置进行偏移。但保留原占位符。

  绝对定位(absolute),即完全脱离文档流,原占位不保留,相对于position属性非static值的最近父级元素进行偏移。

  固定定位(fixed),即完全脱离文档流,相对于浏览器的内容窗口进行偏移。

  盒子模型

  关于盒子模型(box model),必须要了解的就是IE模型和W3C模型的差异,这也是造成我们需要解决各浏览器兼容性的主要方面!下面这张图说明了这种差异性的本质。

  盒子模型的差异性

  其实也就是说,在w3c盒子模型中,width和height定义的仅仅是content的宽高,但在IE模型中定义的是包括border和padding在内的真正的盒子的宽高,很明显IE模型反而更为厚道一些,在w3c模型中,一个布局都已定义好的页面,若是想更改某个box的padding,你必须同时更改这个box的content的width和height,而在IE模型中你只需改变padding。这确实无疑是w3c的一个失误,不过它已在CSS3中有所修正。

  另外,我之前没有注意到的一点是,原来各个盒子之间的margin并不是相加,而是看谁的大就用谁的。 可是有个问题我仍在疑惑,并没有实验取证: 嵌套的盒子模型之间,里面盒子的margin和外面盒子的padding是相加还是怎么个处理方式?

  然后,就可以说到关于解决IE模型和W3C模型差异的方法,以下是我收集的各种方法,可供参考:

  1.当然是神奇的CSS HACK.

  此处可参考博客园,虽然我它应该也是抄的,而且就是抄的百度词条的。

  test

  我对CSS HACK也不是很了解,此处只是作为一个笔记留些示例笔记在此处。

  2.!important:

  在IE7还没出现之前,曾有过这样的处理方式,比如上面的#test 我们这样处理就可以解决在不同的浏览器实现不同效果。

  #test{

  background-color:blue !important;/*for firefox*/

  background-color:red;/*for ie6*/

  }

  原理很简单,IE6不识别!important。

  3.终极解决方案:

  本来只有一个content层,比如#test,再外面加一个wrapper层,比如#wrapper-test div#wrapper-test用来实现padding,margin和border,不定义width和height div#test用来定义height和width,padding和margin,border都定义为0

  #wrapper-test{

  padding: 20px;

  margin: 20px;

  border: 1px solid red;

  }

  #test {

  margin:0;

  padding:0;

  border:none;

  height:100px;

  width:100px;

  background-color:blue;

  }

  以上这一段在任何浏览器应该都有你期望的显示了!

  4.未来解决方案:

  在css3中,有一个属性box-sizing,它有两个可选值:content-box和border-box,选用后者,则会按IE模型处理盒子。所以你可以这样:

  textarea {

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

  -moz-box-sizing: border-box;    /* Firefox, other Gecko */

  box-sizing: border-box;         /* Opera/IE 8+ */

  }

  在css3中,关于盒子的大小控制,排列,布局有很多有意思的新东西。

  关于box model还有另外一个方面是需要注意的,我们初学者容易忽视的,width:auto的情况以及一些例外。

  当position为static(默认及无定义)或者relative时,box会自动延伸至上级box的内部空间宽。

  当position为absolute或者fixed时,box会自动收缩至盒内content所撑开的宽度。

  关于float的element,还在实验取证中,不过解决方案是凡是浮动元素一律加上固定的宽高。

  关于浮动闭合

  几种解决方案:

  .clear{clear:both:height:0;overflow:hidden;}

  /*需要清除的地方加div.clear*/

  .clearfix:after{content:".";display:block;height:0;clear:both;visibilty:hidden}

  .clearfix{*+height:1%;};

  /*浮动元素的父元素添加class="clearfix"*/

  .clearfix{overflow:auto;_height:1%;}

  .clearfix{overflow:hidden;_zoom:1;}

  盒子模型大概是CSS最难搞定的地方了吧,网上的文档乱得一塌糊涂,哪位同学或者高人有介绍盒子模型的资料推荐么,中文英文都OK,网上的或者纸质书本也都OK。

  布局 流动布局vs固定布局vs弹性布局vs响应式布局

  固定布局(Fixed Layout) 采用px作为block的单位。

  流动布局(Fluid Layout) 采用%百分比作为block的单位,指定min-width和max-width。

  弹性布局(Elastic Layout) 采用em作为block的单位。

  响应式布局(Responsive Layout) 其实和前三者没有必然关系,主要是通过mediaqueries兼容不同的屏幕大小。

  其实混合使用,才会有最佳的解决方案,响应式布局将屏幕大小分为几个大块,380~720,760~1280,更大等等,流动布局确定某个block的大小,更好的将黄金分割率及三等分割原则用于设计,em用于一些LOGO或者ICO的大小指定,使得其不失去提醒的功能,固定布局则可用于留白等等,当然,这只是我的以为,具体设计还得积累经验。

  层叠

  即z-index,需要注意的是z-index仅仅在设置了position属性的元素上起左右,即设置了position为absolute,fixed或者relative,在static上不起作用。

  样式优先级

  几个原则: !important的用户样式>!important的作者样式>作者样式>用户样式>浏览器定义的样式 作者样式中:元素内定样式>内嵌样式表>导入样式表(@import)>外链样式表 用户样式即用户在浏览器里自己写配置文件定义的样式。

  具体到每条规则遵循以下规则:

  对于规则中的每个ID选择符,特殊性加0,1,0,0

  对于规则中每个类选择符和属性选择符以及伪类,特殊性加0,0,1,0

  对于规则中的每个元素名或者伪元素,特殊性加0,0,0,1

  对于通配符,特殊性加0,0,0,0.

  对于内联规则,特殊性加 1,0,0,0

  比方说:

  很容易理解,0,1,0,0>0,0,0,2>0,0,0,1,所以字体颜色为黄色。

  另外,如果同等特殊性的规则你写两次的话,后面那个优先级大于前面那个。 比如

  :active{color:Red;}

  :hover{color:Blue;}

  :visited{color:Purple;}

  :link{color:Green;}

  传说是不会出现红色和蓝色的。 你最好这样写:

  :link{color:Green;}

  :visited{color:Purple;}

  :hover{color:Blue;}

  :active{color:Red;}

  不过,这个问题我倒从来没遇到过,也许现在浏览器智能了。

  继承

  通配符的特殊性比继承得高。

  border,margin,padding等不会被继承(好像关乎box-model的不会被继承)。
点评 ( 1 ) 收起 / 展开点评

静静的小婊妹 2015年08月20日 15:10 详情 回复

论坛的大家都好有爱,互帮互助

使用道具 举报

回复

发表于 2015-7-31 01:16:33 | 显示全部楼层
  其实前端我接触的并不多,但现在不是提倡Full Stack全栈工程师嘛。如果你掌握下面的会让你如鱼得水,不需要被UI,UE人员优先级而影响。

  


  


  Ruby on Rails:在web2.0时代,RoR一下子获得很多创业公司的青睐,开发者将Rails作为一个框架来创建数据库支持的Web应用,它本身是一个完整的解决方案,通过默认的标准实践(convention)可以很大的加快开发效率,无缝的整合所有子组件以提供给开发者一个统一的接口。当时Twitter早期也是用这个框架写的,但这个也是双刃剑,在性能和内部机制上很难调节。Django:Python的前端管理框架,直接生成管理页面。有人经常那上面的作为PK相比于 Django、Pylon 等 Python 框架,Ruby on Rails 是否有很大的技术优势?Smarty:PHP的一种模板语言,很容易上手。Bootstrap:Twitter提出的HTML,CSS和JS框架,让你的web app容易适配到各种平台,比如手机上。JQuery:Javascript的最流行的库,可以做一些Ajax调用。HTML5:就是下一代的HTML标准,增加了一些兼容的便签,使得在手机和浏览器中阅读效果一致。对应的是Native APP,就是原生的从底层开始写的APP。当年Facebook是走HTML5的路,发现不对劲,性能很差,体验糟糕。赶紧转变成Native APP才让它重新赢得市场。Node.js:js写的后端服务器,处理高并发场景性能佳,使用 Node.js 的优势和劣势都有哪些? 特别适合移动的服务器端。 Socket.IO是其中一个组件,为了在浏览器和移动设备上创建实时应用而产生的,它可以模糊不同传输机制之间的差异D3:各种可视化的效果,确实非常酷。Impress.js: 基于CSS3转换和过渡、工作于现代浏览器、并受prezi.com的理念启发的演示工具。Backbone.js:前端的MVC,为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。Meteor: 一个构建在 Node.js 之上的平台,用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间,保持二者之间的数据同步更新。因为 Meteor 是基于 Node.js 开发的,所以在户端和服务器端都使用 JavaScript 作为开发语言。而且,Meteor 程序的代码还能在前后两端共用。
使用道具 举报

回复

发表于 2015-7-31 02:39:25 | 显示全部楼层
  对于你说的 “图片等素材是很是欠缺的。”我觉得这个不是阻碍。
  不必去精通PS,现在的网页除了那种设计感强的宣传页,其实对图片的要求并不高,需要的时候用用PS就OK了,要求高的可以交给专业美工。
  但是对于设计理论,配色排版知识等还是有必要去深入学习,多看看国外优秀设计,上上花瓣之类的网站。所以希望你不要闭门造车,还是去牵一根网线吧。
  框架了解即可,只要你熟悉了js,框架什么的上手还不简单?框架屏蔽简化了很多东西,比如ajax的实现原理,建议去深入下,这部分涉及到的东西比较重要。学习还是要把基础打好。我就见过很多用jQuery的人,基本原理都搞不清楚,脱离框架连选择元素都不会,这样自然是不可取的。
  面向对象这一块,对于没有面向对象语言实战基础的人来说是不知道怎么去学。这个就可以去学别人的库,看别人是怎么使用面向对象的,了解这样的好处,然后自己模仿模仿。
  一定要善用开发者工具。firefox的firebug和Chrome的F12都是很好的选择,用好了这个必会发现他带给你的帮助比看一本书更多。你把firebug摸透了你还担心对DOM理解不够?
  考虑到未来,html5和css3是必须学习的。
使用道具 举报

回复

发表于 2015-7-31 05:15:15 | 显示全部楼层
  这个问题我觉得是分为两部分的,一是你觉得自己的学习方向不明确想问清楚,二是你看了很多东西但是没法形成一个知识系统。

  第一部分我看到已经有很多有经验的人作出了解答,同为web开发的入门生的我也学到了不少,而且我对问题的第一部分也补充不了什么。

  第二部分是个学习方法的问题。

  1   发现知识之间的联系

  我个人认为这个世界上的知识的结构都是树状的,在学习的时候要想清楚哪里出现了什么样的知识点,这个知识点是怎样引出来的,在这个知识点下又有哪些知识点?弄清楚知识结构的树状图,我认为你对这门知识大概就形成了一个系统了。如果在短期内要接受大量的知识而你又对自己的记忆没有太大信心的话,建议做笔记。

  另外,编程这个东西,出于各种考虑,在设计一种语言的时候会添加很多特性到其中,一门语言可以做很多事情,但是初学的话一般都只是学到了一部分,而且这一部分当中你经常用到的又还只是这一部分中的一部分。不常用的那部分会生疏,时间一长,你可能会连很简单的东西都记不起怎么写,所以在一开始学习的时候就要记笔记,到了你记不起但又需要用的时候你就可以直接去看你当时写的笔记。但是你心中必须要对这门语言的知识结构有个大概的印象,这样你查起来的效率才高。

  平时遇到问题最好搞清楚问题的成因是什么,要知其所以然,这样对你理解这门语言有很大的帮助,碰到问题,把它记下来,解决后,又把解决方案记下来,因为你以后还有很大可能会碰到相同或类似的问题,除非你有信心记下这么多不成系统的信息。

  其实,关于学习方法,我个人认为关键在于发现知识之间的联系,因为人是通过联想来记忆的。我在上面关于学习方法的话都是围绕这一点说的。

  2   保持学习时思维的连贯性

  除了发现知识间的联系,我认为还有一点很重要,就是学习时候思维的连贯性,就是说学习的过程中最好保持一段时间不被其他事打断你的思维。一般人只能在一个时间里关注一件事(我想没多少人能像钱学森那样同时心算两条方程的),如果你在思考一个问题的途中被另一件事打断了,那么你必须把和那件事相关的信息装进你的大脑,然后对这些信息进行处理,处理完之后,你还得把你之前正在思考的那个问题的有关信息重新装进大脑,然后继续处理。这一点和CPU中断差不多。这个信息换入换出的过程是会大大降低你的效率的。再进一步,假设你是一个不太容易集中注意力的人(没有不敬的意思,只是为了说明问题而作假设而已),你好不容易集中注意力了,然后注意力被转移后你又要花很长时间才能进入状态继续处理之前的问题,效率降得更多了。若再进一步,假设你之前在处理原来的问题的时候还没有进入状态,正在努力中,那么......

  所以,要降低被打断的概率,不要被自己的各种不良习惯分散注意力,也不要被他人干扰。关于这一点,你可以查查“番茄工作法”。

  最后,我想起一句话,“独学而无友,则孤陋而寡闻”,希望你能找到学习的伙伴,可以去论坛啊之类的地方交流交流。

  祝你愿望成真~~~
使用道具 举报

回复

发表于 2015-7-31 08:16:29 | 显示全部楼层
帮不了楼主太多,但是路过推荐些资源:学习网站导航 一个专门收集高质量国内外学习网站的小众站点。

************另附学霸养成学习榜单(不谢,可以点个赞嘛~\(≧▽≦)/~)************
一、汇总榜单:
[ol]
  • 公开课_学习网站导航收录了网易、多贝、传课等众多公开课学习网站
  • 大学生常用_学习网站导航收录了外语学习、就业、实习、考研等众多大学生相关的学习网站
  • IT互联网_学习网站导航收录了IT、程序员、web开发、移动开发等众多互联网相关的学习网站
  • IT职业技能_学习网站导航收录了产品经理、UI设计师、前端、网络安全等互联网职业技能提升网站
  • 其他网站收录收录了一些稀奇古怪的网站、音乐电台、工具应用、大杂烩
    [/ol]
    二、适合大学生的:
    [ol]
  • 外语学习提供了英语学习的相关网站
  • 就业 | 实习提供了大学生就业、实习相关的学习网站
  • 考研提供了考研相关的学习网站
  • 国外学习网站收集国外众多优质学习网站,首先。。你得会英文(⊙o⊙)…
  • 科研|文档|资料学霸过来吧~找论文利索~
    [/ol]
    三、IT互联网相关的:
    [ol]
  • IT互联网IT互联网学习相关网站
  • IT程序员IT程序员学习相关网站
  • IT移动开发IT移动开发学习相关网站
  • web开发web开发学习相关网站
  • IT培训机构这些培训机构上可以找到一部分免费的教程
    [/ol]
    四、IT职业技能相关网站:
    [ol]
  • 产品经理网站导航N多产品经理学习入门学习网站
  • UI设计师学习网站导航N多UI设计师入门学习网站
  • WEB前端学习网站导航N多前端初学者学习入门的网站
  • 黑客|网络安全学习网站导航N多黑客入门安全攻防学习资料
  • 科技媒体网站导航了解互联网圈内动态,培养互联网思维~
    [/ol]
    五、其他:
    [ol]
  • 稀奇古怪的网站不少都是很有意思的,不要错过~
  • 稀奇古怪工具有些工具可是神器哦~
  • 益智训练专治大脑生锈!
  • 舞蹈|艺术妹子可以看看
  • 谷歌代理访问国外网站学习的利器,提供N多代理
  • 音乐电台N多高质量音乐网站,触动心灵的音符!
  • 影视动画|游戏策划
  • 电影|动漫
  • 旅游|摄影|体育|户外
  • 创意|生活有意思[/ol]
    麻烦点个赞好嘛!
    显示全部
  • 使用道具 举报

    回复

    发表于 2015-7-31 11:18:35 | 显示全部楼层
    同学 你牛 我很佩服你的学习能力,我虽然已经工作两年了,我做了一年程序员ASP和http://dot.net都会,虽然也做了不少站了,但是还是不敢说自己会了,现在我是做UI ,html+css+JS我都会,但是这些东西都有学习过,越深的地方,越觉得其实我一直还在起点,网站包括: 产品模型,交互师,视觉表达,美工,前端(HTML+css+js),程序员,这是基本岗位,他们每个行业都有大量的东西需要学习,当然如果如果做一个垃圾网站,我也能一个下午就能搞定,但是我相信从你学这么多东西来看,你是想好好搞的,所以我建议你盯着其中一项,深入学习。
    使用道具 举报

    回复

    发表于 2015-7-31 16:58:11 | 显示全部楼层
    DOM:推荐《Javascript DOM编程艺术》 书不厚,但是是绝对的经典
    使用道具 举报

    回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关于我们
    联系我们
    • 电话:010-86393388
    • 邮件:udn@yonyou.com
    • 地址:北京市海淀区北清路68号
    移动客户端下载
    关注我们
    • 微信公众号:yonyouudn
    • 扫描右侧二维码关注我们
    • 专注企业互联网的技术社区
    版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
    快速回复 返回列表 返回顶部