在已經成功的為大家講解了20篇有關前端開發的技術文章之后，小海老師想跟每一位前端開發人員談一談學習前端開發的一些心得。本篇文章我就來給大家說一說我在學習前端開發過程中的一些經驗，我把它們總結成了十條警言，希望能夠對你的學習帶來一些小的幫助。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
前端開發是當今社會上比較有發展潛力的一個行業，該行業主要以Web開發、移動端開發、全棧式開發等為主要內容。在社會上有較為廣泛的應用領域，從業者有較為豐厚的薪資待遇。那么對于一個前端開發從業者來說，如何學習前端開發的相關知識，如何將自己打造為一個強大的前端開發設計師呢？小海老師從事多年的一線教學工作，深入挖掘學生在學習階段的特點，總結了以下十條學習心得，愿意與大家一同分享。
在這里我還是要推薦下我自己建的web前端開發學習群：731669587，群里都是學web前端開發的，如果你正在學習前端 ，小編歡迎你加入，今天分享的這個案例已經上傳到群文件，大家都是軟件開發黨，不定期分享干貨（只有前端軟件開發相關的），包括我自己整理的一份2018最新的前端進階資料和高級開發教程，歡迎進階中和進想深入前端的小伙伴。
由于篇幅問題，本篇文章先為大家闡述前五條，下一篇文章會為大家分享后五條。
第一條：學好基礎知識，做一個有扎實基本功的開發者。
前端開發的相關技術和知識非常多，每年還會有許多新的技術誕生并得到廣泛的推廣。IT行業本身就是一個技術更新非?？斓男袠I。不過每門技術都有它最基本的知識內容和基礎體系。無論學到多深的程度，扎實的基本功是必不可少的。
初入職場，如果能夠得到老板或技術總監一句“你的基礎知識真扎實”的賞識，對于新入行的你一定是信心滿滿，也讓領導對你有一個新層次的認識。
我將前端開發的基礎知識總結為以下幾點，對于初學者來說，一定要認真學習這部分內容：
1、HTML超文本標記性語言：盡量掌握盡可能多的標記或標記對。
(1)必須掌握的標記或標記對包括：、、、<body>、<h1>、<p>、<a>、<img>、<table>、<tr>、<td>、<th>、<form>、<input>、<select>、<option>、<textarea>、<div>、<span>、<script>、<link>、<meta>、<style>、<hr>等。
(2)同時，還有許多較為生僻的標記，大家看一看，你認識下列標記對嗎？
：用于表單中盛放表單元素的文本提示，被稱為“標簽”標記對。
：預格式化文本，在該標記對內部文本中的空格和換行都會在頁面中起作用。
：用于表示地址的語義標簽。
：用于表示變量的語義標簽。
當然還有許多較為生僻的標簽，這些標簽在日常的HTML開發中基本上已經不再使用了。但是當你學到Bootstrap框架的時候，你會發現，Bootstrap框架啟用了這些標簽，并為這些標簽賦予了特定的功能和外觀。
(3)除此之外，HTML5技術也為HTML注入了新的活力，許多新標簽和新屬性加入其中，使得HTML語言更加豐富與強大。
標記對：HTML5新加的具有數據提交功能的按鈕。
：HTML5的畫布技術，該標記對結合腳本語言對應一套完整的API，可以實現頁面矢量圖的繪制。
：HTML5的音頻技術，該標記對結合腳本語言對應一套完整的API，可以開發有關音頻的項目。
當然還有許多HTML5新加的內容，需要廣大初學者更多地接觸并掌握。
2、CSS層疊樣式表：對于CSS的各個屬性以及一些屬性之間結合使用的技巧應該多鉆研。
CSS技術作為對HTML標記對外觀的擴展，在前端開發中體現出了強大的生命力。再結合CSS3技術，又擴展了大量的屬性，使得CSS的功能更為全面，實現方法更為簡潔。學好CSS，同時也是為頁面布局打下堅實的基礎。
你會用CSS技術的使用技巧解決下列問題嗎？
如何去掉容器中圖片下方自動產生的距離。
當容器中具有浮動元素時，如何為容器設置邊框或背景顏色？
怎樣讓塊級元素在容器中水平居中？
當多個連續塊級元素的浮動布局影響了原本不想浮動的對象時該如何處理？
容器內部的對象如何實現相對于容器的自由定位？
看來，CSS的屬性及其取值只是CSS技術的第一層面，更多的使用技巧等待大家去挖掘。
3、CSS+div布局模式：這是許多布局模式的基礎，也是大部分前端開發人員接觸到的第一種布局方式。
這種布局模式對于PC端頁面的設計是非常有幫助的，同時對于后面將會遇到的“圣杯布局”、“雙飛翼布局”、“移動端布局”、“響應式布局”等，這種布局方式都具有一定的指導意義。
上述就是小海老師認為的一定要非常扎實的掌握的前端開發的基礎知識。基礎知識是高階知識的起步平臺，沒有基礎知識，更深層次的內容是無法真正理解的。
第二條：重視腳本學習，將JavaScript作為前端學習的重點。
JavaScript已經發展成為了Web開發的唯一的腳本語言。它從早期的基于對象的語言變為了面向對象的語言，現代JavaScript為前端開發帶來了不可替代的技術革新。
JavaScript可以輕松的實現HTML和CSS無法實現的流程控制。
結合DOM技術，JavaScript可以訪問HTML元素并操作它們。
HTML5中的許多API都是基于JavaScript進行開發和設計的。
強大的jQuery庫、jQuery UI、jQuery Mobile等都是在JavaScript的基礎上開發出來的。
全棧式開發所使用的node.js、AngularJS等第三方框架，也都是在JavaScript的基礎上編寫的。
這門神一般的語言，我個人認為是務必要認真學習的，不僅要學習JavaScript的語法知識，還要學習利用它實現DOM元素的使用，學會面向對象的編程思想。甚至還要掌握該門語言的細節特點。
系統學習過JavaScript的同學們，你看看下列問題你能準確的找到答案嗎？
通過表達式來系統闡述“==”和“===”這兩個運算符的區別。
通過哪個函數可以判斷從文本框中獲取的內容是不是數字？
會使用這兩個屬性嗎：contentEditable、isContentEditable。
知道window對象的兩個方法：setTimeout()、setInterval()在計時器方面的使用區別嗎？
delete運算符都能刪除哪些內容？
在腳本中，this有幾種使用情況呢？
JavaScript語言雖然很重要，許多公司都需要從業人員掌握原生態的JavaScript代碼。但是這門語言由于發展過程中的種種原因，存在許多繁冗且不好的代碼模式。例如原型鏈、閉包、對象與類等概念，都給這門語言戴上了“難學”的帽子。同時，這些知識有時候也正是JavaScript放光彩的一面，所以對于這門腳本語言掌握不精的學習者來說，小海老師告訴大家，一定要把這門語言搞懂，達到精通的程度，對于后續的全棧式開發絕對有非常好的作用。
第三條：多練習多操作，實踐是檢驗真理的唯一標準。
前端開發本身就是需要實戰經驗非常強的一門學科。學習和工作過程中，不斷地、反復地、大量地嘗試和上機操作，是學好前端開發唯一不變的方法。
這里拿Bootstrap框架為例，互聯網上大部分教程和許多前端教師都提倡讓學生從Bootstrap官網上復制粘貼代碼，以更加快速的完成頁面的搭建。
小海老師尤為反對這種方式，特別是對于還處在學習階段的同學們和初次使用Bootstrap框架的從業者。首先不可否認，Bootstrap為前端開發人員帶來了大量的類名和屬性之間的搭配關系，每一個組件和插件的使用都用腦子記下來，確實有很大的困難。但是在學習階段，我非常提倡對官網的示例代碼進行鉆研和分析，閱讀bootstrap.css文件和bootstrap.js文件，從原理上理解這個框架是如何利用簡單的類名和屬性名來實現復雜的腳本功能的。我在日常的教學過程中也是這么帶領學生一起學習的。
正所謂“知其然，還要知其所以然”，了解了內部的原理，一方面自己更加容易去記憶這些大量的名稱，另一方面，對于樣式類框架的開發，也會有一定的了解。時間久了，自己也能寫出符合自身特點的小框架，使得知識達到循序漸進、熟能生巧的程度。
第四條：閱讀前端書籍，多看有關前端開發的經典著作。
“讀書”永遠是掌握技術的一種有效方法，無論什么技術。讀書的過程不僅能夠讓我們了解作者的意圖，更能訓練我們的閱讀速度，提高自身的自學能力。這正是一個合格的前端開發工程師應該具備的業務素質。
這里，小海老師為大家推薦幾本前端開發領域的經典著作，真的希望你也能拿起教材，從第一頁讀到最后一頁，你一定會受益匪淺。
Bootstrap開發的經典教材
學習JavaScript腳本語言必不可少的好書
jQuery提高的優質教材
非常適合初學Node.js的學生閱讀的書
一本講述SVG實踐的教材
第五條：利用網絡資源，多學習前輩好的實現方法。
如今互聯網滲入到了我們學習和工作的方方面面，與其天天拿著手機刷微博、聊微信，何不拿起互聯網這個工具，多多學習一些有關前端開發的知識，積累一些前人總結出來的經驗，豐富自己的羽翼。
這里，小海老師為大家推薦幾個學習前端開發的網站，希望大家可以多多瀏覽，利用好互聯網資源。
慕課網。其中匯集了大量一線教師的教學經驗，全部是以視頻的形式呈現的。
W3CSchool。這里列舉了多門前端技術和后臺技術的基礎知識。內容較為基礎，卻是初學者好的幫手。
菜鳥教程。一個類似于W3CSchool的基礎知識學習網站。
jQuery API中文文檔（http://jquery.cuishifeng.cn/）。這里匯集了jQuery各個版本的API內容。
Bootstrap中文網。這里涵蓋了Bootstrap框架全部的組件和插件。
如果大家也有好的學習網站，希望也推薦給我哦。
由于篇幅問題，后面還有五條心得，我會在下一篇文章中，為大家展開闡述。如果你有什么學習前端開發的好方法和自己的感悟，也可以在下面留言。真心的希望能夠與你得到更深入的交流！
（未完待續）
文章預告
下一篇文章中，小海老師繼續跟廣大前端開發的愛好者談一談學習前端開發的心得。
在后續的文章中，小海老師將為大家講解浮動屬性。浮動屬性是流式定位的重要屬性，承擔了大部分傳統布局的功能。希望廣大前端學習者千萬不要錯過！
小海教材
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
小海聲明
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
