一.為什么要學(xué)習(xí)前端開發(fā)？

你可能是因?yàn)榕d趣，完成一個(gè)網(wǎng)站、頁面、功能的成就感。你也可能是因?yàn)楝F(xiàn)在前端崗位火爆，就業(yè)率高。不管是因?yàn)槭裁?#xff0c;只要找準(zhǔn)了目標(biāo)，學(xué)就是了！

突破困境：

1. 提升學(xué)歷

前端找工作，學(xué)歷重要嗎？

重要。誰要是告訴你不重要那一定是在騙你。現(xiàn)實(shí)情況是大專吃緊，本科夠用，碩士占優(yōu)，大專以下找到工作靠運(yùn)氣和真實(shí)力。

學(xué)歷是硬傷，已經(jīng)畢業(yè)的你，沒辦法回到從前，如果你是大專，可以通過自考本科提升學(xué)歷，會(huì)有一些幫助。起碼可以讓更多HR看你的簡歷。

還有就是用技術(shù)的長處去彌補(bǔ)學(xué)歷的短板，你要做到比學(xué)歷比你高的人技術(shù)更好，讓別人看到并認(rèn)可你的能力。

2. 提高技術(shù)

前端開發(fā)的基礎(chǔ)知識(shí)必須要扎實(shí)且深入去學(xué)習(xí)，達(dá)到精通的地步。掌握HTML +CSS， HTML是網(wǎng)頁的核心，這是前端最基本的知識(shí)。學(xué)好CSS是網(wǎng)頁外觀的重要一點(diǎn)，CSS可以幫助把網(wǎng)頁外觀做得更加美觀。

學(xué)好JavaScript，學(xué)習(xí)JavaScript的基本語法，以及如何使用JavaScript編程將會(huì)提高開發(fā)人員的個(gè)人技能。多看一些原生JS代碼。

學(xué)好SQL語句，要會(huì)基本的增刪查改，前端開發(fā)中構(gòu)建動(dòng)態(tài)頁面是必須使用到數(shù)據(jù)庫的，但是數(shù)據(jù)庫的產(chǎn)品很多，開發(fā)人員遇到這種情況別擔(dān)心，因?yàn)樗鼈兌紩?huì)遵循標(biāo)準(zhǔn)的SQL原則。

學(xué)好主流的Web框架，當(dāng)你掌握了HTML，CSS和JavaScript后，就應(yīng)該找一個(gè)Web框架加快你的Web開發(fā)速度，使用框架可以節(jié)約你很多時(shí)間。框架類的東西太多，要根據(jù)自己的需求來選擇性地學(xué)習(xí)。

了解瀏覽器的工作原理。要比較清楚各大瀏覽器的兼容性，各自的優(yōu)缺點(diǎn)等等。這對(duì)于前端開發(fā)過程很有幫助。

確保你的開發(fā)模式跟得上時(shí)代，技術(shù)的更新?lián)Q代非常之快，尤其是前端技術(shù)更是博大精深，要學(xué)的知識(shí)很多，所以必須保證方向是對(duì)的，要跟上技術(shù)潮流。

前端資料分享

1. 前端基礎(chǔ)

HTML

你如何理解HTML結(jié)構(gòu)的語義化

說說 title 和 alt 屬性

Html5 有哪些新特性、移除了哪些元素

Label的作用是什么？是怎么用的？

瀏覽器是怎么對(duì) Html5 的離線儲(chǔ)存資源進(jìn)行管理和加載的呢

iframe有那些缺點(diǎn)？

HTML W3C的標(biāo)準(zhǔn)

Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

HTML全局屬性(global attribute)有哪些

viewport的content屬性作用

meta 相關(guān)

div+css的布局較table布局有什么優(yōu)點(diǎn)

簡述一下src與href的區(qū)別

知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些

如何在 HTML5頁面中嵌入音頻與視頻？
…

CSS

水平居中的方法

垂直居中的方法

link 與 @import 的區(qū)別

三列布局（中間固定兩邊自適應(yīng)寬度）

BFC 有什么用

清除浮動(dòng)的幾種方式

CSS3有哪些新特性

css3 新增偽類 - 偽元素

為什么要初始化CSS樣式

IE盒子模型 、W3C盒子模型

請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景

display:inline-block 什么時(shí)候不會(huì)顯示間隙？

行內(nèi)元素float:left后是否變?yōu)閴K級(jí)元素？

如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？

display:inline-block 什么時(shí)候會(huì)顯示間隙？

CSS權(quán)重，計(jì)算規(guī)則

Sass、LESS是什么？大家為什么要使用他們？

stylus，sass，less區(qū)別

rgba() 和 opacity 的透明效果有什么不同？

px和em的區(qū)別

使用css實(shí)現(xiàn)一個(gè)持續(xù)的動(dòng)畫效果

重排和重繪

什么情況會(huì)觸發(fā)重排和重繪？

JavaScript

• 原型鏈
  (1) 創(chuàng)建對(duì)象有幾種方法？
  (2) instanceof的原理？

• 類
  (1)類的聲明？
  (2)生成實(shí)例？聲明一個(gè)類，怎么生成類的實(shí)例？

• 繼承
  (1)call、apply的共同點(diǎn)與區(qū)別?
  (2)用javascript實(shí)現(xiàn)對(duì)象的繼承/ 繼承的幾種方式，這幾種方式的優(yōu)缺點(diǎn)?

• 作用域
  (1)說說你對(duì)作用域鏈的理解？
  (2)this？

• JS閉包
  (1)閉包的特征？
  (2)閉包應(yīng)用場景？
  (3)實(shí)際開發(fā)中閉包的應(yīng)用？

• JS運(yùn)行機(jī)制，單線程，異步
  (1)如何理解js的單線程？
  (2)js為什么是單線程的？
  (3)同步和異步的區(qū)別是什么？分別舉一個(gè)同步和異步的例子？
  (4)何時(shí)需要異步？
  (5)什么是任務(wù)隊(duì)列？
  (6)請(qǐng)說出下列的值？
  (7)棧和隊(duì)列的區(qū)別？
  (8)棧和堆的區(qū)別？
  (9)什么是event loop？
  (10)event-loop流程？
  (11)哪些語句會(huì)放入異步任務(wù)隊(duì)列中？
  (12)何時(shí)被放入任務(wù)隊(duì)列？

• JS數(shù)據(jù)類型
  (1)js使用typeof能得到的哪些類型？
  (2)如何準(zhǔn)確判斷一個(gè)變量是數(shù)組類型？
  (3)js變量按照存儲(chǔ)方式區(qū)分為哪些類型，并描述其特點(diǎn)？
  (4)null和undefined的區(qū)別？
  (5)undefined的典型用法？
  (6)null的典型用法？
  (7)chrome60+瀏覽器中,a===b的是哪項(xiàng)？

• JS的內(nèi)置函數(shù)，內(nèi)置對(duì)象
  (1)js中有哪些內(nèi)置函數(shù)/ 數(shù)據(jù)封裝類對(duì)象？
  (2)js中有哪些內(nèi)置對(duì)象？
  (3)js變量按照存儲(chǔ)方式區(qū)分為哪些類型，并描述其特點(diǎn)？
  (4)字符串方法/ String對(duì)象方法?
  (5)數(shù)組方法/ Array對(duì)象方法？
  (6)數(shù)組API？
  (7)對(duì)象API？

• 數(shù)組去重
  (1)數(shù)組怎么去重？
  (2)對(duì)上述數(shù)組去重方法速度比較？
  (3)一句話數(shù)組去重？
  (4)保留數(shù)組中非重復(fù)元素？
  (5)保留數(shù)組中重復(fù)元素？

• JS邏輯判斷

• 內(nèi)存泄露
  (1)哪些操作會(huì)造成內(nèi)存泄漏？
  (2)js內(nèi)存泄漏的解決方式

• DOM
  (1)dom是哪種基本的數(shù)據(jù)結(jié)構(gòu)？
  (2)dom操作的常用api有哪些？
  (3)dom節(jié)點(diǎn)的attribute和property有何區(qū)別？
  (4)dom結(jié)構(gòu)操作/ 怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)/ dom操作的
  常用api？
  (5)dom事件的級(jí)別？
  (6)dom事件模型？
  (7)dom事件流？
  (8)描述dom事件捕獲的具體流程？
  (9)event對(duì)象的常見應(yīng)用？
  (10)自定義事件/ 模擬事件？
  (11)通用事件綁定/ 編寫一個(gè)通用的事件監(jiān)聽函數(shù)？
  (12)dom樹、render樹的關(guān)系/ dom樹、render樹的區(qū)別（第2、3條）？

• BOM
  (1)bom常用屬性？

• 通信
  (1)什么是同源策略及限制？
  (2)前后端如何通信？
  (3)跨域通信的幾種方式？
  (4)jsonp實(shí)現(xiàn)？
  (5)可以跨域的三個(gè)標(biāo)簽？
  (6)三個(gè)可跨域的標(biāo)簽的使用場景？

• Ajax
  (1)ajax請(qǐng)求的原理/ 手寫一個(gè)ajax請(qǐng)求？
  (2)readyState？
  (3)ajax異步與同步的區(qū)別？
  (4)ajax傳遞中文用什么方法？

• 錯(cuò)誤監(jiān)控
  (1)前端錯(cuò)誤的分類/ 如何檢測js錯(cuò)誤/ 如何保證你的產(chǎn)品質(zhì)量？
  (2)錯(cuò)誤的捕獲方式？
  (3)上報(bào)錯(cuò)誤的基本原理？

• 模塊化
  (1)amd、cmd區(qū)別？
  (2)amd、commonJs區(qū)別？

• 虛擬DOM
  (1)vdom的如何應(yīng)用，核心api是什么？
  (2)虛擬dom轉(zhuǎn)換成真實(shí)dom？
  (3)diff實(shí)現(xiàn)過程？

• JS基礎(chǔ)
  (1)對(duì)js的理解？
  (2)請(qǐng)說出以下代碼輸出的值？
  (3)把以下代碼，改寫成依次輸出0-9
  (4)如何區(qū)分?jǐn)?shù)組對(duì)象，普通對(duì)象，函數(shù)對(duì)象
  (5)面向?qū)ο蟆⒚嫦蜻^程
  (6)面向?qū)ο蟮娜蠡咎匦?br /> (7)XML和JSON的區(qū)別？
  (8)Web Worker 和webSocket？
  (9)Javascript垃圾回收方法？
  (10)new操作符具體干了什么呢？
  (11)js延遲加載的方式有哪些？
  (12)WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？

結(jié)尾

學(xué)習(xí)html5、css、javascript這些基礎(chǔ)知識(shí)，學(xué)習(xí)的渠道很多，就不多說了，例如，一些其他的優(yōu)秀博客。但是本人覺得看書也很必要，可以節(jié)省很多時(shí)間，常見的javascript的書，例如：javascript的高級(jí)程序設(shè)計(jì)，是每位前端工程師必不可少的一本書，邊看邊用，了解js的一些基本知識(shí)，基本上很全面了，如果有時(shí)間可以讀一些，js性能相關(guān)的書籍，以及設(shè)計(jì)者模式，在實(shí)踐中都會(huì)用的到。

資料領(lǐng)取方式：戳這里免費(fèi)獲取

，例如，一些其他的優(yōu)秀博客。但是本人覺得看書也很必要，可以節(jié)省很多時(shí)間，常見的javascript的書，例如：javascript的高級(jí)程序設(shè)計(jì)，是每位前端工程師必不可少的一本書，邊看邊用，了解js的一些基本知識(shí)，基本上很全面了，如果有時(shí)間可以讀一些，js性能相關(guān)的書籍，以及設(shè)計(jì)者模式，在實(shí)踐中都會(huì)用的到。

資料領(lǐng)取方式：戳這里免費(fèi)獲取

總結(jié)

以上是生活随笔為你收集整理的web开发软件，8个优秀的CSS实践，附面试题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。