學習前端開發，一段心路歷程，這個世界根本沒有速成的方法

時間 2019-11-17

標籤學習前端開發一段心路歷程這個世界根本沒有速成方法简体版

原文原文鏈接

本篇文章我就來給你們說一說我在學習前端開發過程當中的一些經驗，我把它們總結成了十條警言，但願可以對你的學習帶來一些小的幫助。css

但願收藏了我寫的文章的你同時能夠關注一下微信公衆號：「web前端技術圈」，由於這些文章都是連載的，而且是通過我係統的概括過的。html

web前端/html5學習羣：733581373前端

前端開發是當今社會上比較有發展潛力的一個行業，該行業主要以Web開發、移動端開發、全棧式開發等爲主要內容。在社會上有較爲普遍的應用領域，從業者有較爲豐厚的薪資待遇。那麼對於一個前端開發從業者來講，如何學習前端開發的相關知識，如何將本身打造爲一個強大的前端開發設計師呢？小海老師從事多年的一線教學工做，深刻挖掘學生在學習階段的特色，總結了如下十條學習心得，願意與你們一同分享。html5

因爲篇幅問題，本篇文章先爲你們闡述前五條，下一篇文章會爲你們分享後五條。node

第一條：學好基礎知識，作一個有紮實基本功的開發者。

前端開發的相關技術和知識很是多，每一年還會有許多新的技術誕生並獲得普遍的推廣。IT行業自己就是一個技術更新很是快的行業。不過每門技術都有它最基本的知識內容和基礎體系。不管學到多深的程度，紮實的基本功是必不可少的。jquery

初入職場，若是可以獲得老闆或技術總監一句「你的基礎知識真紮實」的賞識，對於新入行的你必定是信心滿滿，也讓領導對你有一個新層次的認識。web

我將前端開發的基礎知識總結爲如下幾點，對於初學者來講，必定要認真學習這部份內容：編程

一、HTML超文本標記性語言：儘可能掌握儘量多的標記或標記對。bootstrap

(1)必須掌握的標記或標記對包括：<html>、<head>、<title>、<body>、<h1>、<p>、<a>、<img>、<table>、<tr>、<td>、<th>、<form>、<input>、<select>、<option>、<textarea>、<div>、<span>、<script>、<link>、<meta>、<style>、<hr>等。canvas

(2)同時，還有許多較爲生僻的標記，你們看一看，你認識下列標記對嗎？

<label></label>：用於表單中盛放表單元素的文本提示，被稱爲「標籤」標記對。
<pre></pre>：預格式化文本，在該標記對內部文本中的空格和換行都會在頁面中起做用。
<address></address>：用於表示地址的語義標籤。
<var></var>：用於表示變量的語義標籤。

固然還有許多較爲生僻的標籤，這些標籤在平常的HTML開發中基本上已經再也不使用了。可是當你學到Bootstrap框架的時候，你會發現，Bootstrap框架啓用了這些標籤，併爲這些標籤賦予了特定的功能和外觀。

(3)除此以外，HTML5技術也爲HTML注入了新的活力，許多新標籤和新屬性加入其中，使得HTML語言更加豐富與強大。

<button>標記對：HTML5新加的具備數據提交功能的按鈕。
<canvas></canvas>：HTML5的畫布技術，該標記對結合腳本語言對應一套完整的API，能夠實現頁面矢量圖的繪製。
<audio></audio>：HTML5的音頻技術，該標記對結合腳本語言對應一套完整的API，能夠開發有關音頻的項目。

固然還有許多HTML5新加的內容，須要廣大初學者更多地接觸並掌握。

二、CSS層疊樣式表：對於CSS的各個屬性以及一些屬性之間結合使用的技巧應該多鑽研。

CSS技術做爲對HTML標記對外觀的擴展，在前端開發中體現出了強大的生命力。再結合CSS3技術，又擴展了大量的屬性，使得CSS的功能更爲全面，實現方法更爲簡潔。學好CSS，同時也是爲頁面佈局打下堅實的基礎。

你會用CSS技術的使用技巧解決下列問題嗎？

如何去掉容器中圖片下方自動產生的距離。
當容器中具備浮動元素時，如何爲容器設置邊框或背景顏色？
怎樣讓塊級元素在容器中水平居中？
當多個連續塊級元素的浮動佈局影響了本來不想浮動的對象時該如何處理？
容器內部的對象如何實現相對於容器的自由定位？

看來，CSS的屬性及其取值只是CSS技術的第一層面，更多的使用技巧等待你們去挖掘。

web前端學習交流羣：733581373

三、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文件，從原理上理解這個框架是如何利用簡單的類名和屬性名來實現複雜的腳本功能的。我在平常的教學過程當中也是這麼帶領學生一塊兒學習的。

正所謂「知其然，還要知其因此然」，瞭解了內部的原理，一方面本身更加容易去記憶這些大量的名稱，另外一方面，對於樣式類框架的開發，也會有必定的瞭解。時間久了，本身也能寫出符合自身特色的小框架，使得知識達到按部就班、熟能生巧的程度。