web前端到底是什么？

某貨： “前幾年前端開發(fā)人員魚目混雜，技術(shù)參差不齊，相對(duì)學(xué)習(xí)起來不規(guī)范，導(dǎo)致> 前端開發(fā)人員聚集，所以現(xiàn)在前端工種和工資還是沒得到普遍重視，但近2年來，> > HTML5、JS 的流行，讓前端異?；鸨?，以后還會(huì)更有前途嗎？請(qǐng)問您怎么看？”

我

“我只能告訴你：前端不滅”
“除非你不要臉！”
“前些年因?yàn)閲?guó)內(nèi)都不要臉，然而現(xiàn)在都明白了用戶體驗(yàn)至上，現(xiàn)在都要臉；”
“不但要臉 還要胸大 活好！用著舒服”
“后端提供床，前端提供顏值高的妹，你說重要嗎？”

某貨：“嘿嘿！你意思是 地上、廚房都可以，但沒妹子怎么行？。?！敬蟠蟮?污 】”

上面對(duì)話，是我前兩天在群里 一段解答的對(duì)話。
有人問我 為什么你舉例這么生動(dòng)，真實(shí)，讓人看了覺得更激情了。我只能告訴你：我主業(yè)是段子手，副業(yè)才是code，你表 搞錯(cuò)好嗎？
好，下面我來簡(jiǎn)單粗暴的介紹下我自己：3個(gè)特征而已

我 最 帥！我 最 帥！我 最 帥！

O(∩∩)O 好了，我們已經(jīng)相識(shí)了，我們進(jìn)入相知的階段（我擦，太快了吧？）

在我講段子之前呢，我有必要和責(zé)任解釋下：
｛“ web前端開發(fā) ”是什么？ ｝
｛“ web前端開發(fā) ”有前途嗎？｝
｛“ web前端開發(fā) ”到底怎么學(xué)？｝

這3個(gè)對(duì)象，是你入【前端】這個(gè)坑的初戀，對(duì)！沒錯(cuò)同時(shí)和 3個(gè)對(duì)象談戀愛（我知道你大學(xué)肯定干過額 【邪惡臉】）。

NO 1： web前端開發(fā) ”是什么？

前言：聲明啊，我是個(gè)草根派，不是學(xué)院派；那些一篇噼里啪啦，噼里啪啦的各種定義 和術(shù)語解釋，你在我這么帥的人的系列文章里，根本看不到 嘿嘿！

【啦啦啦 啦啦啦， 我是賣報(bào)的小行家，不怕苦，不怕累。?！俊?。。畫風(fēng)突變

跑題啦！不過話說回來，這個(gè)膾炙人口的兒歌，深刻反映了我們 web前端行業(yè)的一個(gè)工種狀態(tài)。行家，自由，但要經(jīng)歷苦、累 才會(huì)有收獲。其他行業(yè)，苦、累居多，而我們大前端那必須是自由，樂趣，隨心所欲的一個(gè)工種。

本帥的感觸：做任何一件事，如果是興趣使然，那必定會(huì)堅(jiān)守到老，從菜鳥變大神也是順理成章的事兒。因?yàn)槟愕慕?jīng)驗(yàn)會(huì)隨著你的顏值經(jīng)歷時(shí)間的洗刷，最后你回頭會(huì)發(fā)現(xiàn)一件最有意義的事：

我擦，加薪了！ (^o^)/YES!

廢話了這么多，我們來步入正題：其實(shí)web前端這個(gè)職位，并沒有一個(gè)有效的歷史記錄可以查詢，更沒有一個(gè)明確的定義，她不像java 攻城獅、c++開發(fā)這種一開始就有明確定位的工種一樣，是有核心技能可以描述的。比如java開發(fā)，顧名思義就是利用java程序來開發(fā)功能，php開發(fā)：利用php做個(gè)商城等等。

前端小美女

你會(huì)發(fā)現(xiàn)：我們前端這個(gè)姑娘，她甚至沒有一個(gè)logo 和擬人化的圖形用來描述（是不是挺扯淡的？）不過不要緊，下面讓帥的人 來為她正名。O(∩∩)O~

一、web前端的演變

Web前端開發(fā)工程師是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開始受到重視的時(shí)間不超過10年。Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web 1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。

2005年以后，互聯(lián)網(wǎng)進(jìn)入Web 2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種豐富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。

隨著WEB2.0概念的普及和W3C組織的推廣，網(wǎng)站重構(gòu)的影響力正以驚人的速度增長(zhǎng)。

前端飛速發(fā)展

上邊一段標(biāo)注解釋，是某科的一些附錄，（這么枯燥的東西，就讓別人來總結(jié)吧對(duì)么？）大概闡述了，以前的web是怎么一種狀態(tài)和Web2.0的重要性。

其實(shí)中國(guó)的“web前端開發(fā)攻城獅”這個(gè)職位好多人并不知道是怎么叫出來的，那么我偷偷<(￣︶￣)>告訴你：其實(shí)是淘寶團(tuán)隊(duì)，發(fā)明出來的本土化的名稱，因?yàn)闅v史原因，淘寶在2005以后迅速崛起，并且爆發(fā)式的訪問量，讓淘寶網(wǎng)的用戶體驗(yàn)受到巨大考驗(yàn)和急需前進(jìn)。

然后淘寶官方第一次有了【web前端開發(fā)】這個(gè)字眼和招聘職位，或許其他網(wǎng)站也想到了這樣一種描述，但是畢竟知名度巨高的淘寶，受關(guān)注度自然高，口碑相傳，就把【前端開發(fā)】這個(gè)叫法發(fā)揚(yáng)光大了。

在早期點(diǎn)Web前端不叫前端，而是被親切的叫做“網(wǎng)頁設(shè)計(jì)師”，沒錯(cuò)你沒看錯(cuò)，就是這個(gè)名字，我記得那時(shí)候 【網(wǎng)頁三劍客】的說法滿天飛，你掌握了這3賤客，真的很賤，就可以被人叫做網(wǎng)頁設(shè)計(jì)師了。

網(wǎng)頁三劍客：DW\FW\Falsh

網(wǎng)頁三劍客

網(wǎng)頁三劍客（Flash、Dreamweaver、Firewoks) 并稱為Macromedia的網(wǎng)頁制作三劍客，由于是同一公司的產(chǎn)品，因而在功能上有著一個(gè)非常緊密的結(jié)合 。后來Firewoks被Adobe這個(gè)變態(tài)的巨頭收購(gòu)以后，ps就基本取代Firewoks來做設(shè)計(jì)網(wǎng)頁的工作了，雖然我知道現(xiàn)在還有人用，估計(jì)是一種懷念和某些好用的切圖功能吧。

而那時(shí)候的網(wǎng)頁設(shè)計(jì)師 如果要入此道，必須要掌握的就是Dreamweaver，并不是說只有他能寫html 和 css ，而是它在當(dāng)時(shí)的自動(dòng)提示實(shí)在太好用、太強(qiáng)大了，簡(jiǎn)直不用費(fèi)腦細(xì)胞，你就可以輕輕松松的完成你所想。在當(dāng)時(shí)前端工具和編輯器貧乏的時(shí)代，這個(gè)絕對(duì)是神奇級(jí)別了（當(dāng)然后來 寫的多了都熟悉基本不用提示的）。當(dāng)年還有很多基于Dreamweaver構(gòu)建網(wǎng)站的教程，那時(shí)候真的是個(gè)基情滿滿的年代，這些工具類的歷史產(chǎn)物，有興趣的朋友可以去了解一下就好了，我們不在多舌。

二、web前端開發(fā)入門，需要掌握哪些基礎(chǔ)

雖說這個(gè)問題很大，但是這個(gè)話題就很好回答了；因?yàn)楝F(xiàn)在前端如此眼花繚亂，技能多多，都是基于此三板斧：
HTML、CSS、JavaScript

W3C

語言基礎(chǔ)：HTML、CSS、JavaScript

思想標(biāo)準(zhǔn)：W3C標(biāo)準(zhǔn)

W3C萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。到目前為止，W3C已發(fā)布了200多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南，如廣為業(yè)界采用的超文本標(biāo)記語言（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）、可擴(kuò)展標(biāo)記語言等，有效促進(jìn)了Web技術(shù)的互相兼容，對(duì)互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。

所以 我們現(xiàn)在運(yùn)用的html 超文本標(biāo)記語言，css 等所有基于web技術(shù)的范疇，基本都是w3c標(biāo)準(zhǔn)，并全世界統(tǒng)一執(zhí)行的，所以符合w3c 也就是開啟前段之門了。
web前端，首先不是孤立存在的，前端相對(duì)于web后端編程而言，前端是瀏覽器自身支持的編程語言，包括html,css,javascript

HTML： 是構(gòu)成網(wǎng)頁展示的基礎(chǔ)，是一種很簡(jiǎn)單可視化的標(biāo)識(shí)語言，說白了就是 一是一，你寫二就出二。網(wǎng)上所有的網(wǎng)頁網(wǎng)站，不管多么牛鼻最后都會(huì)轉(zhuǎn)化成html，被瀏覽器渲染出來，用作展示。

CSS： 又稱作樣式表，簡(jiǎn)單點(diǎn)說就是html的外衣，將html包裝的明艷動(dòng)人。

JavaScript：是一種直譯式腳本語言，非常靈活，可以在任何瀏覽器上開發(fā)與調(diào)試的一種動(dòng)態(tài)類型、弱類型、基于原型的語言。
（關(guān)于js這個(gè)讓人又愛又恨的語言，我們到后面會(huì)著重介紹和學(xué)習(xí)，因?yàn)檎莆沾思寄埽?你就擁有了全世界，說全世界是扯淡的，說白了擁有了 money和妹子）

NO 2： web前端開發(fā) ”到底有前途嗎？

如果你在2012年以前 這么問，或許很多人會(huì)思考一下，給你說不知道，應(yīng)該沒后端編程有前途吧，或者直接說，web前端有啥?。坎痪蛯憘€(gè)網(wǎng)頁、js嗎？工資又低。。。。

但現(xiàn)在是2016年了親，我只能說以后都會(huì)是前端年，很久以前不懂web前端的人觀念大概是：

xx是美工，讓他弄個(gè)網(wǎng)頁過來
xx你好，你能給我切割按鈕過來嗎，我后面需要用
xx你alert一下，看我數(shù)據(jù)傳過去了沒。
xx xx xx 的

xx你麻痹啊xx！不要叫我美工，誰叫我跟誰急；不要叫我頁面仔，雖說每個(gè)扎實(shí)的前端都是頁面仔過來的；更不要侮辱我的職業(yè)，以為前端只是寫頁面、切圖。。

然而現(xiàn)在的真實(shí)情況是這樣的：

hi，小北你這個(gè)是什么效果啊，這么牛，css3 html5做的？【css3 html5 笑而不語】

我擦，這，這 怎么自動(dòng)就刷新了，嚇我一跳啊，我還拉回切換著f5呢【gulp、 webpack等構(gòu)建工具笑而不語】

哎呦，js真牛逼啊，連后臺(tái)數(shù)據(jù)庫(kù)都能操作了，服務(wù)器都能構(gòu)建了【nodejs笑而不語】

哥，你需要什么形式的json串啊， 我這邊好生成一下，哥，你過來看一下這個(gè)體驗(yàn)怎么樣？【老子 不笑，也不會(huì)語。尼瑪要累死我？】

隨著html5的普羅天下，css3的風(fēng)靡全球，隨著nodejs 的崛起，JavaScript這個(gè)最容易被人誤解的語言，終于散發(fā)了它本該有的光芒（不要以為是我抄的別人的話，本篇文章純屬原創(chuàng)，我就是這么有才！）

Javascript這個(gè)牛鼻的歷史產(chǎn)物，現(xiàn)在真的可以說是萬能的，至少在web層面是這樣，交互、效果、數(shù)據(jù)操作、娛樂游戲、操作文件io等等。

由于現(xiàn)在是web應(yīng)用時(shí)代，各種尺寸的電子設(shè)備，增長(zhǎng)式的爆發(fā)，只要和屏幕有關(guān)的 就是顏值，顏值代表了一切，你說前端有前途嗎？

html5、網(wǎng)頁游戲風(fēng)靡全球，需要頁面展現(xiàn)的東西 都是前端范疇，你說有前途嗎？

目前世界上最多的可視化物質(zhì)是什么？螞蟻？人？還有人說是TT（泥煤，虧你想的出來），那么我告訴你，是網(wǎng)頁，網(wǎng)頁 ，網(wǎng)頁，據(jù)統(tǒng)計(jì)現(xiàn)在全世界 有億級(jí)別的網(wǎng)頁，請(qǐng)問什么概念，你說有前途嗎？

最直觀的：前端的工資 從前幾年的平均幾K 到現(xiàn)在的10 20 k 。

前端工資比例圖

你說有前途沒?

由于本篇文章是 我 前端系列文章的第一篇，只介紹下歷史原因 和 為前端正名，并且有效提升初學(xué)者和懷疑者的興趣，所以一些名詞的介紹和意義，大家先自行谷歌、度娘一下，后面我們會(huì)一一道來。

NO 3： web前端開發(fā) ”怎么學(xué)習(xí)，怎么入門？

想知道嗎？嘿嘿，我好累，喝口水把個(gè)妹，想知道，持續(xù)關(guān)注我?guī)泿浀念佒担禄胤纸猓?/p>

在最后，特別感謝，賀賀妹子（傻），辛苦整理提供一些資料和配圖，讓我的文章更加生動(dòng)和有趣。我想她一定是被我的顏值折服了吧！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

原文鏈接：https://blog.csdn.net/xllily_11/article/details/52084476

最新評(píng)論