1.什么是前端？

所謂前端即web前端，其實(shí)存在于我們生活的每個(gè)角落，和我們的生活息息相關(guān)，手機(jī)中的app應(yīng)用，電腦瀏覽的網(wǎng)站，我們的微信，QQ等等，其中都有前端的影子，可是前端在其中具體扮演什么角色呢？

其實(shí)就是寫網(wǎng)頁(yè),app的。

2.前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā)

前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì)，前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5、CSS3，以及SVG等。

但是

那那，圈起來(lái)，敲黑板，這是重點(diǎn)，要考的。

  HTML,CSS,Javascript

這三個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。

HTML

指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了，經(jīng)歷了多個(gè)版本的發(fā)展，已經(jīng)發(fā)展到5.0版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，已普遍升級(jí)到了XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML

CSS

級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力

javascript

是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，比如Perl，遺留的速度問(wèn)題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator加入了Javascript，提供了數(shù)據(jù)驗(yàn)證的基本功能。

但是

還有一點(diǎn)點(diǎn)小擴(kuò)展，也就是一些這個(gè)庫(kù)，那個(gè)框架。。。此處列舉一小小部分

一：js庫(kù)

1：jQuery
jQuery 是一個(gè) JavaScript 庫(kù)，極大地簡(jiǎn)化了 JavaScript 編程，jQuery 很容易學(xué)習(xí)。
2：Node.js
Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。
Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型，使其輕量又高效。

二：圖表庫(kù)

1：chart.js
為設(shè)計(jì)人員和開(kāi)發(fā)人員提供簡(jiǎn)單而靈活的JavaScript圖表
2：Highcharts
兼容 IE6+、完美支持移動(dòng)端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫(kù)
3：Echars
一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ps：業(yè)界大佬百度出品
4：AntV
AntV 是螞蟻金服全新一代數(shù)據(jù)可視化解決方案，致力于提供一套簡(jiǎn)單方便、專業(yè)可靠、不限可能的數(shù)據(jù)可視化最佳實(shí)踐。ps：業(yè)界大佬阿里出品

三：UI庫(kù)

1：H-UI
輕量級(jí)前端框架，簡(jiǎn)單免費(fèi)，兼容性好
2：Layui
Layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來(lái)即用
3：bootscript
簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，讓web開(kāi)發(fā)更迅速、簡(jiǎn)單。ps：用的那是相當(dāng)?shù)亩?br> 4：Element
Element，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)
ps：還有很多UI庫(kù)，，我就不一一列舉了

四：前端框架

  真·重點(diǎn)  ps：此處暫時(shí)列舉市場(chǎng)主流的三大框架，后續(xù)會(huì)繼續(xù)補(bǔ)充

1：Angular
Angular 是一個(gè)開(kāi)發(fā)平臺(tái)。它能幫你更輕松的構(gòu)建 Web 應(yīng)用。Angular 集聲明式模板、依賴注入、端到端工具和一些最佳實(shí)踐于一身，為你解決開(kāi)發(fā)方面的各種挑戰(zhàn)。Angular 為開(kāi)發(fā)者提升構(gòu)建 Web、手機(jī)或桌面應(yīng)用的能力。
ps：Angular從2.0版本已經(jīng)全面使用 Typescript

TypeScript是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。
它是JavaScript的一個(gè)超集而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?

2：React
React是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。

React的特點(diǎn)：
1.聲明式設(shè)計(jì) ?React采用聲明范式，可以輕松描述應(yīng)用。
2.高效 ?React通過(guò)對(duì)DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 ?React可以與已知的庫(kù)或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開(kāi)發(fā)不一定使用 JSX ，但我們建議使用它。
5.組件 ? 通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開(kāi)發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼。

3：Vue
Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

Vue的特性如下：
1.輕量級(jí)的框架
2.雙向數(shù)據(jù)綁定
3.指令
4.插件化

一點(diǎn)也不少啊喂。。

其實(shí)，前端就是點(diǎn)，線，面，體
點(diǎn)：html標(biāo)簽、css屬性、js語(yǔ)法
線：由HTML+css+js 開(kāi)發(fā)的組件、模塊
面：由組件組合起來(lái)的頁(yè)面
體：由多個(gè)頁(yè)面組合起來(lái)的網(wǎng)站系統(tǒng)