2016年最新前端面試題總結

<一>、HTML及HTML5

1.Doctype是什麼？有什麼做用？如何觸發嚴格模式和混雜模式？區別它們分別有什麼意義？

解答：Doctype是document type(文檔模型)的簡寫，用來講明所用的xml或html是什麼版本的。其做用是告訴瀏覽器的解析器該文件用什麼類型來解析；若是沒有對Doctype進行聲明或聲明不正確，瀏覽器將會用」怪異模式」對網頁進行渲染。定義成下面的聲明能夠觸發相應的模式。XHTML1.0提供了三種DTD聲明可選擇，分別是：前端

A.過渡的（transitional,也叫混雜模式）,要求比較寬鬆，容許繼續使用HTML4.01的標識，完整聲明爲：web

<!Doctype html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional’’EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd」>面試

B.嚴格的（strict）：要求嚴格的，不能使用任何表現層的標識和屬性；算法

C.框架的（Frameset）:專門針對框架頁面設計使用的DTD，若是頁面中包含有框架，能夠採用DTDcanvas

意義：達到數據與表現相分離的目的。瀏覽器

2.談談對WEB標準的理解，以及對W3C組織的認識？

解答：緩存

WEB標準不是某一個標準，而是一系列標準的集合；安全

網頁主要有三個部分分紅：

結構層(straucture) 結構化標準語言主要包括XHTML和HTML;
表現層(presentation) 表現標準語言主要是CSS;
行爲層(behavior) 主要包括對象模型(W3C DOM) 、ECMAScript;

WEB標準規範要求，書寫標籤必須閉合、小寫、不亂嵌套，能夠提升搜索機器人對瀏覽器內容的搜索率----SEO;
建議使用外鏈的CSS和JS腳本，從而實現結構與行爲、結構與表現的分離，提升頁面的渲染速度，能更快的顯示內容。
樣式與標籤的徹底分離，更合理的語義標籤，使內容被更多的用戶瀏覽和使用，內容被更多的設備所訪問，從而大幅度的下降維護成本；
不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性；

3.什麼是quirks mode(怪異模式)?

解答：指在計算機領域中，一些網頁瀏覽器爲了維護比較舊的網頁設計的向後兼容性而採用的技術，這裏的怪異模式又區別於萬維網聯盟與網頁工程組所設計的」標準模式」。

4.HTML與XHTML的區別?

解答：HTML是一種基本的WEB網頁設計語言，而XHTML是基於XML的標誌語言。主要的區別有如下幾點：

功能性：XHTML能夠兼容各大瀏覽器、手機以及PDA,而且瀏覽器也能正確的編輯網頁；
結構上：XHTML的語法要求更爲嚴格。XHTML全部的標籤必須小寫；XHTML標籤必須成對成雙成對；XHTML順序必須正確；XHTML全部屬性必須使用雙引號；不容許使用target=’_blank’(example: false:{<a href=」#」 target=」_blank」>} true:{<a href=」#」 rel=」external」>})

5.http狀態碼有哪些? 分別表明什麼意思？

解答：主要分爲五大類：

A. 100-199 用於指定客戶端應響應的某些動做；

B. 200-299 用於表示請求成功；

C. 300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息

D. 400-499 用於指出客戶端的錯誤

E. 500-599 用於支持服務器錯誤

經常使用的http狀態碼：

200、204、304、400、404、500

6.日常用哪些瀏覽器來測試代碼？分別說說它們的內核？

解答：目前流行的瀏覽器有IE、Opera、Mozilla Firefox、Chrome以及Safari;它們的內核分別是：IE瀏覽器的內核是Trident, Mozilla Firefox 的瀏覽器內核是Gecko(火狐內核), Chrome瀏覽器內核是Chromium(其實Chromium就是Webkit內核，是從Webkit裏分支出來的), Safari瀏覽器內核是Webkit；Opera瀏覽器內核爲Presto。基於Linux平臺的瀏覽器Konqueror的內核是KHTML（Konqueror不經常使用，是KDE開發的，速度快，容錯率低）

7.行內有素有哪些？塊級元素有哪些？空元素有哪些？請舉例說明？並指出它們(行內元素與塊級元素)之間的區別？

解答：

行內元素：<span> <strong> <em> <input> <img>(較特殊,具備塊級元素的屬性,能夠設置其寬高) <label> <select> <textarea> <cite> <br>;

塊級元素：<div> <ul> <li> <p> <hn>(n表示1~6) <filedset> <form> <hr> <iframe> <ol> <di> <table> <tr> <td>;

空元素(單標籤)：<hr/> <img/> <br/> <meta/> <input/> <link/>等等；

塊級元素與行內元素的區別：

1.塊級元素獨佔一行，其寬度自動填滿其父容器；相反，行內元素不會獨佔一行，相鄰行內元素會排成一行，一行排不下，會自動排到下一行，其寬度隨內容的寬高自動變換；

2.塊級元素能夠設置width和height,而行級元素設置width和height無效；

3.塊級元素能夠設置margin和padding，行內元素水平設置margin和padding有效，垂直設置margin和padding無效；

塊級元素與行級元素的轉換能夠經過：display:block(inline-block/inline)來轉換；

8.link與@import的區別？

解答：1. Link屬於XHTML標籤，而@import是CSS提供的；

2. 頁面加載時，link引用的外部文件會被同時加載，而@import引用的CSS會等到頁面加載完後再加載；

3. Import只在IE5以上才能被識別，而link屬於XHTML標籤，無兼容性；

4. link方式的央視的權重高於@import的權重；

9.HTML文件中如何引用其餘文件？有幾種方式？

解答：此處以引用CSS文件爲例：

內聯方式; (給特定的元素添加CSS樣式,如：<p style=」width:100px; height:100px」>hello world!</p>)
使用style標籤(添加在head部分), 如：<style>.box{background:red;}</style>
採用外部連接方式(引用外部文件), 如：<link rel=」stylesheet」 hreg=」style.css」>
使用@import方式引用;

10.對標籤語義化的理解？

解答：

1.html語義化就是讓頁面的內容結構化，便於瀏覽器、搜索引擎解析；

2.在沒有樣式CSS狀況下也以一種文檔格式顯示，而且容易閱讀；

3.搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於SEO;

4.便於代碼的閱讀和維護;

11.HTML中title與Alt屬性的區別?

解答：

首先來看下title，在HTML中title有兩個做用。Title使用在<head>中起到網頁主題的含義；另外一處使用在<img/>標籤中，其做用是當鼠標懸停在圖片上時，起到提示做用。對於Alt屬性，當圖片加載不出來時所顯示的圖片信息，它是直接顯示在圖片加載的地方。

12.列舉HTML中至少4個實體?

解答： & < > ×(小三角)

13.」get」和」post」的區別?

解答：這裏的get和post 的區別在面試的過程當中每每指的是WEB中的get和post。(須要注意的是web中的get和post只是http中get/post的子集) web中的get和post都是往服務器上發送數據，get是將數據拼接在URL上(有必要時須要encode),而post是將數據封裝在request body中，發送過去；get請求是安全和冪等的(如何解釋？也就是不管你請求多少次，服務器端的數據是不會發生改變的，」冪等的」就是不管get多少次，其服務器上的資源狀態都是不變的)；post相對於get是」安全的」；get請求發送數據更小(http協議中的get和post並無對發送數據大小限制,對發送數據大小產生限制的是瀏覽器以及操做系統、服務器)；

Get能被緩存，post不能被緩存。想更深刻的瞭解請查看

回答面試官：1. Get使用URL或Cookies傳參，而post將數據放在body中；

Get的URL會有長度上的限制(IE8- URL長度限制爲2083字節)，post的數據能夠很是大；
Post比get安全，由於數據在地址欄上不可見；

14.HTML5和HTML4相比有什麼區別? 如何區分它們? HTML5添加了哪些特性? 刪除了哪些元素? 如何處理HTML5瀏覽器的兼容性問題?

解答：HTML5與HTML4的區別：

1. HTML5任然是一個定製中的標準;

2.簡單的語法(<!Doctype html> HTML5兼容HTML4和XHTML1,但不兼容SGML);

3.新的canvas取代flash;

4.新的<header>和<footer>標記;

5.新的<section>和<article>標記;

6.新的<menu>和<figure>標記;

7.新的<audio>和<video>標記;

8.全新的表單屬性;

9.再也不使用<b>和<font>;

10.再也不使用<frame><center><big>;

HTML5新特性：

1.用於繪畫的canvas元素;

2.用於媒介回放的video和audio元素;

3.對本地離線存儲更好的支持;

4.新增結構元素：header article aside footer nav section;

5.新增表單控件：date time number tel email url search等;

刪除元素：

<big> <b> <frame> <frameset>等;

HTML5的兼容性問題處理：

網站提供 can I use? 查相關的HTML5新功能對瀏覽器的支持度；

15.請談一下cookies,sessionStorage和localstorage的區別?

解答：相同點：都保存在瀏覽器端，且都是同源的；

不一樣點：1.cookies在瀏覽器與服務器間來回傳遞，而sessionStorage和localStorage 不會把數據自動上傳到服務器上，僅在本地儲存；

2.存儲大小限制不一樣，cookies帶寬不超過4k（每次http請求都會攜帶 cookies）,因此只能存儲小的數據，如會話標識。相反後二者雖然也有限制，但能夠達到5M或者更大；

3.數據有效期不一樣。sessionStorage：僅在當前瀏覽器關閉以前有效； localStorage：永久有效，不管是否關閉瀏覽器；cookies：只有在設置cookies 時間過時以前纔有效，不管瀏覽器是否關閉。

4.web storage 的API接口更加方便；

16.簡述一下src與href的區別?

解答：src是引入文件（替換當前元素），用在link、iframe、script上；

Href是連接跳轉（在當前元素與引用資源之間創建聯繫），用在link、a上。

17.網頁製做的過程當中用到的圖片格式有哪些?

解答：

1.png-8 體積會更小支持全透明

2.Png-24 相對於png-8來講保存格式質量更高

3.Jpeg/jpg 顯示的顏色更多壓縮/修改圖片會失真

4.Svg 可伸縮不失真

5.Gif 支持半透明支持動畫

6.Webp 新的圖像(有損)壓縮格式相對於jpeg體積縮小40%

18.strong與em的區別?

解答：都有強調的意思在裏面，前者語氣更甚；

19.datalist的用法

解答：<input id=」mycar」 list=」cars」 />

</datalist>

注意：<datalist>是HTML5新標籤，除了IE和Safari不支持外其餘的瀏覽器均支持。

<二>CSS和CSS3

1.CSS選擇器有哪幾種? 哪些屬性能夠繼承? 優先級算法如何計算? CSS3新增僞類有哪些?

解答：CSS及CSS3新增選擇器種類：

1.ID選擇器；

2.標籤選擇器；

3.CLASS選擇器；

4.屬性選擇器；

5.CSS3新增屬性選擇器：[selector *= value] [selector ^= value] [selector $= value]

6.結構爲類選擇器：僞類選擇器(first-line; first-letter; before; after; not; empty; target)；

僞元素選擇器(first-child; last-child; nth-child;nth-of-type;only-child)；

7.UI元素狀態僞類選擇器：CSS3經常使用的總共有17中，example, E:hover E:active E:focus E:disabled E:read-only

能夠繼承的(父類設置了某種屬性,子類繼承了它的屬性)屬性有：

1.全部元素可繼承：visibility和cursor

2.內聯元素可繼承：letter-spacing word-spacing white-space line-height color font

Text-decoration text-transform

3.塊狀元素可繼承：text-indent text-align

4.列表元素可繼承：list-style list-type-position list-style-type list-style-image

5.表格元素可繼承：border-collaspase

優先級算法：

!important(最高)---->ID選擇器---->class類選擇器---->屬性選擇器---->*通配符選擇器

CSS3新增僞類：

答案見第一問！！！

2.CSS盒模型?

解答：CSS盒模型大體能夠分爲兩種：IE盒模型和標準W3C盒模型

IE盒模型：

IE盒模型的範圍包含：margin border padding content，不一樣於標準W3C盒模型的是：IE盒模型的content包含了border和padding；

外盒模型

元素空間寬度 = content width + margin的寬度

元素空間高度 = content height + margin的高度

內盒模型

　　元素寬度 = content width

　元素高度 = content height

注意：1.當IE6~8處於怪異模式下就會使用IE盒子模型，不然將使用W3C標準盒子模型；

2.box-sizing:content-box;/border-box;/inherit;

標準W3C盒模型：

標準W3C盒模型的範圍包括：margin border padding content，而且content的部分不包含其餘部分。

外盒模型

元素空間寬度 = content width + padding + border + margin的寬度

元素空間高度 = content width + padding + border + margin的高度

內盒模型

　　元素寬度 = content height + padding + border的寬度

元素高度 = content height + padding + border的高度

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。