Web前端要如何學(xué)?這是很多新手都會(huì)問(wèn)的問(wèn)題,究竟web前端開(kāi)發(fā)要學(xué)什么內(nèi)容?學(xué)習(xí)起來(lái)難不難?如果要想系統(tǒng)的學(xué)習(xí)前端開(kāi)發(fā),建議大家還是要去一些專(zhuān)業(yè)的培訓(xùn)機(jī)構(gòu)去學(xué)習(xí),這樣才能真正的掌握技術(shù)。達(dá)內(nèi)web前端培訓(xùn)專(zhuān)家為您總結(jié)學(xué)習(xí)web前端大體上可以分為下面幾個(gè)階段:

卓絕階段——HTML標(biāo)簽的學(xué)習(xí)

超文本標(biāo)記語(yǔ)言(HyperText Mark-up Language簡(jiǎn)稱(chēng)HTML),“超文本”就是指頁(yè)面內(nèi)可以包含圖片、鏈接,甚至音樂(lè)、程序等非文字元素。

html是一個(gè)網(wǎng)頁(yè)的骨架,就好比是蓋房子的結(jié)構(gòu)~這也是前端頁(yè)面的基礎(chǔ)。試著想一下,如果一個(gè)房子連磚頭和水泥都沒(méi)有,后面的步驟又有什么意義呢?所以我們必須完全掌握HTML的基本結(jié)構(gòu)和常見(jiàn)的標(biāo)簽,屬性。有了一個(gè)好的開(kāi)始,距離成功就更近了一步~這里有兩點(diǎn)建議,大家可以嘗試:

1,語(yǔ)義化的去記憶。比如ul li這個(gè)就是列表,button就是按鈕,table就是表格。其實(shí)這也是html5所倡導(dǎo)的,語(yǔ)義化標(biāo)簽。

2,試著寫(xiě)一個(gè)小的demo,也許就只是一個(gè)列表,一個(gè)表格,或者一個(gè)按鈕。

學(xué)習(xí)HTML就是要自己不斷的去寫(xiě),去嘗試。看著自己的代碼能跑起來(lái),有了心目中的效果,這種心情還是很開(kāi)心的!

第二階段——CSS的學(xué)習(xí)

CSS,層疊樣式表——(Cascading Style Sheets),是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力,并能夠進(jìn)行初步交互設(shè)計(jì),是目前基于文本展示更杰出的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù)不同使用者的理解能力,簡(jiǎn)化或者優(yōu)化寫(xiě)法,針對(duì)各類(lèi)人群,有較強(qiáng)的易讀性。

關(guān)于CSS的各種屬性,我們還是可以參考學(xué)習(xí)HTML那樣?？梢哉f(shuō)CSS的屬性幾乎完全是語(yǔ)義化的。我們需要改變邊框,那就是“border”,那我們需要右側(cè)邊框做一些改變,那就是“border-right”。很明顯,接下來(lái)按照我們的需求還有“右邊框的寬度——border-right-with”,”右邊框顏色——border-right-color”等等等,諸如此類(lèi)~完全就是我們需要什么,只要憑著需求去尋找。

第三階段——JavaScript

JavaScript一種直譯式腳本語(yǔ)言,是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言,內(nèi)置支持類(lèi)型。它的解釋器被稱(chēng)為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶(hù)端的腳本語(yǔ)言,更早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用)網(wǎng)頁(yè)上使用,用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

達(dá)內(nèi)web前端培訓(xùn)專(zhuān)家介紹說(shuō),javascript是一個(gè)可以運(yùn)行在瀏覽器上面的語(yǔ)言(當(dāng)然現(xiàn)在基于一些庫(kù)/框架已經(jīng)遠(yuǎn)不只是在瀏覽器上了),它可以操控瀏覽器,讓瀏覽器聽(tīng)從我們的命令。這有點(diǎn)像一個(gè)電視劇和遙控器,而javascript就是我們的遙控器。瀏覽器根據(jù)javascript的指令,做出相應(yīng)的反饋。比如操作DOM(也可以理解成為操作HTML),可以操作CSS。有了javascript就可以讓我更加靈活&動(dòng)態(tài)的操控HTML,CSS。

嚴(yán)格來(lái)說(shuō)、HTML和CSS還算不上真正的“語(yǔ)言”,而javascript卻是如假包換的腳本型語(yǔ)言,既然是語(yǔ)言,那就會(huì)有字符串,數(shù)組,對(duì)象等等。而我們的javascript可以處理這些與數(shù)據(jù)有關(guān)的工作,比如給數(shù)組排個(gè)序,去個(gè)重等等。

而我們依靠javascript可以做些什么呢?網(wǎng)頁(yè)上常見(jiàn)的輪播圖,網(wǎng)站的注冊(cè)功能,提交我們的留言,刷新獲取新聞等等。當(dāng)然,我們強(qiáng)大的javascript遠(yuǎn)不止此!

第四個(gè)階段——jQuery

jQuery是一個(gè)兼容多瀏覽器的javascript庫(kù),核心理念是write less,do more(寫(xiě)得更少,做得更多)。jQuery在2006年1月由美國(guó)人John Resig在紐約的barcamp發(fā)布,吸引了來(lái)自世界各地的眾多JavaScript高手加入,由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今,jQuery已經(jīng)成為更流行的javascript庫(kù),在世界前10000個(gè)訪問(wèn)更多的網(wǎng)站中,有超過(guò)55%在使用jQuery。

如果繼續(xù)用蓋房子做例子,jQuery更像是一個(gè)裝修隊(duì)。我們只需要關(guān)注我們的房子設(shè)計(jì)本身,把我的想法,理念告知這個(gè)裝修隊(duì),讓它來(lái)給我們處理那些雜七雜八的事情。

另外談到web前端要如何學(xué)的問(wèn)題,在這里簡(jiǎn)單給大家介紹一些學(xué)習(xí)Web前端時(shí)候的方法,也希望對(duì)大家有些幫助,在寫(xiě)css前,其實(shí)html的結(jié)構(gòu)要是比較合理的,這樣寫(xiě)css也會(huì)比較順手。在寫(xiě)一個(gè)網(wǎng)頁(yè)之前,建議先琢磨幾分鐘,不要上來(lái)就寫(xiě)。多去看看別人是怎么寫(xiě)的,然后結(jié)合自己的項(xiàng)目,心中有一個(gè)大致規(guī)劃?？梢韵劝迅鈱虞喞獙?xiě)好,先不著急去寫(xiě)某一個(gè)具體的部分。這里給大家分享一些css小技巧:

1、CSS縮寫(xiě)

CSS縮寫(xiě)簡(jiǎn)化了你的CSS代碼,更重要的是,它讓你的代碼更加整潔易懂。

不是像這樣創(chuàng)建CSS

而是像這樣創(chuàng)建CSS

       2、理解class和id

這兩個(gè)選擇器總是讓初學(xué)者感到迷惑。在CSS中,Class和ID分別用點(diǎn)“.”和井號(hào)“#”來(lái)標(biāo)識(shí)。簡(jiǎn)單來(lái)說(shuō)id就是用來(lái)標(biāo)識(shí)那些單獨(dú)不重復(fù)的樣式,而class是可以重復(fù)使用的。

3、實(shí)用的<li>

<li>也叫鏈接列表,在與<ol>或<ul>正確搭配的時(shí)候非常好用,尤其是用在導(dǎo)航菜單樣式上。

4、少用<table>多用<div>

CSS更大的優(yōu)勢(shì)之一是使用<div>達(dá)到樣式上的靈活多變。不同于<table>,<div>里的內(nèi)容不會(huì)被鎖在單元格<td>中。可以說(shuō)幾乎所有的表格布局都可以在<div>和樣式的正確使用下完成。當(dāng)然,有大量表格內(nèi)容時(shí),還是用<table>吧。

web前端要如何學(xué),重要的是掌握學(xué)習(xí)前端需要方法,更需要一顆平常心,不要把前端想的多難。更后,要想深入精通的掌握一門(mén)技術(shù),還是去專(zhuān)業(yè)前端開(kāi)發(fā)培訓(xùn)學(xué)校去學(xué)習(xí),接受系統(tǒng)專(zhuān)業(yè)的訓(xùn)練和指導(dǎo)!