什么叫前端？

感谢邀请

在回答这个问题之前，我想到了一道面试题：

当我们在浏览器中输入网址并按回车之后，接下来会发生什么？

我们来简单地看一看 “网页展现” 的整个过程。

比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。

有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。

当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。

一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css，它就会去请求这个资源。

HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js，此时浏览器同样会向服务器请求这个资源。

当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。

我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。

我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”；右侧的事情发生在服务器端，称为 “后端”。（“前端” 之所以叫 “前端”，是因为它离用户更近一些。）

大家都学过后端开发的相关课程，对后端这一块应该都比较熟悉了。那问题来了：在上面这个过程中，后端有哪些局限？

• 服务器一旦把资源提供给浏览器之后，便失去对内容的影响。
• 服务器无法得知用户在浏览器里做了什么，无法与用户交互。

这意味着，只有当用户下一次向服务器请求资源时，服务器才有机会再次决定用户看到的内容。那么，用户什么时候再向后端请求资源呢？

第一种情况是 “导航动作”。比如用户刷新页面、点击链接、点击浏览器的前进/后退等等。

第二种情况是用户提交表单。表单是最传统的页面交互方式之一，提交表单时浏览器会向服务器发出新请求——这意味着浏览器会跳转到一个新的地址，服务器会在新页面中显示表单的处理结果。

还有一种特殊情况，就是服务器在给浏览器返回 HTML 资源时，在页面中插入一个特殊的标记，浏览器看到这个标记就会在一定的时间后自动刷新当前页面或跳转到其它页面，相当于服务器强制用户再次发出请求。可想而知，这种非用户意愿驱动的页面跳转行为并不讨人喜欢，因此已经不常用了。

在传统网页中，上述几种用户与服务器之间的交互方式也算够用了。不过随着网页形态的不断演进，用户对网页体验提出了更高的要求，很多时候网页不仅仅是一篇静止的文档，而更像是一个应用程序，用户随时可能与之互动。这个时候，前端的价值就体现出来了。

• 用户从停留在当前页面到发起新请求的这段时间内，前端可以控制页面内容。
• 当用户停留在当前页面时，前端有能力与用户交互。由于前端的 JS 可以监听用户在浏览器中的各种行为（比如鼠标点击、键盘输入、滚动页面等等），前端就可以针对这些行为作出相应的反馈。

在前端与用户的交互过程中，有些事情光靠前端就可以做出响应。比如我们在网页上做了一个计算器的功能，当用户输入算式之后，JS 就可以直接计算出结果并显示给用户。整个过程不需要服务器的参与就可以完成。

但有些事情，光有前端是无法完成的。此时前端就需要交给后端来处理，拿到处理结果之后再交给用户。在这个过程中，前端可以让用户一直停留在当前页面，交互过程具有良好的连续性。

那么，前端如何把任务交给后端并拿到后端处理的结果呢？主要有两种方式：Ajax 和 Socket 连接。

Ajax 是最常见的前后端交互方式。它以 “请求→响应” 的方式来完成前后端的信息传递。传统的表单交互需求几乎都可以由 Ajax 改造为 “原地提交并获取反馈” 的交互方式，不需要跳转页面，从而有效提升用户体验。

而对于实时性比较高的场景，Socket 连接就是一个更好的选择。它的工作方式是前后端建立一个持续的连接，信息可以随时由前端发向后端，或由后端推送到前端。如果我们要建立一个实时对话的应用，通常就会用到 Socket 连接了。

前端需要用到哪些技术？

说到前端技术，我们通常都会说到 “三大块”：

• HTML
• CSS
• JS

这是前端最核心的三项技术。

接下来，我们就会说到 “前端的分层架构”。这个架构的原则就是 “让合适的技术去做合适的事情”。一个网页从逻辑上可以视为这三层的有机结合体：

• 结构层：这一层的作用是表述一个页面中有哪些信息，以及这些信息之间的关系是什么。这一层在技术上是由 HTML 来实现的。
• 表现层：这一层决定了页面中的信息会以什么样的外观呈现出来。这一层由 CSS 来实现。
• 行为层：这一层控制了页面如何与用户进行交互。在传统的展示型网页中，可能只需要 “结构层” 和 “表现层” 就足以提供完整的功能；而现代网页承载了越来越多的交互，这就推动 “行为层” 的能力不断增强。这一层由 JS 来实现。

我们通过一个实例来理解这个分层架构。

比如我是一个百姓网的用户，我打开了 “用户中心” 中的 “我发布的信息” 这个页面。

这个页面的 HTML 描述了信息以及信息的结构。即使没有 CSS 和 JS 的辅助，这个页面仍然可以呈现出可理解的内容（参见上图）。页面顶部是一些导航元素，接下来的 “显示中的信息” 是一个标题，它又引出了一个列表。这个列表自然就是我在百姓网发布的所有信息了。（除了 “显示中的信息” 以外，页面后半段还有 “已删除的信息”，这里不再赘述。）

接下来，我们会在表现层下功夫，通过 CSS 来为页面中的各个元素设定外观。经过这一层的修饰之后，页面中的内容更加美观了；更重要的是，各元素的功能职责也更加直观易懂了（参见上图）。

这已经是一个挺不错的网页了，但接下来，我们还会通过 JS 来丰富它的功能，提升用户的使用效率。

作为信息的发布者，我可能需要修改某条信息的内容，或对它进行 “刷新” 之类的操作。在传统的交互中，我需要在这个列表中点击需要操作的信息，然后在信息的详情页选择合适的操作。

我们可以把这个流程简化一下：我们在这个列表中为每条信息添加一个操作按钮，当用户点击某条信息的操作按钮时，我们就在页面中弹出一个操作面板，用户可以直接选择想要的操作，减少了中间环节（参见上图）。

由此可见，结构层、表现层、行为层这三者各有所长，共同构造了一个功能完备、体验良好的网页出来。

除了基本的 “三大块” 之外，作为前端工程师，我们还需要掌握以下知识和技能：

• HTTP 相关：由于前端资源都是浏览器通过网络下载的，因此我们有必要了解相关的网络协议。
• 浏览器相关：前端代码运行在浏览器中，我们需要了解浏览器的各种特性，以及浏览器向我们提供的各种接口。
• 前端性能优化：让网页更快，减少用户的等待，这也是前端工程师面临的重要课题。优化网页的前端性能，需要我们具备上面两项知识，并且掌握性能优化相关的工具和方法。
• 图形图像：网页信息不仅包含文字，还包含图片、视频等多媒体信息。图片作为最常用媒体资源，需要我们掌握与其相关的技能。比如了解各种图片格式适用的场景、基本的图片处理方法等等。

（在讲座中设立了一个 demo 环节，我会现场演示如何从零开始创建一个简单的网页，并实践 “前端的分层架构” 这一指导思想。）

前端的开发方式是怎样的？

前面我们已经介绍了前端技术 “三大块”，然而在如今，当我们在编写这三块的代码时，已经不再 “裸写” 了。这意味着我们在开发阶段编写的代码与实际在浏览器环境中运行的代码已经不一样了，详细来说：

• 我们通过模板语言来生成 HTML。
• 通过 CSS 预处理器来生成 CSS 代码。
• 通过 ES6+ 的语法和特性来编写 JS 代码。

举例来看吧，以下三个例子展示了代码书写方式的演化。

采用了 Jade 和 Jedi 这两种模板语言。在上图的代码中，我们仅仅使用了模板语言最基本的标记语法，还没有插入使用模板语言的任何逻辑能力。仅此一步，就可以看出模板语言带来的好处。

原先我们在写 HTML 代码时，会花费大量的精力在 <、/、> 这样的语法噪音上；同时，识别标签的嵌套关系也很费眼。幸运的是，Jade 和 Jedi 这样的现代模板语言把前端工程师解放了出来。它们通过缩进来表达嵌套关系，层级关系一目了然；语法更精练，表现力更强。

在 CSS 方面，预处理器一方面通过更简洁的语法减轻开发者的书写负担，另一方面通过内置的逻辑能力增强了代码的表现力。举个例子，在使用原生 CSS 来写代码时，不同元素采用的相同颜色只能分散在代码各处；而采用了 CSS 预处理器之后，我们可以把相同意义的颜色通过变量的形式抽象出来，然后在代码各处调用即可。这样不仅便于后期维护，在平时读代码时也更容易理解代码意图。

在 JS 方面，我们开始享受 ES6+ 带来的新特征福利。ES（ECMAScript）是定义 JS 这门语言的标准规范，从第六版开始，ES 以每年一版的节奏持续快速地扩展着 JS 语言的能力。

在以往，如果我们要实现 “在数组中找出符合特定条件的成员” 的需求，往往需要借助 Underscore 这样的工具库，调用它的 _.find() 方法。而在 ES6 中，语言本身就扩展了数组的能力，我们只需要直接调用 Array#find() 接口即可。另外，像箭头函数这样的新语法也可以令代码进一步简化。

在 HTML、CSS、JS 这三大块，我们放弃 “裸写”，采用 “更高级” 语言的目的在于：

• 利用高级语言提供的 “逻辑能力” 来增强代码的表现力。
• 利用高级语言的 “语法糖” 和 “新特性” 来提升开发效率和舒适度。

当然，采用这些更高级的语言也不是完全没有成本的。我们在开发阶段所用的语言已经不是纯粹的 HTML、CSS、JS 了，浏览器无法直接识别和运行。因此，当我们放弃 “裸写”，也就意味着：

• 在部署流程中需要设立构建环节，把源码编译到浏览器环境可以运行的目标代码。
• 在开发阶段，需要有工具来实时监视并编译有变动的源码，以确保页面上呈现的是我们修改过的最新效果。

在企业级的前端开发中，我们还需要了解如下知识点：

• 模块化：模块化是最常见的编程实践之一，令我们的代码组织更加清晰、易维护。ES6 为 JS 增加了完善的模块化方案，我们的日常开发也已经迁移到了 ES6 模块规范之下。
• 包管理：如何将开源社区中的优秀组件为我所用？这就不能不提 “npm” 这个最主流的 JS 包管理器。前端界优秀的开源项目几乎都发布到了 npm 的包仓库，我们日常开发中用到的第三方库也都是由 npm 来管理的。
  打包工具可以把我们写的模块化的源码和第三方包整合到一起，形成页面所需的完整 JS 资源。“包管理器”、“模块化”、“打包工具” 的相互结合，基本上就是日常的 JS 代码组织方式。
• 组件化：在传统的前端开发中，HTML、CSS、JS 这三块的代码有各自独立的文件，这些文件往往也分散在不同的目录结构中。
  如果页面功能区块的划分足够清晰，开发者就可以用 “组件” 的概念来把页面拆分，整个页面会被视为多个组件的嵌套和组合；同时，开发者也倾向于把每个组件相关的 HTML、CSS、JS 代码整合到同一个目录（或同一个文件）中，便于管理和维护。
  这就是 “组件化” 的开发模式。要实现这样的开发模式，通常需要前端框架和构建工具的配合。
• 单页应用：HTML5 的 History API 为前端提供了控制浏览器导航行为的能力，配合 Ajax 无刷新更新页面内容的特性，我们可以在一个页面内实现应用的多视图切换，避免页面的频繁跳转，提供类似桌面应用的体验。比如 Gmail 等产品就是典型的单页应用模式，百姓网的大多数后台系统也都是单页应用。
• 其它实用的知识点，就留待大家在工作中慢慢发掘吧。

前端开发是什么？给初学者有什么建议？

修真院内容部倾力打造，修真院技术总监沁修主讲，web工程师零基础全能课第一讲！



初识前端

1、前端开发是什么？
2、前端开发有前途吗？
3、前端开发哪里学？
4、前端发展
5、对初学者的建议
6、学习html入门
7、学习css入门

1.前端开发是什么？


前端开发是从网页制作演变而来。
早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。

随着互联网的发展，现代网页更佳美观，交互效果显著，功能更加强大。
因此现在的前端开发的主要技术通常是指html、css、js技术和一些开发框架的使用。

2.前端开发有前途吗？


如果在8年10年以前这么问，或许很多人会思考一下，说：不知道，应该没后端编程有前途吧
或者直接说：web前端有啥啊？不就是个美工吗不就是个页面仔吗？不就写个网页、js吗？工资又低。。。。

然而现在？
随着html5的崛起，css3的风靡，随着nodejs 的出现，JavaScript这个最容易被人误解的语言，终于散发了它本该有的光芒。

Javascript这个牛X的历史产物，现在真的可以说是万能的，至少在web层面是这样，交互、效果、数据操作、娱乐游戏、操作文件io等等。

而且由于现在是web应用时代，各种尺寸的电子设备增长式的爆发，只要和屏幕有关的就是颜值，颜值代表了一切，可以说是前途一片光明；

html5、网页游戏风靡全球，需要页面展现的东西都是前端范畴，前途一片光明；

目前世界上最多的可视化物质是什么？是网页，网页 ，网页，据统计现在全世界有亿级别的网页，这是什么概念，前途一片光明；

最最直观的：前端的工资从前几年的平均几K，到现在的10k、20k ，真的是前途一片光明！

3.前端开发哪里学？


前端开发应该在哪里学怎么学？
通常有3种选择：
一是报班，效果好但价格贵对时间要求高，不是所有人都能拿得出那么多时间和金钱去学习的。

二是自学，经济实惠但缺点是缺少指导缺少方向，如果没有出众的意志力规划力是很难学下去的；

三是报名线上课程，优点是价格相对便宜，通常有一个集体可以探讨问题，有老师指导方向，效果要比自学好很多
但缺点就是可能没有报班效果显著，比自学要贵一点。

因此到底该怎么去选择还是要看个人具体的情况去对症下药了。
还有许多人总是爱问，我现在多少岁什么学历什么专业什么性别我适合学XXX吗？

这种问题其实没太大意义，最重要的是知道一句话：
种一棵树最好的时间是在十年前，其次是现在。只要立即去学，比什么都强。

4.前端发展




前端的发展是经历了一些阶段性的发展的：
在最开始那些年是一个前后端不分的蛮荒时代，那个时候前后端没有分离，程序员是又当爹又当妈，要做前端又要做后端。

代码各种耦合在一起，服务器压力巨大，因为服务器会受到各种http的请求
例如静态的css，js，图片等，一旦服务器出现问题，前后台一起玩儿完，用户体验特别差。

而且开发上也是，UI出好设计图之后，必须先切html页面，再来套jsp等数据化的内容。开发时间变长，出错率也非常高
如果html发生变更，就更惨了，可以说是开发效率奇低。

后来随着开发和应用的需求变化，逐渐进入到了前后端分离的文明时代。
在文明时代的第一阶段，js通常使用原生js，但这样做的缺点也很明显：

首先是js语言设计比较草率，一些原生的api并不好用，因此需要更多代码来解决浏览器的兼容问题，需要大量的时间精力，对开发人员要求也比较高。

因此在第二阶段，为了解决原生js晦涩难懂还不好用的问题，出现了jquery等框架解救了万千开发人员。
和js相比，这些库的语法更简单，可以很容易地浏览文档，选择元素，处理事件等，也降低了开发人员的门槛。

到了第三阶段，因为随着互联网的发展，项目越来越大，前后端分离后的开发工作量越来越多的转移到前端上来。
一个简单的jquery库或者是underscore库等等已经难以管理控制整个项目了，代码变得越来越复杂难以修改。

这个时候就迫切的需要将代码更合理的划分以便于开发和管理，因此诞生了MVC这种取自于后端的概念沿用到前端来。

M是模型model用于数据保存
V是视图view用于用户界面绘制
C是控制器controller用于业务逻辑
这就将代码分层，成为了我们基本的MVC框架。

当然还有一些框架提出了MVVM模式，其实就是用View Model代替了Controller，成为了简化的Controller

这样做唯一的作用就是为view提供处理好的数据，不含其它任何逻辑，实现视图与数据模型的强耦合，数据的变化会实时反映在view上，不再需要手动处理。

5.对初学者的建议


第一，梳理信心，坚定目标。只要相信自己可以就一定可以。
第二，多练习多写，好的代码是写出来不是看出来的。

第三，不要停止学习，互联网的发展特别快，可能快过其他任何领域，因此不要有一次学习就可以工作终身的想法。

第四，开放的心态，去拥抱变化，不断尝新，并且停止争论语言和工具，把精力投放在更合适的领域。

6.学习html入门




学习html首先认识一下运行于浏览器上几门语言：
html，css和javascript。

html是一门标记性语言，负责描述网页的骨架，简单来说就是把网页分割成一个个的矩形，然后把这些矩形嵌套起来，形成层级关系。
CSS是一门装饰性的语言，负责描述这里面矩形的大小位置背景等外观。
javascript则是一门脚本语言。负责定义网页的行为，定义了哪个矩形在什么时候做什么事情。

值得开心的是js是一门非常容易入门的弱类型语言，但值得引起警惕的是，js也属于一门复杂的语言
它的复杂度即使是放在非脚本语言中来衡量，也是不容小觑的。因此学习它的过程中千万不能掉以轻心。

首先来看一下html元素的语法：
<p>this is content</p>
元素通常是由开始标签加闭合标签加上内容组成，标签由英文尖括号<>括起来
比如<html><p>这些就是标签，结束标签要比开始标签多一个斜杠。

另外元素可以防止于其他元素之中，无限极的嵌套。接下来看一个最简单的网页代码：

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>this is a head title</h1>
<h6>this is a head title too</h6>
<p>this is a param</p>
<ul>
<li>this is a list</li>
<li>this is a list...</li>
</ul>
</body>
</html>

首先是doctype文档类型。
在html刚刚出现的时期，文档类型是用来连接一些应该遵守的规则，有点像是自动校正等。

然而现在大家都不用管文件类型，只是因为历史原因还必须包含在代码中。
html，这个元素包含了整个页面的内容，有时也被称为根元素。

head，这个元素可以包含想添加的任意内容，但是不会被用户所看到。
通常包括想让搜索引擎搜索到的关键字、页面描述、css样式表和字符编码声明等等。

body，这个元素包含了想被用户看到的内容，不管是文本，图片还是多媒体等等。

meta charset=“UTF-8”，这个元素指定了字符编码，可以避免出现乱码等问题。

title，这个元素设置了页面的标题，显示在浏览器标签页上。

h1-h6，标题元素，指定文章的标题和子标题，它包括6个级别从1到6.

p，这个元素用来指定段落内容的。

ul/ol，列表元素
其中ul是无序列表，其中的顺序并不重要比如购物清单，这种就放在ul中；
ol是有序列表，每一项li都会默认自带数字。

元素还分为块级元素和内联元素。
块级元素在页面中以块的形式展现，一个块级元素会新开始一行并且尽可能撑满容器。

比如div p h1-h6 header footer section等。
一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

内联元素也叫行内元素，通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。
内联元素不会导致文本换行：
它通常出现在一堆文字之间例如超链接元素<a>或<span>包裹一些文字，或者强调元素<em>和 <strong>。

7.学习css入门




在css中，选择器是一种模式，用于选择需要添加样式的元素。最常见的选择有：

选择器说明例子*选择所有元素*id选择id为intro的元素#introclass选择class名为navs的元素.navselement选择所有p元素p结构选择所有的div和p元素
选择div内部的所有p元素
选择父元素为div元素的所有p元素
选择紧邻在div元素之后的所有p元素div, p
div p
div > p
div + p
学习css首先要学习的概念是盒子模型

盒子模型有5种主要属性：
宽和高让盒子有基本的形状大小；
border是盒子的边框，可以设置厚度和基本形态以及颜色；
padding是沿着border在内部产生的一个边距，让盒子内部的内容和边框产生距离；
margin则是沿着border在外部产生的一个边距，让盒子之间产生距离。

其次是知道浮动的概念，浮动在文档布局中是一个非常重要的概念。

通常块级元素在页面中独占一行，自上而下成为流。
元素浮动之后，会被移出正常的文档里，根据设置向左或者向右平移，直到碰到了所处容器的边框，或者是另外一个浮动的元素。

当一个元素浮动之后，不会影响到块级元素的布局只会影响到内联元素比如文本的排列。
浮动有3个属性值，left，right以及none，分别表示向左向右浮动和不浮动。

元素浮动之后通常会产生一个高度塌陷的问题，因为浮动的元素已经脱离文档流，无法撑开父级元素的高度，因此出现高度塌陷。

也就是说浮动元素的父级元素不会自动伸缩来闭合浮动元素。
为了解决这个问题就需要清除浮动：

.container::after {
content: “";
display: block;
clear: both;
}

这样来让元素盒子的边不能和前面的浮动元素相邻。

或者是用overflow的方式：

.content {
overflow: hidden;
height: auto;
}

这样做的原理是触发BFC。
BFC的意思是block format content，块级格式化上下文，也就是产生一块独立的不受外界影响的盒子区域。

其触发如下：
该元素为根元素，即HTML元素
该元素float的值不为none
该元素overflow的值不为visible
该元素display的值为inline-block、table-cell、table-caption
该元素position的值为absolute或fixed

运用举例：

以上就是【前端初识】课程的内容解析啦
想进一步深入的同学欢迎加入我们的IT交流群557222766共同讨论学习~

技能树.IT修真院 http://www.jnshu.com

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。这里是技能树.IT修真院，初学者转行到互联网行业的聚集地。"

学会计的表弟化身十万个为什么的问我！

你们前端到底是干什么的？

为什么我的同学好多转行去做这个的？

你们前端程序员真的这么赚钱么？

你也别跟我说什么敲代码的，你告诉我，你敲得这是什么代码？

有什么用？

难学吗？

前景怎么样？

我看他化身为十万个为什么！想转行的算盘打的哐哐响，也就好好说说前端这些事儿！争取让啥都不会的小白都能听得懂。

前端是做什么的？

来！我们先看图！

我打赌你没有看完！所以不管你是浏览网页, 还是使用 APP, 你肯定不想看到一堆数字或者说是没有灵魂的数据。

相比较于数据, 我们可能更喜欢看图片！
图片也有差别，可以是这样的！

当然也可以是这样的！

我们还怕你看着枯燥, 变着花样的给你展示一些数据, 让你有一些参与感

怕你登录的时候无聊, 带你玩点小游戏(验证)

在你浏览网页时，还会有令你面红耳赤的弹窗性感荷官,在线发牌。

当然, 为了赚钱, 我们也会在你成为会员以后才让你复制我的论文

这就是我们前端的工作,总的来说, 就是想尽一切办法, 展示内容给用户看到，时不时的和用户来一些小互动( 点击, 双击, 拖拽, 输入, 发个验证码, ... )这些都是前端的工作范畴。其实每当我们看向各种电子设备的屏幕时，我们就看到了前端（老年诺基亚除外）。

前端工程师就是Web应用程序的设计者和构建者。他们使用HTML、CSS和JavaScript等技术，来构建和设计Web应用程序的用户界面，以及为用户提供交互性和动态特效。

前端的应用，应用简直不要太广泛，就简单举几个例子你就知道了。

网站开发:

我们打开电脑浏览器，看到的所有网页都是前端给我们展示出来的。成千上万的网页都是前端搞定的！通过使用HTML、CSS和JavaScript技术，前端工程师可以创建各种类型的网站，包括个人博客、电商网站、论坛等等。你所看到的微博，淘宝京东都是前端基础搞出来的！在电商网站中，前端工程师可以使用JavaScript实现用户界面的交互效果，比如商品搜索、商品筛选、购物车等功能。

移动应用开发:

我们用的所有APP的界面，也都有前端的参与，游戏也有一部分是！（很多活动页面都是用前端基础写的，充值648的页面就是前端写的）

例如前端技术React Native。React Native是Facebook推出的一款跨平台移动应用开发框架，可以使用JavaScript和React来构建原生移动应用。

例如，美团外卖就是使用React Native开发的。

游戏开发:

前端技术在游戏开发中也得到了广泛应用。主要是小游戏，网页游戏等例如，一些基于HTML5技术的小游戏，比如《俄罗斯方块》、《打地鼠》 等。大型游戏就不是前端的范畴了！

智能家居:

智能家居需要前端技术来实现各种智能设备的交互界面。例如，通过使用HTML、CSS和JavaScript技术，前端工程师可以实现智能家居设备的远程控制、数据展示等功能。

数字化转型:

前端技术可以帮助企业实现数字化转型。例如，前端工程师可以为企业开发一个基于Web的管理系统，用于管理企业的各项业务数据。可以看出来前端应用是非常广泛的，随着技术的不断发展，前端技术在各个领域的应用也会越来越广泛。

前端真的挣钱吗？

能挣钱！不然不会这么多人来做！不然不会有那么多的网页，APP，小程序。一般来说，前端工程师的薪资水平与其学历水平、面试情况以及所在地区有关。

• 专科前端工程师的平均薪资水平在6k-12k左右
• 本科前端I程师的平均薪资水平在12k-25k左右

当然，这只是大致的数据，实际的薪资水平还需要结合具体情况进行判断。在发达的线城市，前端工程师的薪资水平普遍比其他地区高出一些。

前端行业前景怎么样？

前端技术是互联网领域中最热门门的技术之一，我们有数以万计的网页，APP，小程序界面需要前端，新兴的元宇宙， Web3.0的新概念也依然离不开前端。未来几年前端行业的就业前景还是非常不错的。主要表现有

政策福利:

国家数字化转型的推进为前端技术的发展提供了巨大的政策支持。政府鼓励企业将业务转型到互联网平台，这就需要前端技术的支持。未来，国家将进一步 加大对前端技术的政策扶持，为前端工程师提供更好的发展平台。

市场环境:

随着各行各业数字化转型的不断进行，现在衣食住行也都被搬到了互联网上。这也就导致对前端技术的需求也越来越大。不仅是互联网行业，传统行业也需要借助前端技术实现数字化转型。因此,前端工程师的就业前景非常广阔。在未来，前端技术的市场需求还将继续增长。

人才需求:

因为前端的工作性质（网页，APP，PC端应用等等都需要），虽然前端技术的门槛相对较低，但优秀的前端工程师非常稀缺。这主要是因为前端工程师需要具备扎实的技术基础和丰富的项目经验。对于企业而言，良好的前端技术能够为其带来更好的用户体验和更高的收益。因此，市场需求量远远高于人才供应量。学习前端技术可以获得更多的就业机会和发展空间。

前端工程师需要学什么？

前端工程师需要具备以下技能:

扎实的HTML、 CSS和JavaScript等 技术基础

这些技术是前端工程师最基本的工具，需要掌握基本语法、特性和用法。这些是前端开发的基础，相当于大厦基石。虽然到了最后我们只是几行代码就能搞定HTMLCSS，但是他们就像我们认识的一个个汉字一样，只有认识了它们才能书写出文章来啊！就像数学家不能不认识123456789一样。

熟练掌握常用的Web开发框架和库

例如Vue，React. Angular等 。这些框架和库可以大大提高Web应用程序的开发效率和代码质量，所谓的框架，简单的说，其实就是提高我们开发效率的工具。比较流行的框架就是Vue和React，两个都是需要掌握一下的。

了解浏览器和操作系统的基本原理

以及如何进行调试和测试。这些知识可以帮助前端工程师更好地理解Web应用程序的运行环境，并能够快速识别和解决问题。

良好的沟通和协作能力

能够与设计团队和 后端开发人员紧密合作。这些能力可以帮助前端工程师更好地理解和满足用户需求，确保Web应用程序的质量和一致性。

整理了一套web前端学习路线，通过本教程的学习，可以从零开始，一步步的掌握前端开发的各项相关技能，最终达到企业对初级前端开发工程师，中级前端开发工程师，高级开发工程师，全栈开发工程师等职位的要求。

本学习路线涉及web前端知识点包含：HTML入门知识以及CSS基础语法，javascript日常开发，能够实现所有常见特效及数据交互动作，nodeJS、vue.js、react、Angular4等开发知识，vue、小程序、移动端页面、HTML+css等的实战应用，及掌握node.js、vue、js等web前端面试常见的问题。

前端门槛

前些年门槛很低，认识26个英文字母简单的英文单词就可以了！近些年门槛稍微提高，简单的英文，九年义务教育水平的数学逻辑，还有持之以恒的坚持。尤其是在学习JavaScript时多练多记。事情就是这么个事情，情况就是这么个情况！

要学习一个新技能肯定是要下一番功夫的，最怕的就是，自己装作努力的样子，却并没有全心投入学习，还告诉自己的我真的不适合这个！前端的学习更是如此，入门很简单，抬一抬脚就可以进门，可是要登堂入室却需要走很远的路！

我认识一个男生，学的应用物理专业，两年前他毕业的时候，本来在家人的劝说下想考公务员了，但是经常家里来人都躲在自己房间里，平时说句话也“字字斟酌”，也不太适合做公务员。

一次他找到我，问我“前端是什么”他能不能做。其实不是程序员就是性格内向的人做，是这个岗位不论资排辈，不管你什么经历，什么出身，只要技术够牛，你就是牛！后面发展也不受限制，性格开朗的人可以做管理，内向不爱说话可以做资深技术。

这里补充一句，做任何行业都需要与人沟通，只不过程序员对这方面的要求没那么高。

那前端到底是什么呢？

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。说直白点就是我们上网看到的界面，都是前端工程师来完成的。

学习前端，三大核心必须知道，并且决不能马虎，一定要把基本的内容学精，学扎实，这样万变不离其宗，不论后面技术怎么革新，底层的原理不变，接受起来，也容易很多。

第一，HTML

是超文本标记语言，是用于描述网页文档的一种标记语言。我们上网所看到网页，多数都是由html写成的。浏览器通过解码html，就可以把网页内容显示出来，它也构成了互联网兴起的基础。

第二，CSS

是级联样式表，又叫风格样式表，它是用来进行网页风格设计的。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

第三，JS

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

第四，框架

至于框架现在流行的框架是vue和react。想进大厂的伙伴react是必须要学的，现在很多大厂都用react。其实框架就是用来提高工作效率的，随着互联网的发展，各式各样的框架相继而出，大家根据公司需求选择就是了。

我是学姐，一个正在创业的前端工程师，如果你同样迷茫不知道前端该如何学习，可以加入我的自学团，会有知识分享，匹配学习伙伴，还可以参加我组织的上线项目及活动。

想加入的伙伴给我留言或者直接私信。

小伙伴们从0-1的项目展示：

看完点赞哦~想加入的伙伴给我留言或者直接私信。

到底什么叫前端？

我对『前端』的理解，

前：代表与人直接打交道的这部分，包括界面的展现，与用户的交互等

端：代表输出终端，例如pc浏览器，手机浏览器，甚至有些app，有些应用程序

合起来的意思也就是这些浏览器，app，应用程序的界面展现以及用户交互就是前端

前端工程师是做什么的？

前端工程师主要利用HMTL与CSS建构页面，用JavaScript完善交互以及用户体验

对应着大学的什么专业？

目前大学貌似真的没有相关专业吧（至少我上大学的时候还没有）。。。

？

都说前端行业前景好，用行话来说，前端年薪20万踮踮脚还是能够得到。说得很多小伙伴心痒痒的。心中萌发了想学前端的打算。学前端之前，我们首先要了解，到底什么是前端？前端有哪些运用场景？前端能做哪些事情？读文字太累，那就打开视频一起来看看，到底什么是前端？

拿这个问题举例吧。

后端工程师的任务是，你访问这个问题的 url 时，在服务器端返回「工程师」的标签、「什么叫前端？」的标题、问题描述以及各位的回答等页面上的内容。

前端工程师负责把这些元素排列在浏览器的窗口中。这么说有些简单，首先用 HTML+CSS 进行页面排版，设定各个元素的位置、大小、颜色等信息；其次用 JavaScript 和 Ajax 等给页面赋予功能，使得你可以正常使用关注问题、发布回答、搜索、提问等按键；最后确保这些东西在不同的设备、不同的 OS 和不同的浏览器下都可以正常使用。

我印象里大学没有这个专业，因为分工上太细了但是干的活又太复杂了= =

这里所指的前端，是前端开发，也叫web前端开发，从业者叫前端开发工程师，它是程序开发中重要的组成部分，主要负责软件或者网站用户界面的开发。

前端开发岗位是随着互联网的发展而产生的，在早期它的称呼通常是美工或者UI开发，它同时负责UI设计及开发。随着对用户体验的要求越来越高，UI交互越来越复杂，美工又细分为设计和开发两个岗位，当然设计又分为信息架构，交互设计和视觉设计。开发自然就是前端开发，它与设计人员、后端开发人员协同工作。

前端开发主要用到的技术有html，css，javascript这三种基本语言，相关对应的框架技术又很多，这里不做推荐。

前端开发是这个时代不可缺少的岗位。

一、前端是什么？

前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

（核心技术：HTML、CSS、JavaScript）

核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

二、前端都需要学什么（可以分为八个阶段）？

<1>第一阶段：

▪ HTML+CSS:

HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发、

▪ JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

▪ JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

▪ JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

<2>第二阶段：HTML5和移动Web开发

▪ HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

▪ CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、flex布局、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

▪ Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

▪ 移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、手机聚划算页面、手机滚屏。

<3>第三阶段：HTTP服务和AJAX编程

▪ WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

▪ AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用、会处理简单的GET或者POST请求、

▪ AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

<4>第四阶段：面向对象进阶

▪ 面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、ES6中变量的作用域（let ，const(声明变量只读)，块级作用域），ES6中函数新特性。

▪ 面向对象三大特征：

继承性、多态性、封装性。

▪ 面向对象中创建对象的五种方法：

自定义对象 、工厂模式创建对象、构造函数、 混合模式创造对象、JSO格式创建对象。

<5>第五阶段：封装一个属于自己的框架

▪ 框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

▪ 框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

▪ 框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

<6>第六阶段：模块化组件开发

▪ 面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

▪ 面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

<7>第七阶段：主流的流行框架

▪ Web开发工作流：

GIT/SVN、Vue-cli脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

▪ 前端主流框架：

Vue.js、Angular.js、React.JS、Bootstrap。

▪ 常用库：

React.js、Vue.js、JQuery.js。

<8>第八阶段:Node.js全栈开发：

▪ 快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

▪ 核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、 http://Socket.IO。

▪ Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

▪ 快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

▪ Node.js开发电子商务实战：

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

我是云鹿师兄，在职前端工程师，如果你也在自学前端，比较迷茫，不知道未来如何规划，可以加入我的学习营，和大家一起学习，互相督促，分享学习经验、学习资料，遇到问题还可以一起讨论解决。

问题下一堆回答，没一个能把前端讲明白，我也真的是服了。

难道前端工程师都是骗子吗？

如果觉得有帮助，麻烦动动小手给我点个赞噢！

什么是前端？什么又是后端呢？

1，在你机子上（PC端/手机端）看到的界面，安装的程序。给用户看的、操作的就是前端。你看不到的，帮你保存网络游戏数据，保存应用数据，处理数据的就是后端（服务端）。

2， 目前一般来说，前端指的就是浏览器端，后端指的就是直接为浏览器端提供服务以及数据的服务器端。

3， 从大的方面来讲，你所能看到的一切，网页、移动端网页、小程序、甚至某些app，都是前端程序员的。

前端工程师是做什么的？

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。

2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。

3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。

4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

前端工程师的现状。

1.从薪资和地位方面来讲，以前的前端处于程序员鄙视链的底端，但是现在地位大幅度上涨~不过在某些固执的人或者刚刚入行的人眼里，前端的地位还是不高，这也不怪他们，毕竟在很多时候，技术核心都是偏向于后端的，比如，高并发、分布式、安全、中间件等等，这些是决定一家公司业务规模的核心技术，而前端是不怎么接触到这些，但是随着用户们不断的索取更好的用户体验，前端同学也会扮演着越来越重要的角色。其实说那么多，我觉得都不如从薪资来说，其实大部分情况下，后端前端都是一个批发价的…大家都是打工仔没啥好互相鄙视的。

2.从需求来说，前端还属于需要人的阶段，从各个招聘软件的需求来看，前端需求量仅次于JAVA，是非常需要人的！不要说饱和，你如果说饱和，那互联网里还有什么不是饱和的？AI不饱和，但是普通人干得了吗？从来就没有什么饱和，只有想走捷径的菜鸟饱和而已。只会用JQ的，框架和基础都不怎么样的，这样的人，你当然觉得工作难！

3.从技术层面来说的话，现在已经不是会了JQ就能打天下了，现在你起码需要熟练使用一个框架吧？然后当前炙手可热的小程序也得会把？自动化工具也得会使用吧~如果你只会一个JQ，那活该没工作…

4.中国程序员已经足够的内卷了,通常是面试考察怎么造火箭,工作了发现你只是一个为火箭拧螺丝的工人. 前者造火箭是技术活,后者拧螺丝是苦力活,其中差别自行体会.

但是,拿到这份拧螺丝的工作,也需要你知道造火箭的原理,哪怕大部分情况下工作根本用不到,就算有需要,百度几分钟解决.

那为什么面试考察这些呢? 一个是看基础是否扎实, 一个是看你是不是那种愿意花功夫去提升自己的人,

但是归根结底,这都是你跟竞争者拉开差距的必要条件-----中国人太多了,对于企业来说,人口红利时期还没有过去.尤其是近两年,三百六十行,行行转IT,拉低了IT行业的下限,什么阿猫阿狗看几天培训的视频,就自称工程师,真是贻笑大方。

前端工程师的未来

如果你只走技术道路的话，你会发现，那你可能一辈子写前端写JS吗？然后成为前端大牛吗？不可能的，前端只走技术往后的话基本上都是走业务架构这条路,这考验的就是大局观了,你只会一个前端是根本不行的，这个时候靠的是你全面的能力和良好的大局观,而像后端的JAVA、php，你都会涉及，所以你当初的那些所谓的前端技术亦或者后端技术就是个敲门砖了。

工程师不要被所谓的语言什么的限制！

上面说的是只走技术，当然了你也可能中间做了管理或者做了产品经理甚至于自己创业，当然还有可能因为长期停滞不前被技术革命，这都是有可能的~.

总结

前端是干啥的？笼统的说前端就是以各种姿势写各种页面。

前端的现状如何？现状还是很好的，低端饱和，但是仍然缺少真正能干活的！

前端工程师的未来？如果你只走技术层，就不要被语言所束缚，不要局限于前端。

原来这就是前端啊、我以为是个多么高大上的职位呢？原来我也会一些

随着HTML5技术的发展和移动设备的兴起。前端是从网页设计师和后台程序员中间衍生出来的职业。让你在任何设备上对网页上的操作都更加方便友好。由于是新兴职业，目前大学里没有专门的这个专业

前端开发主要职能就是把网站的界面更好地呈现给用户随着手机成为人们生活中不可或缺的一部分，成为人们身体的延伸，人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外，前端技术还能应用于智能电视、智能手表甚至人工智能领域。前端开发就是做:

★软件开发

★微信小程序 ★网页设计

★网站建设★APP开发

★游戏开发

Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上前端发展的步伐。想成为一个一直受欢迎的前端工程师必须不断提升自己，不断学习新技术、新模式，仅仅依靠今天的知识无法适应未来。自学走的弯路很多，付出和收获的不成正比，创建了一个自学团，刚开始十多个伙伴一起学习，慢慢学习团逐渐强大，自学团里会有经验丰富的大神免费分享学习资料，学习伙伴从零基础开始学习。