HTML5是Web的未來，不僅在電腦端，而且在移動(dòng)端也一定會(huì)得到廣泛的應(yīng)用。據(jù)統(tǒng)計(jì)2013年全球?qū)⒂?0億手機(jī)瀏覽器支持HTML5，同時(shí)HTML Web開發(fā)者數(shù)量將達(dá)到200萬。毫無疑問，HTML5將成為未來5-10年內(nèi)，移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。因此，想轉(zhuǎn)型來做Web前端的人越來越多。

本文將以UI設(shè)計(jì)師轉(zhuǎn)型做Web前端作為案例，詳細(xì)解讀學(xué)Web前端該學(xué)習(xí)哪些專業(yè)知識(shí)！當(dāng)然也適用于所有想轉(zhuǎn)型Web前端的親們！

一、如何學(xué)習(xí)Web前端知識(shí)轉(zhuǎn)型？

不少UI設(shè)計(jì)師想要學(xué)習(xí)Web前端知識(shí)，一方面是喜歡那些華麗的網(wǎng)頁(yè)特效，另一方面則是想成為全棧式UI設(shè)計(jì)師。

1、HTML/CSS學(xué)習(xí)

第一階段，你要從最基礎(chǔ)的HTML/CSS開始，簡(jiǎn)單地說，HTML就是一堆非常簡(jiǎn)單的標(biāo)簽，而CSS則是把你畫畫的流程用英語按一定的格式寫出來。然后你需要理解常用HTML標(biāo)簽的意思，學(xué)會(huì)各種CSS的屬性，還有CSS的盒模型、優(yōu)先級(jí)、選擇器……

2、JavaScript學(xué)習(xí)

第二階段，你要是想在網(wǎng)頁(yè)上實(shí)現(xiàn)交互效果，比如輪播圖、點(diǎn)擊按鈕后播放動(dòng)畫等等，那么就必須學(xué)會(huì)JavaScript。JavaScript是一門完整、強(qiáng)大、熱門的編程語言，瀏覽器的各種交互效果都由它來做到的。

你先要了解一些基礎(chǔ)的JavaScript概念(變量、函數(shù)、基本類型)后，然后學(xué)習(xí) jQuery(JavaScript代碼庫(kù)的一種)，并且通過 jQuery繼續(xù)使用CSS的選擇器。

二、轉(zhuǎn)職成為前端重構(gòu)

專精HTML/CSS的前端從業(yè)人員也就是前端重構(gòu)。千鋒武漢Web前端培訓(xùn)小編想說，掌握基本HTML/CSS的UI設(shè)計(jì)師就可以發(fā)展到這個(gè)方向。

你知道如何寫頁(yè)面，也知道怎么做的更好，并且更加理解 Web 世界，做出更“系統(tǒng)化”的設(shè)計(jì)。

關(guān)于CSS 的知識(shí)，你需要理解文檔流、浮動(dòng)流等各種定位的方式與原理，理解 CSS 的繼承復(fù)用思想、理解瀏覽器的差異、兼容等。

關(guān)于HTML 的知識(shí)，你需要學(xué)習(xí)語義化、可訪問性與結(jié)構(gòu)的合理，以及“結(jié)構(gòu)與樣式的分離”等。

你會(huì)愛上CSS 3 的酷炫屬性，可以做出響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，用 transiton 和 animation 做補(bǔ)間動(dòng)畫與關(guān)鍵幀動(dòng)畫，用 transform 做縮放、旋轉(zhuǎn)、3D變換，還有圓角、漸變、陰影、彈性盒……

掌握了以上的這些，你完全可以利用你的設(shè)計(jì)功底和Web前端知識(shí)，做出微信的H5頁(yè)面、一些有趣的網(wǎng)頁(yè)，或者個(gè)人的網(wǎng)站。

三、轉(zhuǎn)職成為前端工程師/全棧式UI設(shè)計(jì)師

如果你還想做出更厲害的交互效果，越來越喜歡編程，那么小編建議你成為一個(gè)前端工程師/全棧式UI設(shè)計(jì)師。

這時(shí)，你必須學(xué)會(huì)以軟件工程師的角度思考。你需要踏踏實(shí)實(shí)學(xué)習(xí)編程語言，深入理解作用域、對(duì)象、類、封裝、繼承、面向?qū)ο缶幊獭⑹录陕牎⑹录芭莸纫淮蠖丫幊谈拍?，需要了解瀏覽器，學(xué)習(xí) DOM、BOM、CSSOM 的 API，甚至還有學(xué)習(xí)一些網(wǎng)絡(luò)原理，包括域名、URL、DNS、HTTP 請(qǐng)求……

想要搞定編程沒那么簡(jiǎn)單，但是只要肯花功夫就可以做到，那時(shí)你收獲到的將是一個(gè)新的世界。到了這一階段，你可以做出很多優(yōu)秀的網(wǎng)站了，購(gòu)買域名，配置服務(wù)器，然后將你的作品掛到網(wǎng)絡(luò)上吧;或者你可以做一些JavaScript的小游戲，練練編程能力。

通過以上的分享，相信大家對(duì)于轉(zhuǎn)型做Web前端需要學(xué)習(xí)的知識(shí)點(diǎn)和發(fā)展方向已經(jīng)有了大致了解。當(dāng)下Web前端的工作無法被替代，發(fā)展趨勢(shì)是可見的，客戶需求是存在，前景是巨大的。想要入行Web前端的小伙伴可要抓緊機(jī)會(huì)，相信一定會(huì)給你不一樣的收獲！

如今正是Web前端將要爆發(fā)的時(shí)候，選擇學(xué)習(xí)Web前端，為你的人生開啟新的方向。