web前端的學習誤區

web前端的學習誤區

 網頁製做是計算機專業同窗在大學期間都會接觸到的一門課程，而學習網頁製做所用的第一個集成開發環境(IDE)想必大可能是Dreamweaver，這種所見即所得的「吊炸天」IDE爲咱們製做網頁帶來了極大的方便。

入門快、見效快讓咱們在不知不覺中已經深深愛上了網頁製做。此時，不少人會陷入一個誤區，那就是既然藉助這麼帥的IDE，經過鼠標點擊菜單就能夠快速方便地製做網頁。

那麼咱們爲何還要去學習html、CSS、JavaScrpt、jQuery等這些苦逼的代碼呢?這不是舍簡求繁嗎?

可是隨着學習的深刻，就會發現咱們步入了一種窘境——過度的依賴IDE致使咱們不清楚其實現的本質，知其然但不知其因此然。

所以在頁面效果出現問題時，咱們便手足無措，更不用提如何進行頁面優化以及完成一些更高級的應用了。其緣由是顯而易見的——聰明的IDE成全了咱們的惰性，使咱們忽略了華麗的網頁背後最本質的內容——code。

正確的方向賽過無謂的努力

有兩隻螞蟻想翻越一段牆，尋找牆那頭的食物。一隻螞蟻來到牆腳就堅決果斷地向上爬去，但是每當它爬到大半時，就會因爲勞累、疲倦而跌落下來。雖然它不氣餒，一次次跌下來，又迅速地調整一下本身，從新開始向上爬去。

另外一隻螞蟻觀察了一下，決定繞過牆去。很快，這隻螞蟻繞過牆來到食物前，開始享受起來;而另外一隻螞蟻還在不停地跌落下去又從新開始。

不少時候，成功除了勇氣、堅持不懈外，更須要方向。也許有了一個好的方向，成功來得比想象的更快。若是在錯誤的路上奔跑,再怎麼努力也是白搭。學習Web前端也是如此，首先應該選擇一個正確的學習路線。

結合個人學習經歷、近年來輔導學生的經驗以及公司中實際項目的需求

第一階段:HTML的學習

超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，不管是靜態網頁仍是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因 此，咱們必須掌握HTML的基本結構和經常使用標記及屬性。

HTML 的學習是一個記憶和理解的過程，在學習過程當中能夠藉助Dreamweaver的「拆分」視圖輔助學習。在「設計」視圖中看效果，在「代碼」視圖中學本質， 將各類視圖的優點發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味，想必對各位初學的小盆友們來講一定是極好的!

在學習了HTML以後，咱們只是掌握了各類「原材料」的製做方法，要想蓋一幢樓房就還須要把這些「原材料」按照咱們設計的方案組合佈局在一塊兒並進行一些樣式的美化。

第二個階段:CSS的學習

CSS是英文Cascading Style Sheets的縮寫，叫作層疊樣式表，是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是能夠複用的，這樣就極大地提升了咱們開發的速度，下降了維護的成本。

同時CSS中的盒子模型、相對佈局、絕對佈局等可以實現對網頁中各對象的位置排版進行像素級的精確控制。經過此階段的學習，咱們就能夠順利完成「一幢樓房」的建設。

「樓房」建設完成以後，咱們能夠交給用戶使用，可是若是想讓用戶得到更佳的體驗，咱們還能夠對「樓房」進行更深一步的「裝修」，讓它看起來更「豪華」一些。

第三個階段:javascript的學習

JavaScript是一種在客戶端普遍使用的腳步語言，在JavaScript當中爲咱們提供了一些內置函數、對象和DOM操做，藉助這些內容咱們能夠來實現一些客戶端的特效、驗證、交互等，使咱們的頁面看起來不那麼呆板，屌絲瞬間逆襲高富帥!有麼有?

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的項目經理卻忽然對你大吼道

「這個效果在××瀏覽器下不兼容，從新搞……」

「不兼容?」瞬間石化了有木有?

「我擦，坑爹啊!那但是花了我一個晚上寫了幾百行代碼搞定的啊，吐血了都!」

JavaScript的兼容性和複雜性有時候的確讓咱們頭疼，還好有「大神」幫咱們作了封裝。

第四個階段:jQUery的學習

jQuery 是一個免費、開源的輕量級的JavaScript庫，而且兼容各類瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時如今有不少基於jQuery的插件可供選擇，這樣在咱們實現一些豐富的動態效果時更方便快捷，大大節省了咱們開發的時間，提升了開發速度，這也充分體現了其 write less,do more的核心宗旨。這個Feel倍兒爽!有麼有?

「豪華大樓」至此拔地而起，可是天天這樣日復一日，年復一年的蓋樓，好繁瑣!能不能將大樓裏面每個單獨部件模塊化，當須要蓋樓時就像堆積木同樣組合在一塊兒，這樣豈不是爽歪歪?能夠實現嗎?答案是確定的。

這種思想在Web前端開發中也是適合的，因而乎就出現了各類前端框架，在這裏推薦給你們的是Bootstrap。

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，而且支持響應式佈局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。

在項目開發過程當中，咱們能夠藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面佈局和樣式設置，而後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發週期。站在巨人的肩膀上就是爽!

Web前端的學習建議

最後給你們聊聊在學習Web前端中的一些建議和方法。

在CSS佈局時須要注意的一個問題是不少同窗缺少對頁面佈局進行總體分析，不可以從宏觀上對頁面中盒子間的嵌套關係進行把握，就急於動手去作，致使頁面中各元素間的關係很混亂，容易出現盒子在浮動時錯位等狀況。建議你們在佈局時採用「自頂向下，逐步細化」的思想，先用幾個盒子將頁面從總體上劃分，而後逐步在盒子中繼續嵌套盒子。

「君子生非異也，善假於物也」，在學習的過程當中還要多瀏覽一些優秀的網站，善於分析借鑑其設計思路和佈局方法，見多方能識廣，進而才能夠融會貫通，取他人之長爲我所用。

同時還要善於使用Firebug這個利器。Firebug一方面能夠在咱們學習過程當中幫助咱們調試本身的頁面，另外一方面咱們可使用Firebug方便地查看、分析別人網站的源代碼，「偷」也是一種技能!

每一個人的成長與基礎不同，結合本身的實際狀況，在執行。仍是重複一下，前端的核心是js。css不難，但須要來積累。對前端我是這麼看的：

css就像一瓶酒，得品。

html,css總共就那些標籤跟選擇器屬性什麼的，可是要寫一個有擴展性，健壯性或維護性的頁面不容易。如今寫頁面基本條件反射，不是如何快速的完成，而是思考若是有界面需求修改，怎麼在修改代碼最少的狀況下快速完成需求任務。這是對前端耐力，體力，智力的三重考驗。

js就像一把劍，得磨。

js剛開始只是爲了較驗，隨便技術社會的發展，承擔的角色愈來愈重，剛開始玩玩jQuery感受已經會js了，其實只是冰山一角。隨着對js的瞭解愈來愈多，他即變態又可愛，即好玩又難控，即有不少兼容問題，但解決兼容是咱們基本生存之道。從ajax到jsmvc一路走一路看，高載潮一浪高過一浪

人生就是一場夢，得做。

技術只是生活的一部分，曾經雄心鬥志，現在低頭寫碼。改變能改變的，接受不能改變的。人生有限，兄爭朝夕啊。人生學習的態度是：不急不躁，不快不慢。鍥而不捨，相信本身。不求能改變世界，但求能改變本身的生活。不求大步流星，但求一步一腳印。感謝磨難，他使咱們心裏更爲堅強。感謝挫折，他使咱們不斷的成長，感謝bug，他使咱們的思惟更加深邃。感謝前端，他使咱們更加的相信，撐起一片天空須要十八般武藝。
文章部份內容來自於互聯網，學對本身有用的東西，感受有不對的地方能夠直接無視，只是一個參考，願你們的前端之路越走越遠。

 原文網址：https://www.bazhongsq.cn/article-4.html.