前端如何學習和相關面試題整理

時間 2019-11-15

標籤前端如何學習相關面試整理欄目快樂工作简体版

原文原文鏈接

1. 怎麼學習前端開發？求推薦學習路線？

http://www.zhihu.com/question/30180100javascript

http://www.zhihu.com/question/22951927css

學習網站：w3cschool的教程或者慕課網前端視頻教程，Learn to codehtml

           書籍： HTML5+CSS3：
                    《HTML5高級程序設計》
                    《CSS權威指南》前端

《HTML之路：XHTML和CSS最佳實踐指南》java

JavaScript：《JavaScript 高級程序設計》jquery

《面向對象的Javascript》（Object-Oriented JavaScript）web

jQuery ：《鋒利jQuery》面試

一些大牛博客ajax

2. 前端相關面試題目

html 中經常使用的標籤和相應屬性知識點須要熟悉掌握編程

1）Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義

<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

2）xhtml和html有什麼區別？

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

3）CSS引入的方式有哪些? link和@import的區別是?
內聯內嵌外聯導入
區別：同時加載
前者無兼容性，後者CSS2.1如下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可

4）css中的選擇器有哪些？

經常使用的有元素選擇器，類選擇器，id選擇器，屬性選擇器

高級：後代選擇器，子元素選擇器，相鄰兄弟選擇器，僞類，僞元素

5）前端頁面有哪三層構成，分別是什麼?做用是什麼?

結構層 Html ：由 HTML 或 XHTML 之類的標記語言搭建文檔的結構，標籤對網頁內容的語義含義作出了描述

表示層 CSS ：處理網頁內容的佈局顯示問題，設置文檔的呈現效果

行爲層 js：經過JavaScript 和Dom 對網頁內容的事件作出響應，實現文檔的行爲。

6）經常使用的瀏覽器有哪些？它們的內核是什麼？

IE（IE內核/Trident內核）火狐（Gecko）谷歌（webkit） opera(Presto), Safari(webkit)

7) 描述css reset的做用和用途。
Reset重置瀏覽器的css默認屬性瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

8) 清除浮動的幾種方式，各自的優缺點（http://www.jb51.net/css/173023.html）

1.使用空標籤清除浮動 clear:both（理論上能清除任何標籤的浮動，但增長了無心義的標籤）

2. 父級div定義僞類:after 和 zoom （效果好，但難理解）

3．對父級設置適合的css（設置的高度固定不可變）

4.使用overflow：hidden（能夠清除父級內使用float產生浮動，必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度，不能和position配合使用，由於超出的尺寸的會被隱藏）

9）什麼是盒子模型？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

10）簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此

11)常遇到的瀏覽器兼容問題有哪些？如何解決？（https://www.douban.com/group/topic/4629864/）

1.不一樣的瀏覽器的標籤默認的內邊距和外邊距不一樣

解決方案：CSS裏 *{margin:0;padding:0;}

2. 塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性

3.圖片默認有間距解決方案：使用float屬性爲img佈局

4. 手形光標. cursor: pointer. 而hand 只適用於 IE

等等

12）div+css的佈局較table佈局有什麼優勢？

改版的時候更方便只要改css文件。

頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

易於優化（seo）搜索引擎更友好，排名更容易靠前。

13）.a：img的alt與title有何異同？b：strong與em的異同？

答案：

alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)

title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

strong:粗體強調標籤，強調，表示內容的重要性

em:斜體強調標籤，更強烈強調，表示內容的強調點

14)css 選擇器的優先級

派生選擇器<類選擇器<id選擇器

id 選擇器的優先級低於內聯樣式

15）行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？常見的塊級元素和行內元素？

塊級元素(block)特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;

寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

塊級元素(block element)

div -最經常使用的塊級元素            dl - 和dt dd搭配使用的塊級元素

form - 交互表單                      h1 - 大標題

hr - 水平分隔線                        ol - 排序表單

p - 段落                                    ul - 非排序列表



內聯元素(inline element)

a - 錨點            b - 粗體(不推薦)              br - 換行

em - 強            i - 斜體                           img - 圖片

input - 輸入框                                        label - 表格標籤

select - 項目選擇                                    small - 小字體文本

span - 經常使用內聯容器，定義文本內區塊    strike - 中劃線

strong - 粗體強調                                  sub - 下標

sup - 上標                                              textarea - 多行文本輸入框

tt - 電傳文本                                           u - 下劃線

16）瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

17）外邊距重疊時的計算規則：

摺疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

兩個外邊距一正一負時，摺疊結果是二者的相加的和。

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

18）rgba()和opacity的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

19）.px和em的區別。

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

20）你如何對網站的文件和資源進行優化？期待的解決方案包括：

文件合併

文件最小化/文件壓縮

使用CDN託管

緩存的使用

21）css hack

<![end if]-->

　　_marging \\IE 6

　　+margin \\IE 7

　　Marging:0 auto \9 全部Ie

Margin \0 \\IE 8

22）常見HTTP協議的狀態消息都有哪些?

100：continue（繼續）初始的請求已經接受，客戶應當繼續發送請求的其他部分

200：Ok 請求成功 get和post請求的請求應答文檔跟在後面

304：not modified 自從上次請求後請求網頁的內容未被修改過

400：錯誤請求，請求出現語法錯誤

401：未受權用戶試圖未經受權訪問受密碼保護的頁面

403：forbidden 資源不可用服務器理解客戶的請求可是拒絕處理

404：Not Found 沒法找到指定位置的資源

408：request time out （請求超時）

500：服務器內部出錯，沒法完成請求

502：網關錯誤

503：服務器不可用，服務器因爲維護或者負載太重未能應答

504：網關超時

505：http 版本不支持請求中使用的http 協議的版本

23）css樣式是什麼？

分別是內聯樣式（<a style="">）,內部樣式(<style></style>),

外部樣式（寫在css文件中的樣式），瀏覽器用戶自定義樣式，瀏覽器默認樣式；

按照其來源優先級爲內聯樣式>內部樣式>外部樣式>瀏覽器用戶自定義樣式>瀏覽器默認樣式

按照選擇器優先級爲id >class>元素選擇器

若是有important,important優先級最高。

元素的最終樣式是累加的結果，其中屬性若是有衝突則以優先級高的爲準

js:

1）ajax請求的方法有哪些？簡要描述它們的區別？

Query對Ajax操做進行了封裝，在jQuery中$.ajax()方法屬於最底層的方法，

第2層是load(),$.get()和$.post()方法第三層是$.getScript()和$.getJSON()

方法。

load（）方法是jquery中最爲簡單和經常使用的Ajax方法能載入遠程的HTML代碼並插入DOM中結構，它的回調函數不管成功或者失敗都會被調用，$.get()方法和$.post()方法在response的狀態爲成功時，才能調用回調函數

2）.javascript的本地對象，內置對象和宿主對象
本地對象爲array obj regexp等能夠new實例化
內置對象爲gload Math 等不能夠實例化的
宿主爲瀏覽器自帶的document,window 等

3）怎樣添加、移除、移動、複製、建立和查找節點？

1．建立新節點

createDocumentFragment()//建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

2．添加、移除、替換、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替換

insertBefore() //插入

3.查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值

getElementById() //經過元素Id，惟一性

4）JavaScript中的5種主要的數據類型？

Number、String、Object、Array、Boolean

5）sessionstorage，localstorage和cookie之間的區別

共同點：都是保存在瀏覽器端，且同源的。

區別：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

6）如何獲取字符串長度，截取字符串？

獲取字符串長度：string.length

截取字符串：

substring(start,end)

開始和結束的位置，從零開始的索引，返回值：一個新的字符串，該字符串值包含 stringObject 的一個子字符串，其內容是從 start 處到 stop-1 處的全部字符，其長度爲 stop 減 start。

substr(start [, length ]) start 必需。所需的子字符串的起始位置。字符串中的第一個字符的索引爲 0。length 可選。在返回的子字符串中應包括的字符個數。

7）body中的onload()函數和jQuery中的document.ready()有什麼區別？

回答：onload()和document.ready()的區別有如下兩點：

一、咱們能夠在頁面中使用多個document.ready()，但只能使用一次onload()。

二、document.ready()函數在頁面DOM元素加載完之後就會被調用，而onload()函數則要在全部的關聯資源（包括圖像、音頻）加載完畢後纔會調用

8）請使用jQuery將頁面上的全部元素邊框設置爲2px寬的虛線？

回答：這正是jQuery選擇器上場的時候了，代碼以下：

$("*").css("border", "2px dotted red");

</script>

9）變量做用域與閉包：

a) 做用域：就是變量可以起做用的範圍；

b) 局部變量：定義在一個函數裏，只能在這個函數裏用；

c) 全局變量：不定義在任何一個函數裏，能夠在任何地方去用；

d) 閉包：是另外一種做用域；子函數可使用父函數的局部變量；

10）=== 與 ==區別

　　=== 是嚴格相等，不會進行類型轉換，而 == 是不嚴格相等，會進行類型轉換。有些js的書中，建議開發人員永遠不要用 == 或者 != 。

可是jquery源碼中，有用到「==」或者「!=」的狀況 —— 判斷 undefined 和 null 的時候。

11）檢測obj是否爲window對象（http://www.jb51.net/article/61640.htm）

複製代碼代碼以下:

//null == window.null爲true

function isWindow(obj){

return obj != null && obj == window.obj;

}

12）字符串拼接方法？

第一種方法用鏈接符「+」把要鏈接的字符串連起來：

str="a";

str+="b";

第二種方法將兩個或多個字符串，並返回一個新的單字符串。

語法

string.concat(string2, string3[, ..., stringN]);

第三種方法

join() 方法用於把數組中的全部元素放入一個字符串。

元素是經過指定的分隔符進行分隔的。

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write()arr.join(".")

</script>

輸出：

George.John.Thomas

13）js 函數的調用（http://www.cnblogs.com/mq0036/p/3934867.html）

S函數調用的四種方法：方法調用模式，函數調用模式，構造器調用模式，apply,call調用模式

方法調用模式：
先定義一個對象，而後在對象的屬性中定義方法，經過myobject.property來執行方法，this即指當前的myobject
對象。

函數調用模式
定義一個函數，設置一個變量名保存函數，這時this指向到window對象。

構造器調用模式
定義一個函數對象，在對象中定義屬性，在其原型對象中定義方法。在使用prototype的方法時，必須實例化該對象才能調用其方法。

apply,call調用模式
調用一個對象的一個方法，以另外一個對象替換當前對象。

var myobject={};
var sum = function(a,b){
　　return a+b;
};
var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]);
alert(sum2);

14）對Js中this 的理解？（http://www.jb51.net/article/41656.htm）http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

1．純粹的函數調用（this表明全局對象Global）

2. 做爲對象方法的調用

15）什麼是 AJAX ？同步和異步的區別？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

同步：腳本會停留並等待服務器發送回覆而後再繼續

　異步：腳本容許頁面繼續其進程並處理可能的回覆

16)使用ajax 請求時爲何會出現跨域問題？如何處理？

由於js 同源策略的限制，同源策略是客戶端腳本的重要安全度量標準，同源指的是同協議，同域名，同端口號

1.經過修改document.domain和隱藏的IFrame來實現跨域請求。這種方案多是最簡單的一種跨域請求的方案，可是它一樣是一種限制最大的方案。首先，它只能實如今同一個頂級域名下的跨域請求；另外，當在一個頁面中還包含有其它的IFrame時，可能還會產生安全性異常，拒絕訪問。

2.經過請求當前域的代理，由服務器代理去訪問另外一個域的資源。XMLHttpRequest經過請求本域內的一個服務器資源，將要訪問的目標資源提供給服務器，交由服務器去代理訪問目標資源。這種方案，能夠實現徹底的跨域訪問，可是開發，請求過程的消費會比較大。

3. 經過HTML中能夠請求跨域資源的標籤引用來達到目的，好比Image,Script,LINK這些標籤。在這些標籤中，Script無疑是最合適的。在請求每個腳本資源時，瀏覽器都會去解析並運行腳本文件內定義的函數，或須要立刻執行的JavaScript代碼，咱們能夠經過服務器返回一段腳本或 JSON對象，在瀏覽器解析執行，從而達到跨域請求的目的。使用script標籤來實現跨域請求，只能使用get方法請求服務器資源。

4. 經過jsonp JSONP就是在客戶端將要用來處理請求結果的函數名做爲參數傳遞給服務器端，然服務器端將請求結果數據做爲參數包裝在這個函數中並返回給客戶端執行

17) js 封裝的理解？（http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html）

js 是基於對象的語言，但不是真正的面向對象的編程語言，由於js 的語法中沒有類的概念，封裝是指現實世界的一切事物都是對象，由屬性和方法組成

js 實現封裝的辦法