html css 前端基礎 學習方法及經驗分享

標籤：地理   模組   編程   動手   元素   w3c   官網   盒模型   支援   

前言：

　　入園第一天，想分享一點兒前端基礎html css 的學習方法和一些經驗給熱愛前端，但是不知道從哪兒開始，依舊有些迷茫的新手朋友們。當然，適合每個人的學習方式不同，以下所講的僅供參考。

　　一、關於基礎文法

　　對於基礎文法，此處不做講解，有需要的同學可以在w3cschool、w3school、慕課網等等進行學習。如果是剛開始接觸前端，不建議通過書籍進行學習，第一是因為書籍裡面有的知識可能過於陳舊，已經在新版本中被廢棄，第二是因為書籍裡面知識體系十分全面，很多知識可能比較難理解，且平時做項目會很少用到，如果從頭到尾把一本書啃完，需要消耗的時間成本會很大，關於前端，知識的更新迭代很快，因此，快速學習是一項首要需要培養的能力。

　　現在，html5和css3早已經很火，但是，剛開始一定是要先學習html4.0版本和css2.0版本，此時，關於在新版本中廢棄的標籤和文法就不要去使用了，等基礎OK了，再學習html5和css3時，主要學習新增的部分，即關注差異即可。

　　二、關於編輯器

　　編輯器是為了提高開發效率的，用著習慣即可，當然，dreamweaver就不推薦使用了，初學者可以使用一些比較小巧的編輯器，Notepad++，EditPlus，sublime，HBulider等都是不錯的選擇。Webstorm  應該是目前最優秀的一款編譯器，也是使用人數最多的，當然體積也比較龐大，適合後期開始做項目的時候使用。

　　HBulider是不支援外掛程式安裝的，所有的功能都是整合好了的，它的代碼提示功能很完善，對於前期的學習使用完全是夠用的。sublime 是需要自己安裝外掛程式的，網上也有很多教程，此處不再贅述，需要說明的是，大家在下載編輯器的時候，一定要去官網下載，不要直接用別人已經安裝好外掛程式的編輯器，雖然說編輯器只是作為工具，不應該花費比研究代碼更多的時間去研究一款工具，關於安裝外掛程式，網上很多教程都解釋地很清晰，但是，當你自己去做的時候，很可能會遇到各種各樣的問題，所以有些坑必須要自己踩過，你才能有更深刻的認知。

　　三、關於代碼規範

　　代碼寫得好不好，最終的結果實現僅僅是一小部分，編程過程中的代碼的規範性及語義化尤為重要，如果自己寫的代碼第二天自己就看不懂寫的是什麼了，那麼對於需求更改和代碼維護將是一個災難，同時，由於代碼結構不清晰，編碼不規範，也很容易導致錯誤，而且又不容易尋找。所以，從一開始就應該養成良好的編碼習慣，注重細節，一定可以協助你在學習編程的路上更加順暢。

　　在編碼的過程中，應當盡量遵循xhtml的規範，它是一個標準更嚴格的html版本。

　　四、關於練習

　　基礎文法學習過後，就可以按照自己想實現的頁面動手製作了，只有多練習，才能踩更多的坑，然後通過查閱資料解決問題，才能對所學的進一步地理解，從而更加地融匯貫通。當然，善於總結也是很重要的。

　　如果暫時沒有找到合適的頁面進行練習，可以先模仿一些大的網站的其中一小模組，通過F12，可以開啟控制台，查看到網頁的源碼，當然，也可以下載一些psd設計稿，進行分頁還原。

　　五、關於切圖

　　切圖主要涉及到Photoshop的切圖工具，畫切片，然後儲存為web所用格式即可。其他的細節，在使用過程中逐步學習即可。

　　六、關於基礎階段需要掌握的知識點

　　任何一門技術不是要等到你全部弄懂原理，完全精通了，才可以去做項目，都是需要在有一定的基礎上，然後多做項目練習，逐步去深入的，所以，特別是知識儲備階段，一定是快速過基礎，然後不斷在項目練習中積累經驗。

　　下面簡單列一下基礎階段需要掌握的知識模組，以便於有一個整體的把握：

1. 　　檔案編碼
2. 　　路徑
3.        標籤
4. 　　屬性
5. 　　選取器、偽類別選取器
6. 　　CSS樣式
7. 　　盒模型
8. 　　margin塌陷
9. 　　塊元素、行內元素、行內塊及相互之間的轉換
10. 　　浮動、清除浮動
11. 　　定位：相對定位、絕對位置、固定定位、定位層級
12. 　　表單控制項
13. 　　儲存格
14. 　　CSS Hack處理　　

結語：

　　 吾生也有涯，而知也無涯，以熱愛和敬畏的態度，不斷地擴充知識的深度和廣度，並在工作和生活中進行實踐運用，大抵是幸福的一種詮釋，你看世界，世界看你的！　　

　　

　　

　　

html css 前端基礎 學習方法及經驗分享