Web 前端開發(fā)初識(shí)

所謂的前端開發(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)站的行為也以瀏覽為主。

但隨著科技的發(fā)展涨冀,現(xiàn)在前端也可以做出一些炫幻的效果L钏丁!鹿鳖!

(該圖可以動(dòng)扁眯,可以動(dòng),可以動(dòng)Kü肌)

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)的概作。以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁,現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了默怨。無論是開發(fā)難度上讯榕,還是開發(fā)方式上,現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā)匙睹,所以現(xiàn)在不再叫網(wǎng)頁制作愚屁,而是叫Web前端開發(fā)。

Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要痕檬,而且需要專業(yè)的前端工程師才能做好霎槐,這方面的專業(yè)人才近幾年來備受青睞。Web前端開發(fā)是一項(xiàng)很特殊的工作梦谜,涵蓋的知識(shí)面非常廣丘跌,既有具體的技術(shù),又有抽象的理念唁桩。簡(jiǎn)單地說闭树,它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶



豪宅提神

當(dāng)然荒澡,要想做好一個(gè)合格的前端開發(fā)師报辱,需要的技能也并不少。

首先仰猖,是需要了解的知識(shí)捏肢,現(xiàn)摘錄如下:

HTML: ?掌握HTML是設(shè)計(jì)網(wǎng)頁的核心。HTML是一種制作頁面的標(biāo)準(zhǔn)語言饥侵,是瀏覽器使用的一種語言鸵赫,它消除了不同計(jì)算機(jī)之間信息交流的障礙。因此躏升,它是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言辩棒,也是構(gòu)成網(wǎng)頁文檔的主要語言,學(xué)好HTML是成為Web開發(fā)人員的基本條件膨疏。

CSS:CSS是保證網(wǎng)頁外觀的重要技能一睁,好的CSS可以保證酷炫的效果。

JavaScript:學(xué)習(xí)JavaScript的基本語法佃却,以及如何使用JavaScript編程將會(huì)提高開發(fā)人員的個(gè)人技能者吁。

Unix,Linux:了解Unix和Linux的基本知識(shí),雖然這兩點(diǎn)很基礎(chǔ),但是開發(fā)人員了解Unix和Linux的基本知識(shí)是有益無害的饲帅。

了解Web服務(wù)器,當(dāng)你對(duì)Apache的基本配置复凳,htaccess配置技巧有一些掌握的話瘤泪,將來必定受益,而且這方面的知識(shí)學(xué)起來也相對(duì)容易育八。



再來一所好房子

再然后对途,就是需要熟練掌握的技能如下:

熟悉版本控制系統(tǒng)的用法。熟悉使用一種優(yōu)秀的版本控制系統(tǒng)髓棋,你在實(shí)際工作中就會(huì)發(fā)現(xiàn)精通一種版本控制系統(tǒng)是很幸福的事情实檀。

學(xué)好Web框架。當(dāng)你掌握了HTML按声,服務(wù)器端腳本語言膳犹,CSS和JavaScript后,就應(yīng)該找一個(gè)Web框架加快你的Web開發(fā)速度签则,使用框架可以節(jié)約你很多時(shí)間镣奋。如果你使用PHP,可選的框架有CakePHP怀愧,CodeIgniter,Zend等余赢。Python程序員喜歡使用Django和 webpy芯义,Ruby程序員喜歡使用RoR。

對(duì)于初學(xué)開發(fā)人員來說妻柒,以上知識(shí)是不是看起來很復(fù)雜扛拨,其實(shí),當(dāng)你一步步學(xué)習(xí)并為企業(yè)開發(fā)成功案例時(shí)举塔,你會(huì)發(fā)現(xiàn)一切都是有意義的付出绑警。每一個(gè)堅(jiān)持走在路上的人都應(yīng)該得到屬于自己的榮譽(yù),因?yàn)檠朐阋呀?jīng)在路上计盒!

以上,基本就是前端開發(fā)基礎(chǔ)需要掌握的知識(shí)及技能啦芽丹。當(dāng)然北启,如果想要繼續(xù)深入下去,那么你就需要明白以下的要點(diǎn):

Web前端優(yōu)化:

1. 盡量減少HTTP請(qǐng)求 (Make Fewer HTTP Requests)

2. 減少 DNS 查找 (Reduce DNS Lookups)

3. 避免重定向 (Avoid Redirects)

4. 使得 Ajax 可緩存 (Make Ajax Cacheable)

5. 延遲載入組件 (Post-load Components)

6. 預(yù)載入組件 (Preload Components)

7. 減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)

8. 切分組件到多個(gè)域 (Split Components Across Domains)

9. 最小化 iframe 的數(shù)量 (Minimize the Number of iframes)

10. 杜絕 http 404 錯(cuò)誤 (No 404s)

以上10條涵蓋了Web前端開發(fā)中遇到的各種頁面處理技術(shù)拔第,讓前端開發(fā)人員能夠準(zhǔn)確和快速地把握整個(gè)網(wǎng)頁的架構(gòu)咕村,從而達(dá)到減少開發(fā)成本和頁面美化目的。


這也是前端開發(fā)寫出來的蚊俺,重點(diǎn)也是可以動(dòng)的懈涛,動(dòng)的,動(dòng)的

當(dāng)你打開這個(gè)界面時(shí):

左側(cè)便會(huì)出現(xiàn)打字時(shí)候的下劃線泳猬,然后隨著一個(gè)個(gè)字母的出現(xiàn)批钠,右側(cè)便會(huì)出現(xiàn)花瓣宇植。

隨著左側(cè)的文字,右側(cè)的心形也逐漸成型价匠。最后便會(huì)出現(xiàn)你所看見的效果当纱。

這便是獨(dú)屬于程序猿的浪漫吧!

愿每一個(gè)用心的程序猿都能有一生美滿的姻緣踩窖!



如上坡氯,便是對(duì)于前端開發(fā)工程師的大概簡(jiǎn)述了。

《----慢慢學(xué)前端

那么洋腮,讓我們來了解下什么是H5吧:

H5是指第5代HTML箫柳,也指用H5語言制作的一切數(shù)字產(chǎn)品。所謂HTML是“超文本標(biāo)記語言”的英文縮寫啥供。我們上網(wǎng)所看到網(wǎng)頁悯恍,多數(shù)都是由HTML寫成的』锖“超文本”是指頁面內(nèi)可以包含圖片涮毫、鏈接,甚至音樂贷屎、程序等非文字元素罢防。而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。瀏覽器通過解碼HTML唉侄,就可以把網(wǎng)頁內(nèi)容顯示出來咒吐,它也構(gòu)成了互聯(lián)網(wǎng)興起的基礎(chǔ)。

HTML5属划,并不是一項(xiàng)新興的技術(shù)恬叹,是對(duì)之前的標(biāo)準(zhǔn)的補(bǔ)充、更新同眯。其中提出的媒體查詢的概念解決了響應(yīng)式布局的問題绽昼;本地存儲(chǔ)的出現(xiàn)減輕了服務(wù)器的負(fù)擔(dān);Canvas在數(shù)據(jù)可視化領(lǐng)域有著舉足輕重的地位须蜗。而新增的表單元素绪励,大大提高了我們的開發(fā)效率。

當(dāng)然唠粥,使用HTML5意味著我們講放棄去兼容低版本的瀏覽器疏魏。

簡(jiǎn)而言之:H5不是新興的技術(shù),而只是對(duì)以前的補(bǔ)充晤愧。有了新的屬性及標(biāo)簽大莫,也拋棄了一些舊的屬性及標(biāo)簽。我們所看到的網(wǎng)頁官份,多數(shù)是HTML編寫的只厘。瀏覽器能夠通過解碼HTML烙丛,把網(wǎng)頁的內(nèi)容顯示出來,這也使得現(xiàn)在的網(wǎng)頁越來越酷炫了羔味!也正是我們努力的方向所在河咽!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市赋元,隨后出現(xiàn)的幾起案子忘蟹,更是在濱河造成了極大的恐慌,老刑警劉巖搁凸,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件媚值,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡护糖,警方通過查閱死者的電腦和手機(jī)褥芒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嫡良,“玉大人锰扶,你說我怎么就攤上這事∏奘埽” “怎么了少辣?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)羡蛾。 經(jīng)常有香客問我,道長(zhǎng)锨亏,這世上最難降的妖魔是什么痴怨? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮器予,結(jié)果婚禮上浪藻,老公的妹妹穿的比我還像新娘。我一直安慰自己乾翔,他們只是感情好爱葵,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布反浓。 她就那樣靜靜地躺著萌丈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪雷则。 梳的紋絲不亂的頭發(fā)上月劈,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天惭墓,我揣著相機(jī)與錄音划咐,去河邊找鬼。 笑死送丰,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播揽浙,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼意敛,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼草姻!你這毒婦竟也來了敞曹?” 一聲冷哼從身側(cè)響起澳迫,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锭部,沒想到半個(gè)月后展哭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體湃窍,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年手蝎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了棵介。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邮辽。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芳肌,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布雌团,位于F島的核電站锦援,受9級(jí)特大地震影響灵寺,放射性物質(zhì)發(fā)生泄漏慈缔。R本人自食惡果不足惜叮称,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一碌秸、第九天 我趴在偏房一處隱蔽的房頂上張望恩敌。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽菜职。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蔬螟,已是汗流浹背耸序。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工薪铜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像常侦,于是被迫代替她去往敵國(guó)和親浇冰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容