引子：Web編程深似海
原計劃用8天時間進行Web前端的學習，結(jié)果拖延了，原因自然是對這部分內(nèi)容學習的難度估計不足。我的方法還是試圖一開始了解web編程的全貌，結(jié)果發(fā)現(xiàn)整個鏈條涉及的編程語言和技術門類實在太多，研究了兩天沒太琢磨明白。然后就開始老老實實先把前端的三門基礎課程先學了，這個時候又發(fā)現(xiàn)我買的教程《HTML5+CSS3+JavaScript從入門到精通》實在是邏輯混亂，看了一天頭暈腦脹，然后在網(wǎng)上找到了一個特別適合初學者的視頻教程（www.biaoyansu.com），驚為天人，終于能夠開始愉快地學習，而此時時間已經(jīng)過去了一半，囧。
要找到一條正確的學習道路不容易啊?。。?br>
廢話少說，開始第四階段總結(jié)復盤。
（一）Web全棧技術
查了兩天資料，總結(jié)了一個Web全棧技術的圖，有利于看到整個web技術的全貌，雖然還不全面甚至有錯誤，也先貼在這里，以后再來修正吧。
（二）H5語言
Html是網(wǎng)頁的骨架。
Html5是一種超文本標記語言，其中超文本意思是除文本外，融合了多種表現(xiàn)形式，包括多媒體和鏈接。標記就是在文件中使用了大量的瀏覽器引擎可識別的標記元素，將文件拆分成一個個獨立元素的組合體。
HTML5正式版是2014年10月28日發(fā)布的，只有短短3年，已經(jīng)成為了前端工程師們必不可少的工具。
閑話少說，知識點如下圖所示：
（三）CSS3語言
CSS是網(wǎng)頁的皮膚。
初，網(wǎng)頁的皮膚是通過在html標簽中添入各式各樣的樣式屬性來實現(xiàn)的。實踐過程中，編寫中，大量的樣式難以復用，維護中，凌亂的網(wǎng)頁代碼讓程序員也在風中凌亂。后來，就出現(xiàn)了改變世界的大神，將所有網(wǎng)頁的樣式用一種樣式語言，一個文件全部放在一塊，易于利用，易于維護。于是乎，我們的眼前的網(wǎng)絡世界就變得越來越風姿綽約了。
總結(jié)的知識點如下：
（四）JavaScript語言
JavaScript是網(wǎng)頁的神經(jīng)。
JavaScript與Java是雷鋒塔和雷鋒的關系。
只需要在JS代碼兩端用script便簽包起來就可以放進html文件，被瀏覽器解析執(zhí)行。表面上，JS與CSS有相似之處，都可以通過選擇元素節(jié)點進行屬性操作，從而改變元素的樣式，但顯然在樣式操作方面會被CSS甩出十條街；另一方面，CSS也有通過偽類來實現(xiàn)一定的鼠標事件和UI事件的響應，甚至結(jié)合偽元素選擇器可以實現(xiàn)一定的內(nèi)容操作，但是在事件處理和內(nèi)容處理方面，CSS同樣會被甩出一百條街。
知識點總結(jié)如下：
（五）幾個輪子
學習了幾個常用的輪子，也是有一堆的知識點，為了文章長度，就不上圖了，簡單總結(jié)一下。
（1）CSS輪子：Bootstrap。據(jù)說是CSS屆最流行的輪子，除了常用的組件樣式，如：表單，表格，按鈕，面板，導航欄，側(cè)欄等大件樣式，還有一些貼心的小樣式，比如：翻頁按鈕、頁面路徑、文章標簽、徽章、提醒等。
此外，Bootstrap還提供柵欄式布局，及動態(tài)響應布局，堪稱神器。
（2）JS輪子：jQuery。據(jù)說是JS屆最流行的輪子，其最好用的功能就是選擇器，能夠與CSS豐富的選擇完美融合。當然，DOM本身也提供CSS選擇器的API，不過從寫代碼的角度說，顯然是美元更簡潔招人喜歡，但是運行效率沒有比較就不好說了。
除了選擇器，jQuery同樣可以很好地完成諸如DOM操作，屬性修改，事件處理，甚至Ajax異步通信。與原生JS代碼比起來，優(yōu)點嘛，自然是大大簡化程序員的工作，節(jié)省了大量代碼。
（3）JS輪子：Vue。這個只了解了下皮毛，大概知道通過Vue提供的針對各種元素的指令（該輪子自定義的屬性），能夠方便地實現(xiàn)輸入輸出的雙向同步，所以如果有這方面的動態(tài)功能需要實現(xiàn)，也是能夠大大地節(jié)省搬磚的工作量。
（六）常用工具
（1）網(wǎng)頁編程工具：Atom、Sublime text。別問我為什么沒用Dreamweaver或Frontpage。Atom和ST兩者功能差不多，甚至連用戶界面都很相似。不同點在于，ST運行速度要快于Atom，而Atom則有更好的插件支持。我把兩個都下載比較了一下，Atom速度還能接受，就是它了。
（2）網(wǎng)頁調(diào)試工具：Chrome dev tool。編寫代碼的過程中，可以在Chrome中打開網(wǎng)頁實時刷新，并且用瀏覽器自帶的開發(fā)工具進行調(diào)試，其中常用的包括Console，Element，Network等幾個模塊，非常有用。
（3）http服務器小工具：KSWEB。一個運行在安卓系統(tǒng)上的http服務器軟件，當時的宣傳口號就是能夠把你的舊手機變廢為寶，對于個人開發(fā)者來說，一年可以節(jié)省下不小的服務器租賃費。我試著把自己做的一個博客給掛在了手機上，然后通過電腦局域網(wǎng)訪問確實好使，至于外網(wǎng)訪問還沒有找到廢舊的手機來刷root權限，回頭再試。
（七）CE項目V4.0
本階段的CE項目V4.0主要完成了PC端的動態(tài)網(wǎng)頁設計與實現(xiàn)，與前兩個版本的界面功能型差別不大，實現(xiàn)步驟如下：
（1）網(wǎng)站UI設計。由于美術功底不夠，這方面主要是選取了網(wǎng)站的色彩搭配，選擇比較青春活潑的橙(#ff9900)綠(#99cc33)藍(#0099cc)搭配。這個主要參考了網(wǎng)頁設計常用色彩搭配表 - 配色表。網(wǎng)站logo尚未設計，回頭補上。
（2）網(wǎng)頁結(jié)構設計。這部分主要是參考了網(wǎng)站活動行、淘寶、以及優(yōu)設上的一些設計，進行了網(wǎng)頁的整體結(jié)構設計。然后在Dynamic Dummy Image Generator上面制作了一些占位圖片，以及草料二維碼生成了二維碼圖片。算是完成了編程前的準備工作。
（3）編程實現(xiàn)。先新建了一個文件夾“CEV4.0”，然后依次新建了index.html, main.css, main.js文件，然后在目錄下建了兩個文件夾img和lib分別用來存圖片和輪子。之后就是先搭起結(jié)構，然后對于頁面顯示樣式一點一點扣了。
（4）動態(tài)效果。用到了幾個動態(tài)效果，一個是展示圖片的輪播和按鈕控制，主要用的是window對象的兩個時間函數(shù)，以及定位布局。另外，就是在其中用到了Bootstrap的動態(tài)樣式、jQuery的選擇器、Vue的內(nèi)容控制方法。
最后做出來的結(jié)果如圖所示：
主要是練技術，UI設計還差點意思，以后再慢慢完善。
下一階段，將開始學習Servlet和JSP。
參考書目
《HTML5+CSS3+JavaScript從入門到精通》
教學視頻：表嚴肅www.biaoyansu.com
