一、什么是前端

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

​ 前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript

* 广义前端：所有用户可以直接看见并交互的界面
* 侠义前端：浏览器上运行的用户交互界面

效果图是由UI设计师用Photoshop(少量设计师用firework)来设计的
把效果图布局成页面，需要用到HTML语言和CSS语言
页面功能的开发需要用到javascript
为了快速开发和系统开发，还需要学习一些前端的javascript库和框架

二、前端基本内容概述

HTML

HTML(超文本标记语言)是一种用于创建网页的标准标记语言.

*超文本标记语言 Hyper Text Markup Language
* 负责完成页面的结构
* 文件后缀：.html .htm

###### v_hint：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

CSS

CSS(层叠样式表)是一种用来为结构化文档添加样式的计算机语言.

* 级联样式表 Cascading Style Sheet
* 负责页面的风格设计，样式、美观
* 文件后缀：.css

JavaScript

JS(JavaScript): 一种高级的，解释执行的编程语言.
解释型语言: 将代码一句一句直接运行, 不需要像编译语言经过编译器先行编译为机器码之后再运行

* 浏览器脚本语言，可以编写运行在浏览器上的程序
* 负责编写页面特效、调用浏览器的API\(BOM\)、操作改变页面内容\(DOM\)，从后端获取数据\(Ajax\)，渲染页面等
* 文件后缀：.js

###### v_eg：big house、live perple

ES6

ES6(ECMAScript6)是新版本JavaScript语言的标准.

AJAX

AJAX: 用 JavaScript 执行异步网络请求.
AJAX的优点: 在不重新加载整个页面的情况下, 可以与服务器交换数据，并更新部分网页内容.

jQuery

jQuery是一套跨浏览器的JavaScript库, 简化HTML与JavaScript之间的操作.

React

React(React.js): 一个为数据提供渲染为HTML视图的开源JavaScript库.

RequireJS

RequireJS: 一个JavaScript模块加载器.
好处: 使用RequireJS加载模块化脚本将提高代码的加载速度和质量.

AMD

AMD(Asynchromous Module Definition): RequireJS在推广过程中对模块定义的规范化产出，它是一个在浏览器端模块化开发的规范.

Webpack

Webpack: 一个开源的前端打包工具.
好处: 提供了前端开发缺乏的模块化开发方式, 将各种静态资源视为模块, 并从它生成优化过的代码.

Gulp

Gulp(Gulp.js): 基于文件流的构建系统, 部署代码的工具.
用法: 开发者可以使用它在项目开发过程中自动执行常见任务.
相比较Grunt的优点: 插件使用方式比较统一, 更容易阅读、维护.

Grunt

Grunt(Grunt.js): 基于文件流的构建系统, 部署代码的工具.
用法: 开发者可以使用它在项目开发过程中自动执行常见任务.

Bootstrap

Bootstrap: 用于快速开发Web应用程序和网站的前端框架.

Amaze UI

Amaze UI: 一款跨屏的前端框架, 一款简单、灵活的用于搭建 Web 页面的 HTML、CSS、JavaScript 的工具集.

Flex布局

Flex(Flexible Box), 意为”弹性布局”.
用途: 用来为盒状模型提供最大的灵活性.

Vue

Vue(Vue.js): 一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架.

三、JavaScript框架 前端三大框架（Angular.js 、React.js、VUE）

五、学习目录：

HTML

CSS

Photoshop
前端页面开发流程
HTML5和CSS3
移动端页面开发
常用css列表

JavaScript

jQuery
移动端库和框架
正则表达式
前端优化

参考：

前端开发概述（简单笔记）

前端基本内容概述

前端概述   (https://www.jianshu.com/p/e29896bf9a2c)

前端概述  (https://www.cnblogs.com/zhouxiang9193/articles/9694141.html)

web前端三大主流框架是什么

WEB前端三大主流框架

前端开发进化史，你经历过哪几个时期？ 

三 发展历史

 3.1 原始社会

 3.2 石器时代

1994 年，PHP 出现了，有了将数据嵌入到 HTML 中的形式，这意味着互联网行业出现了钻木取火，不断朝石器时代发展。

这时候的互联网，兴起了数据嵌入模板，模板直接写样式的开发模式，例如 MVC 模式：

• Model（模型层）：提供/保存数据。
• Controller（控制层）：数据处理，实现业务逻辑。
• View（视图层）：展示数据，提供用户界面。

在此时，前端只是后端 MVC 中的 V，所以那时候的所谓 “前端工程师” 还没有对应的概念，前端开发人员都喜欢自称 “切图仔”。

后来，因为后端太忙，没空写页面样式让它长得更好看些，于是才有了前端编写页面模板后，让后端代码读取模板，替换变量，渲染出页面。

以 PHP 框架的 Laravel 为例：

1. 用户提交请求
2. 根据路由不同请求对应的 Laravel 控制器
3. 控制器与模型交互
4. 控制器调用结果页面
5. 在用户浏览器上渲染页面

 3.3 铁器时代

1995 年，网景推出了 Java，形成了前端的雏形：HTML 为骨架，CSS 为外貌，Java 为交互。

而到了 1998 年前后，Ajax（Asynchronous Java And XML：异步的 Java 和 XML）得到了相对的应用，并且在之后逐渐被使用到各个页面上，从而促进了 Web 从 1.0 的静态网页，纯内容展示向 Web 2.0 模式迈进：

Web 2.0 时代：动态网页，富交互，前端数据处理

 在 Ajax 的普及中，有三件事是值得一提的：

• 2004 年：Gmail
• 2005 年：Google 地图
• 2006 年：Ajax 被 W3C 正式纳入标准

这时候，前端不再是后端的模板，它可以独立得到各种数据。相对于 Web 1.0 的时代，Web 2.0 由石器时代迈向了铁器时代！

在 Web 2.0 的时代中，在 2006 年的时候，用于操作 DOM 的 jQuery 出现了，它快速地风靡了全球。大量的基于 jQuery 的插件构成了一个庞大的生态系统，从而稳固了 jQuery 作为 JS 库一哥的地位。

jQuery 的影响是源远流长的。即时到了今天，还是会有用 jQuery 一把梭、jQuery + gulp 的前端工程化的项目等……无它，唯方便而。

 3.4 工业时代

伴随着信息时代、大数据时代的到来，jQuery 在大量的数据操作中的弊端体现出来了，它在对 DOM 进行大量的操作中，会导致页面的加载缓慢等问题，这时，有些前端开发人员逐渐觉得力不从心了……

• 2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。
• 2009 年 AngularJS 诞生、Node诞生。
• 2011 年 React 诞生。
• 2014 年 Vue.js 诞生。

四 技术比较

 4.1 JSP 与 jQuery

何为 JSP？

JSP 全称 Java Server Page，是 Java 企业应用的一种动态技术。Java 和 JSP 是运行在服务器端的，也就是说他两运行的结果生成 HTML，HTML 是静态页面，而 JSP 是动态页面。

何为 jQuery？

jQuery 是一个轻量级的 Java 库。jQuery 能够使用户的 HTML 页面 和 JS 内容分离，也就是说，jQuery 的使用，更有利于 HTML、CSS、Java 三者的分离，使得前端代码得到更好的维护。

。。。

以此同时，Java 经过时间的沉淀，越发凸显了它的强大。所以，在诸多因素之下，就有了前后端的分离：后端人员提供接口，前端人员使用 jQuery 中封装好的 Ajax 调取接口获取数据，渲染到页面上。

 4.2 jQuery 与 Vue

在上面的 JSP 与 jQuery 的比较中，我们会发现一个问题，就是 jQuery 在数据操作上，它需要操作的步骤太多了。而且，频繁地操作 DOM。在数据量比较大的情况下，还会造成页面卡慢。

而这时候，就有了 MVVM 等 MV* 概念的提出：

何为 MVVM 模式？

• Model：提供/保存数据。
• View：视图。
• View-Model：简化的 Controller，唯一的作用就是为 View 提供处理好的数据，不含其它逻辑。

 简单来说，就是 MV* 模式，将对数据的操作提升上去了。在 Vue、React、Angular 等 MV* 框架中，可以通过对数据的操作，从而完成对页面数据的渲染。

但是，对 jQuery 与 Vue 进行比较，是推崇 Vue，建议全面废弃 jQuery 吗？并不是。

• Vue 适用的场景：复杂数据操作的后台页面，表单填写页面。
• jQuery 适用的场景：比如说一些 HTML5 的动画页面，一些需要 Java 来操作页面样式的页面。

正应了那句话：“没有最好的框架，只有更适合的应用”。

我们应该根据项目的需求，对技术进行不同的选取。就好比在公众号的 H5 页面上，jsliang就很喜欢用 jQuery 进行操作，因为它简单粗暴好操作，在动画效果的编写上也不错；而在使用 Echarts 进行报表演示的开发中，我更喜欢使用 Vue，因为它能很简易地对后端传回的大量数据进行操作。

4.3 Vue 与 小程序

 。。。

区分它们的适用场景：

• Vue：简单易学，灵活轻便。相对于 React 和 Angular 来说，它的学习成本低，适合快速上手，且学习曲线比较平缓。
• React：灵活性很高，生态圈强大。相对于 Vue 来说，React 在数据操作方面更灵动；相对于 Angular 来说，它的学习成本更低。
• Angular：完整的框架体系。相对于 React 和 Vue，它是一个成熟完善的框架。
• 微信小程序：简单轻便。相对于 Vue 来说，它更加便捷了，而且微信小程序有上传的代码大小限制，使得微信小程序是真的 “小”。而且微信小程序结合微信，提供了很多 API 供开发人员使用。

因此，前端团队在项目开发前，可以就项目涉及领域进行探讨：

• 假如你想快速开发一个成本低的小应用，可以考虑 Vue。
• 假如你想开发一个大型应用，可以考虑 Angular。
• 假如你想开发一个跨平台应用，可以考虑 React。

今天的文章前端技术概况分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。