web前端开发初步认识 零基础小白如何从头开发一个前端应用？

今天我爱编程网小编整理了web前端开发初步认识 零基础小白如何从头开发一个前端应用？相关信息，希望在这方面能够更好帮助到大家。

学习web前端要注意什么?工作中最常用的技术是什么?怎样着手学更快?

都说前端入门低，想学好前端绝对不容易，可以说现在前端所需要掌握的技能超过后端和以往，新技术概念层出不穷，到底所谓的前端都应该干些什么都应该会写什么呢?
本人身边有太多的人会切几张图, 会用jQuery做个特效, 会从bootstrap里复制粘贴, 会用html游戏框架写个flappy bird, 会在Github里找各种模板自和库拼拼凑凑, 就口口声声大言不惭的称自己为前端工程师. 说什么前端好简单啊, 前端找工作好难啊, 没有出路啊, 想转行啊. 甚至有更多的人还不明白什么是HTML, 就到处问(知乎里尤其多)怎么开始学前端啊, 前端前景好不好啊. 依照本人的经验, 什么东西难不难, 什么东西好不好, 可不是这样问出来的. 我相信在这在这种网络信息资源及其丰富的年代, 花个半小时自行搜索一下你应该可以得到你想要的答案.

好了言归正传, 前端工程师真的是一个无关紧要的职位么? 我们先来看看前端工程师都要做些什么, 看看那些称自己是'所谓'的前端同学们都能走到哪一步.

这里直接跳过最基本的HTML+CSS+JS, 包括但不仅限于:
- HTML各种element怎么用什么时候用?
- Event? EventLitsener? HTML中触发event以及JS中处理event?
- DOM tree? 添加? 修改? 删除? 搜索? 遍历? 选择? children? parent? sibling?
- 什么是window? 什么是document?
- JS基本语法? function? loop&condition? scope&closure? array&object? this?
- CSS 什么是box modal? position? float? 各种选择器(*, >, ~, :nth-child)?

如果看到这里有任何一项完全没听说过没用过, 或者查各种文档后'大概'知道怎么用的同学们, 很遗憾, 你们现在算不上是一个合格的前端工程师. 如果不是, 请继续.

### 程序员的基本素质和知识

(有些人觉得前端不同于传统意义上的程序员, 这点我十分不赞同. 或许把前端工程师叫做JS程序员更加贴切, HTML和CSS就好比其他语言中的UI库)-

- 高数, 基本的概率统计 (连简单的微分方程都不会解的朋友们就不要称自己为前端人员了!)
- 基本数据结构 能用JS写出linked list, stack, queue, (binary)tree, graph, hashtable么?
- 基本算法 能用JS实现各种search(linear, binary..), 各种sort(bubble, insertion, merge, quick, selection), 以及树的搜索(Breadth First/Depth First)和遍历(3种顺序)么?
- 设计模式 知道什么是singleton, factory, strategy, decrator么?
- Git 不要只是停留在把Github当做一个网络储存器的层面上, 知道branch, diff, merge么?
- 基本的英语能力(不要求听说, 只用来读/写文档资料)
- 基本的计算机知识 知道位运算, 溢出, thread, lock, concurrency, parallelism么?
- 熟悉unix的基本命令么? 知道ssh public/private key都是干嘛的么?
- 知道正则么? 能够熟练的使用么?
- 能写出详细的注释/文档, 让阅读你代码的人知道你要干嘛么? 能短时间内快速地读懂来自你同事或者其他地方(github, blog)的代码, 知道什么东西应该写在什么地方, 以便迅速地参与其中么?
- 给你一个你从来没有接触过的库/语言, 能能够在较短的时间内在你的代码里正确使用么?
- 有一个得心应手用的熟练地编辑器/IDE么? 不要求大家都是vim/emacs大神, 但也不要做什么都是用鼠标来点.
- 基本的检索查询能力(google, stackoverflow, MDN)
- 单独思考解决问题的能力, 团队合作, 与人相处

如果以上的内容都有所了解(这里不会强调精通), 恭喜你, 你拥有了成为前端工程师的基础知识. 继续.

### 前端专业知识
- 知道什么是AMD, COMMONJS么? 知道call, apply, bind么? 知道JS中foreach, filter, some, every么? 知道怎么实现functional JS(curry等)么?
- 知道各种所谓的高级HTML的API(File, Web Audio, WebSocket)么?
- 知道各种CSS Preprocessors么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种么?
- 知道各种CSS框架么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种么?
- 知道canvas, SVG么?
- 知道怎么把你的东西做成responsive, cross-browser support么?
- 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
- 知道什么是Ajax, restful, get, post么? 知道怎么和后台交互么?
- 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种或多种么?
- 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
- 知道现在前端一般的工作流程(gulp, grunt, git, svn, npm)么?
- 知道怎么测试代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
- 知道前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用么?
- 知道npm, V8, node, express, socket么? (这里补充一点, 现在越来越多的公司都采用: '前端网页 -> 前端后台 -> 后台'这种构架来搭建东西, 也就是说, 前端工程师不仅要做传统前端的网页, 还要写自己的后台, 来跟真正的后台进行交互, 至于前端的后台用什么语言来写, 一般是node/python/ruby, 不太会用到庞大的java, 所以这里我把node列为前端工程师必须要掌握的技能之一) 知道cache, authentication么?
- (如果要用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
- 另外, 前端这个行业跟传统的c/c++/java程序员还是有一定的差别的. 由于是新兴产业, 所以各种行业标准, 框架, 库会随时随地的产生和更新 (作为一个c程序员, 十年前怎么写东西现在还是怎么写东西). 今天出了node和react, 明天又出了io和mean. 所以, 积极关注各种前端产品, 跟上变化的节奏, 也是身为一个前端程序员必备的技能之一. 知道ECMAScript 6里怎么写class么? 知道react, flux, reflux么? 知道polymer, dart么? 知道meteor么?

以上是摘自知乎某大牛的文章=====
感觉对新人挺打击的，不过理清从大体上重新认识前端对学习理解也有一定帮助，只要自己想好了就坚持下去，学前端的最重要的随时学习能力，应该前端领域知识面涵盖太广，很多技术也不成熟，正在发展中，只能不停学习各种新技术新知识。。能分辨哪些技术是必须掌握的，哪些是少数人创造用来提”升逼格“的概念，能把PS+HTML+CSS+js玩熟，会一两个框架，懂点设计。就可以了

零基础小白如何从头开发一个前端应用？

关于这个问题，太多人在问了。我这几年一直都在从事web前端应用方面的培训普及工作，期间还公开出版过几本书，现提两点看法供参考。 我爱编程网

第一，前端应用涉及的知识点太多，一定要首先找个靠谱的书籍或者教程（不要太厚、太长的）先对前端有个整体的认识，千万不要一头扎进某个方面学个一年半载。这样的做法，你所看到的将始终是眼前的这一小部分的“点”，而看不到“面”！而且，单纯的学习某一方面知识，很容易让人产生倦怠感，学着学着可能就要放弃了！

比如，在你对前端知识体系毫无了解的情况下，先来系统学习html的数十个甚至上百个标签，你能体会到每个标签在前端项目中的真正用途吗？你最多只是会用这些标签而已，却无法拓展自己的思路，更不可能对这些标签将来的用途有着深刻的理解。假如，你先有了一部分“面”上的知识，也简单知道了html、css和javascript在前端项目中是如何各司其职的，并对它们的用法有了初步的了解，那么，在重新学习html标签时，你可能就会思考：这个标签的样式该怎么设置？如何给这个标签添加一些事件以便让它触发某种操作行为？这样的学习就不再是一个个孤立的知识点了，而是把它们都融合起来了，学习过程也会变的更加有趣！

这种学习方法，正是本人一直倡导的“由面到点”，然后再“由点到面”。因此，我的建议是：在有了一种总体性（“面”）的概念认知之后，你才会知道其中每个具体的“点”将用到哪里，这个“点”究竟是应该浅尝辄止还是要继续追本溯源。只有这样，才不会把时间浪费在很多琐碎的、有些甚至永远都用不到的知识点中，也才能以最具效率的方式帮助自己确定最终需要努力的方向。当以这样的方式学习时，你眼中的CSS和JavaScript可能都不再是独立的语言，也许只是页面中普通的<style></style>、<script></script>标签元素而已，这样才能真正的做到融会贯通！

第二，前端应用是离不开html、css和javascript三大基础的。在有了“面”上的初步知识之后，其实就可以找个前端框架先来练手一个小项目了。在练手的过程中，碰到没有用到的html标签属性、css样式设置方法或者不懂的js语法规则时再来找对应的基础知识学。这种“边干边学”的方式是最有效的，千万不要拿一整块的时间来系统学习某一方面的基础知识，否则你又将大概率的陷入到“从入门到放弃”的恶性循环中。

为什么要强调使用前端框架呢？这是因为，它可以让初学者暂时摆脱漫长且繁杂的学习过程，快速看到开发成果，从而增强继续学习的信心。待有了一定的感性认知与经验积累之后，回头再去看html、css和javascript三大基础，相信你一定会不时发出这样的感慨：原来是这样啊！这种“茅塞顿开”的感觉真的让人很爽！！！

请注意，我这里强调的是“边干边学”，并不是蛮干。如果你只干不学，那是干不下去的，你也会被碰的头破血流的。前端框架永远只是框架，它不是万能的，内部的处理逻辑还需要你自己来写！

当然，新手在初始入门学习时，如果能有人带着是最好不过了。我在头条上已经开辟了《网站开发全攻略》系列专栏：从前端的页面开发，到后端的数据交互；从PC端到移动端；从基础知识讲解到完整的订单系统实例，全包含！预计总章节数在1500课左右，建议新手可以先从其中的第1个专栏学起，学习过程中碰到任何问题都可随时留言交流。

web前端怎么入门学习？

入门标准很简单

就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。

几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular、React、Vue 等框架的兴起，变成了百家争鸣的局面。这几年，Web 前端的技术发展真是太快了，相应地，技术栈也就变得非常多，除了最基本的HTML/CSS/JavaScript，以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系，还有 CSS 预处理器 Sass/Less/Stylus，还有 TypeScript，还有 grunt/webpack/gulp 等各种打包构建工具，还有其他一大堆技术栈。

这么多技术栈，我们不可能全都掌握，就算是资深的前端工程师，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些则熟悉 Vue，很少有人对三种框架生态体系都非常了解。因此，我们入门也没必要每种框架都学习，只要挑选一种就够了。而且，作为全栈，我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是 Angular、React 还是 Vuew，其背后的核心设计思想都是组件化的设计，因此只要掌握一种框架，我们也就能学习到前端技术的核心思想了。

那么，我们应该学哪种框架体系呢？我的建议是从 Vue 开始，因为 Vue 的学习成本是最低的，入门简单，而且这两年 Vue 可以说是出现了爆发式的增长，已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法，而且文档还大多都是英文。Vue 因为是国人开发和维护的，自然对国内的开发者更友好。Angular 则是个大而全的框架，显得太重，学习成本自然最高。至于 jQuery + Bootstrap 这套，已经过时了，建议没必要去学习了，毕竟我们的时间很宝贵，还有一大堆更有价值的东西等着我们去学。

因此，我们要入门 Web 前端开发的话，除了要学习 HTML/CSS/JavaScript 三大基础技术栈，还要了解 Vue 体系。而 Vue 体系，除了 Vue 框架本身，还包括其他技术栈。

下方是学习前端开发的学习路线：

以上，就是我爱编程网小编给大家带来的web前端开发初步认识 零基础小白如何从头开发一个前端应用？全部内容，希望对大家有所帮助！