一、什么是前端
前端即網站前台部分，運行在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
首先，css他不是編程語言，他只能提供一些樣式的修改，沒有一些循環、判斷等語法；但是在前端開發中，可能需要一些樣式的調整，比如說雙十一頁面調整一下顏色，雙十二字體調整一些大小，這時就需要CSS預處理器了；CSS預處理器帶有編程特色、最終的結果就是生成CSS樣式；用一門專門的編程語言，進行頁面WEB頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用；
常用的CSS預處理器
SASS：基於Ruby，通過服務端處理，功能強大，解析效率高，需要學習Ruby語言，上手難度高於LESS
LESS：基於NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率低於SASS，常用
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）
1、JQuery
2、Angular
AngularJS誕生於2009年，由Misko Hevery等人創建而成，后來被Google收購，AngularJS彌補了HTML在構建應用方面的不足，它是一款優秀的前端JS框架，通過使用標識符結構來擴展Web應用中的HTML詞匯，使得開發者能夠使用HTML來聲明動態內容。
Angular特點：
基於 MVVM 開發模式
Dependency Injection（依賴注入）
TypeScript
模塊化
3、React
React特點：
Virtual DOM
聲明式設計
高效、靈活
JSX
組件化
單向響應的數據流
4、VUE
Vue特點：
基於MVVM開發模式
漸進式
數據驅動友好
組件化
輕量
簡潔
快速
模塊化友好
5、Axios
四、前端UI組件
1、Aut-Design：阿里出品，基於React的UI框架
2、ElementUI：餓了么出品，基於VUE的UI框架
3、BootStrap：前端開發的開源工具包
4、AmazeUI：也叫“妹子UI”，一款HTML5的跨屏前端框架
前端打包程序：WebPack-模塊化打包器，主要作用是打包、壓縮、合並及按序加載
五、學習目錄：
HTML
CSS
Photoshop
前端頁面開發流程
HTML5和CSS3
移動端頁面開發
常用css列表
JavaScript
jQuery
移動端庫和框架
正則表達式
前端優化
參考：
前端概述 (https://www.jianshu.com/p/e29896bf9a2c)
前端概述 (https://www.cnblogs.com/zhouxiang9193/articles/9694141.html)
前端開發進化史，你經歷過哪幾個時期？
三 發展歷史
3.1 原始社會
3.2 石器時代
1994 年，PHP 出現了，有了將數據嵌入到 HTML 中的形式，這意味着互聯網行業出現了鑽木取火，不斷朝石器時代發展。
這時候的互聯網，興起了數據嵌入模板，模板直接寫樣式的開發模式，例如 MVC 模式：
- Model（模型層）：提供/保存數據。
- Controller（控制層）：數據處理，實現業務邏輯。
- View（視圖層）：展示數據，提供用戶界面。
在此時，前端只是后端 MVC 中的 V，所以那時候的所謂 “前端工程師” 還沒有對應的概念，前端開發人員都喜歡自稱 “切圖仔”。
后來，因為后端太忙，沒空寫頁面樣式讓它長得更好看些，於是才有了前端編寫頁面模板后，讓后端代碼讀取模板，替換變量，渲染出頁面。
以 PHP 框架的 Laravel 為例：
- 用戶提交請求
- 根據路由不同請求對應的 Laravel 控制器
- 控制器與模型交互
- 控制器調用結果頁面
- 在用戶瀏覽器上渲染頁面
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。