在我為所有人成功解釋了許多有關(guān)前端開發(fā)的技術(shù)文章之后，我想與每個(gè)前端開發(fā)人員討論一些學(xué)習(xí)前端開發(fā)的技巧。 在本文中，我將告訴您我在學(xué)習(xí)前端開發(fā)過程中的一些經(jīng)驗(yàn)。 我將它們概括為五個(gè)警告，希望對您的學(xué)習(xí)有所幫助。

前端開發(fā)是當(dāng)今社會(huì)中具有更大發(fā)展?jié)摿Φ男袠I(yè)。 該行業(yè)主要專注于Web開發(fā)，移動(dòng)終端開發(fā)和全棧開發(fā)。 在社會(huì)上，應(yīng)用范圍更廣，從業(yè)者的薪水相對較高。 那么對于前端開發(fā)從業(yè)人員來說，如何學(xué)習(xí)前端開發(fā)的相關(guān)知識，以及如何使自己成為強(qiáng)大的前端開發(fā)設(shè)計(jì)師呢？ 我從事一線教學(xué)已經(jīng)很多年了，在學(xué)習(xí)階段對學(xué)生的特點(diǎn)進(jìn)行了挖掘，總結(jié)了以下十種學(xué)習(xí)經(jīng)驗(yàn)，我愿意與大家分享。

由于空間問題，本文首先詳細(xì)介紹每個(gè)人的前五個(gè)項(xiàng)目。 第一個(gè)項(xiàng)目：很好地學(xué)習(xí)基礎(chǔ)知識， 做扎實(shí)的基礎(chǔ)技能開發(fā)人員。

前端開發(fā)有許多相關(guān)技術(shù)和知識，并且每年都會(huì)誕生并廣泛推廣許多新技術(shù)。  IT行業(yè)本身就是一個(gè)技術(shù)變化非?？斓男袠I(yè)。 但是，每種技術(shù)都有其最基本的知識內(nèi)容和基本系統(tǒng)。 無論您學(xué)習(xí)多深入，扎實(shí)的基本技能都是必不可少的。

當(dāng)您第一次進(jìn)入工作場所時(shí)，如果您可以得到老板或技術(shù)主管的贊賞，“您的基礎(chǔ)知識確實(shí)扎實(shí)”，您必須對此充滿信心。 新手，讓領(lǐng)導(dǎo)者對您有了新的了解。

我將前端開發(fā)的基本知識總結(jié)為以下幾點(diǎn)。 對于初學(xué)者，我們必須仔細(xì)研究這一部分：

1。  HTML超文本標(biāo)記語言：嘗試掌握盡可能多的標(biāo)記或標(biāo)記對。

（1）必須掌握的標(biāo)記或標(biāo)記對包括：，，，，，

，，，，，，，，，，，，，，，  ，，，等。

（2）同時(shí)，還有許多不尋常的標(biāo)記。 看一看。 您知道以下標(biāo)簽嗎？

：用于將表單元素保存在表單中的文本提示，稱為“標(biāo)簽”標(biāo)簽對。

：預(yù)格式化的文本，標(biāo)記將影響內(nèi)部文本中的空格和換行符。

：用于表示地址的語義標(biāo)記。

：用于表示變量的語義標(biāo)簽。

當(dāng)然，還有許多不尋常的標(biāo)簽，這些標(biāo)簽基本上不再用于日常HTML開發(fā)中。 但是，當(dāng)您學(xué)習(xí)Bootstrap框架時(shí)，會(huì)發(fā)現(xiàn)Bootstrap框架啟用了這些標(biāo)簽并為其提供了特定的功能和外觀。

（3）此外，HTML5技術(shù)還為HTML注入了新的活力。 添加了許多新標(biāo)簽和新屬性，以使HTML語言變得更豐富，更強(qiáng)大。

標(biāo)記對：HTML5新添加的具有數(shù)據(jù)提交功能的按鈕。

：HTML5畫布技術(shù)中，標(biāo)記對與腳本語言結(jié)合使用對應(yīng)于一套完整的API，可以實(shí)現(xiàn)頁面矢量圖的繪制。

：HTML5音頻技術(shù)，此標(biāo)記對應(yīng)于與腳本語言結(jié)合的完整API集，并且可以開發(fā)與音頻相關(guān)的項(xiàng)目。

當(dāng)然，有很多新的HTML5內(nèi)容，需要更多的初學(xué)者來接觸和掌握。

2。  CSS級聯(lián)樣式表：應(yīng)該進(jìn)一步研究CSS的各種屬性以及組合某些屬性的技術(shù)。

作為HTML標(biāo)記外觀的擴(kuò)展，CSS技術(shù)在前端開發(fā)中顯示出巨大的生命力。 結(jié)合CSS3技術(shù)，擴(kuò)展了許多屬性，使CSS更全面，更簡潔。 很好地學(xué)習(xí)CSS也為頁面布局打下了堅(jiān)實(shí)的基礎(chǔ)。

您是否使用CSS技術(shù)解決以下問題？

如何刪除容器中圖片下方自動(dòng)生成的距離。

當(dāng)容器中有浮動(dòng)元素時(shí)，如何設(shè)置容器的邊框或背景色？

如何使塊級元素在容器中水平居中？

當(dāng)多個(gè)連續(xù)的塊級元素的浮動(dòng)布局影響您不希望浮動(dòng)的對象時(shí)，如何處理？

如何實(shí)現(xiàn)容器內(nèi)對象相對于容器的自由定位？

似乎CSS屬性及其值只是CSS技術(shù)的第一級，更多的技術(shù)正在等待大家探索。

3，CSS + div布局模式：這是許多布局模式的基礎(chǔ)，并且也暴露給大多數(shù) 前端開發(fā)人員第一種布局方法。

此布局模式對于PC側(cè)頁面的設(shè)計(jì)以及“圣杯布局”，“雙翼飛行布局”和“移動(dòng)”結(jié)束非常有用 布局”，“響應(yīng)式布局”等，這種布局方法具有一定的指導(dǎo)意義。

以上是小海老師認(rèn)為必須非常扎實(shí)地掌握的前端開發(fā)基礎(chǔ)知識。 基礎(chǔ)知識是高級知識的起始平臺(tái)。 沒有基礎(chǔ)知識，就無法真正理解更深的內(nèi)容。   第2條：注意腳本學(xué)習(xí)，并使JavaScript成為前端學(xué)習(xí)的重點(diǎn)。

JavaScript已發(fā)展成為用于Web開發(fā)的唯一腳本語言。 它已從早期的基于對象的語言變?yōu)槊嫦驅(qū)ο蟮恼Z言。 現(xiàn)代JavaScript為前端開發(fā)帶來了不可替代的技術(shù)創(chuàng)新。

JavaScript可以輕松實(shí)現(xiàn)HTML和CSS無法實(shí)現(xiàn)的過程控制。

結(jié)合DOM技術(shù)，JavaScript可以訪問HTML元素并對其進(jìn)行操作。

HTML5中的許多API都是基于JavaScript開發(fā)和設(shè)計(jì)的。

強(qiáng)大的jQuery庫，jQuery UI，jQuery Mobile等都是基于JavaScript開發(fā)的。

全棧開發(fā)中使用的第三方框架（例如，node.js和AngularJS）也是基于JavaScript編寫的。

我個(gè)人認(rèn)為這是一種神似的語言，不僅要學(xué)習(xí)JavaScript的語法知識，而且要學(xué)會(huì)使用它來實(shí)現(xiàn)DOM元素的使用，都必須認(rèn)真學(xué)習(xí)。 并學(xué)習(xí)面向?qū)ο蟮木幊趟枷搿?甚至掌握語言的細(xì)節(jié)。

系統(tǒng)地學(xué)習(xí)過JavaScript的學(xué)生，通過查看以下問題，您能否準(zhǔn)確找到答案？

使用表達(dá)式系統(tǒng)地解釋兩個(gè)運(yùn)算符“ ==”和“ ===”之間的區(qū)別。

哪個(gè)函數(shù)可用于確定從文本框中獲取的內(nèi)容是否為數(shù)字？

將使用以下兩個(gè)屬性：contentEditable，isContentEditable。

您是否知道窗口對象的兩個(gè)方法setTimeout（）和setInterval（）在計(jì)時(shí)器方面的區(qū)別？

刪除操作員可以刪除哪些內(nèi)容？

在腳本中，有多少用途？

盡管JavaScript語言非常重要，但許多公司仍需要員工掌握原始JavaScript代碼。 但是，由于該語言開發(fā)過程中的各種原因，因此存在許多繁瑣且糟糕的代碼模式。 例如，諸如原型鏈，閉包，對象和類之類的概念給這種語言帶來了“難以學(xué)習(xí)”的帽子。 同時(shí)，這種知識有時(shí)是JavaScript的光輝一面，因此對于不精通此腳本語言的學(xué)習(xí)者，他們必須了解該語言才能達(dá)到熟練水平。 對于后續(xù)的全棧開發(fā)絕對有很好的效果。   第3條：練習(xí)越來越多的操作。 實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。

前端開發(fā)本身是一門需要非常豐富的實(shí)踐經(jīng)驗(yàn)的學(xué)科。 在學(xué)習(xí)和工作過程中，不斷地，反復(fù)地進(jìn)行大量的試驗(yàn)和計(jì)算機(jī)操作是學(xué)習(xí)前端開發(fā)的唯一恒定方法。

以Bootstrap框架為例。 互聯(lián)網(wǎng)上的大多數(shù)教程和許多前端老師都鼓勵(lì)學(xué)生從Bootstrap官方網(wǎng)站復(fù)制和粘貼代碼，以更快地完成頁面構(gòu)建。

這種方法尤其受到反對，特別是對于仍處于學(xué)習(xí)階段的學(xué)生和首次使用Bootstrap框架的從業(yè)者。 首先，不可否認(rèn)的是，Bootstrap為前端開發(fā)人員帶來了類名和屬性之間的大量匹配關(guān)系，并且記住了每個(gè)組件和插件的使用，這確實(shí)非常困難。 但是在學(xué)習(xí)階段，我強(qiáng)烈建議研究和分析官方網(wǎng)站的示例代碼，閱讀bootstrap.css文件和bootstrap.js文件，并原則上理解此框架如何使用簡單的類名和屬性名來實(shí)現(xiàn)復(fù)雜的 腳本功能。 我在日常教學(xué)過程中也會(huì)這樣做是什么促使學(xué)生們一起學(xué)習(xí)。

俗話說，“知道原因，也知道原因”。 一方面，了解了內(nèi)部原理之后，我更容易記住這些大量的名稱。 另一方面，因?yàn)槟€將對樣式框架的開發(fā)有一定的了解。 隨著時(shí)間的流逝，我還可以編寫一個(gè)適合自己特點(diǎn)的小型框架，以便逐步學(xué)習(xí)知識并實(shí)踐完美。   第4條：閱讀前端書籍，并閱讀更多有關(guān)前端開發(fā)的經(jīng)典書籍。

“閱讀”始終是掌握技術(shù)的有效方法，無論使用哪種技術(shù)。 閱讀過程不僅使我們了解作者的意圖，而且訓(xùn)練了我們的閱讀速度，提高了我們的自學(xué)能力。 這正是合格的前端開發(fā)工程師應(yīng)具備的條件。