前端面試面試官會問的問題以及答案

時間 2019-12-08

原文原文鏈接

[HTML && CSS]

1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

瀏覽器根據DOCTYPE是否存在以及使用的哪一種DTD來選擇要使用的呈現方法。若是XHTML文檔包含形經常致使頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也致使頁面以標準模式呈現，可是有過渡DTD而沒有URI會致使頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會致使HTML和XHTML文檔以混雜模式呈現。javascript

根據DOCTYPE是否存在選擇呈現模式，被稱爲DOCTYPE切換或DOCTYPE偵測。並不是全部瀏覽器都採用這些規則，可是這些規則很好地說明了DOCTYPE切換的工做方式。要了解更全面的內容，可查閱網站http://hsivonen.iki.fi/doctype/，這裏的圖表說明了不一樣瀏覽器如何根據DOCTYPE聲明來選擇呈現方法。php

DOCTYPE切換是瀏覽器用來區分遺留文檔和符合標準的文檔的手段。不管是否編寫了有效的CSS，若是選擇了錯誤的DOCTYPE，那麼頁面就將以混雜模式呈現，其行爲就可能會有錯誤或不可預測。所以，必定要在站點的每一個頁面上包含形式完整的DOCTYPE聲明，而且在使用HTML時選擇嚴格的DTD。css

注意：<!DOCTYPE html PUBLIC……>的組成解釋可查閱http://my.oschina.net/u/1040928/blog/169779html

2.行內元素有哪些？塊級元素有哪些？CSS的盒模型？

內聯：a(錨點超連接)，abbr （縮寫）， acronym （首字），b（粗體），big（大致字）前端

br（換行），em（強調），font（字體），i(斜體)，img（圖片），input(輸入框)，label（表格標籤），s（中劃線）html5

Select（項目選項），small（小字體文本），span（內聯容器），strike（中劃線），strong（粗體增強），sub(下標)java

Sup（上標） textarea（多行文本輸入框），tt（電傳文本）,u（下劃線），var（定義變量）塊級：e address(地址)，blockquote（塊引用），dir（目錄列表），div （經常使用塊級元素），dl（定義列表）程序員

，fieldset-form（控制組）form （交互表單），h1~h6（1-6級標題），hr（水平線），menu（菜單列表），ol（有序列表）web

。 Ul（無序列表），p（段落），table（表格），pre（格式化文本），noscript（可選腳本內容---不支持script的瀏覽器用的）ajax

盒子自己的大小是這樣計算的：

Width	width + padding-left + padding-right + border-left + border-right
Height	height + padding-top + padding-bottom + border-top + border-bottom

3.CSS引入的方式有哪些? link和@import 的區別是?

引入方式：內聯，嵌入，外接（link、@import ）

本質上，這兩種方式都是爲了加載CSS文件，但仍是存在着細微的差異。
差異1：老祖宗的差異。link屬於XHTML標籤，而@import 徹底是CSS提供的一種方式。
link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import 就只能加載CSS了。
差異2：加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import 引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import 加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯（夢之都加載CSS的方式就是使用@import ，我一邊下載一邊瀏覽夢之都網頁時，就會出現上述問題）。
差異3：兼容性的差異。因爲@import 是CSS2.1提出的因此老的瀏覽器不支持，@import 只有在IE5以上的才能識別，而link標籤無此問題。
差異4：使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import 不是dom能夠控制的。
差異5：@import 能夠在css中再次引入其餘樣式表，好比能夠建立一個主樣式表，在主樣式表中再引入其餘的樣式表，

4.CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

HTML selector 標籤選擇符

　　HTML selector就是HTML的標籤，如：DIV，TD，P，H1等等，如你用 CSS 定義了它們，在CSS文章所控制的頁面中這個標籤的性質就按照你的定義來顯示。

　　好比咱們想叫H1的顏色是紅的，則：H1 {color: red}。這裏咱們學習一個CSS的特色，它可定義好幾個 selector在一個rule裏。如：H1, H2, TD {color: red}。這個定義就能讓全部的 H1, H2, 和 TD 的顏色都爲紅色。在具體使用中，能夠將幾個設置相同的屬於合併起來編寫，減少咱們的代碼。

　　Class selector 類選擇符

　　Class selector有兩種，一種叫相關 class selector，它跟一個 HTML 的標籤有關係它的語法是tag.Classname {property:value}。如：咱們想設置一些而不是所有 H1 的顏色是紅的 H1.redone {color: red}則：第一個 H1 是紅色的，而第二個就不是了　第二種是獨立class selector。它可被任何 HTML標籤所應用。它的語法以下 .Classname {property:value}假如咱們有下面這個定義.blueone {color: blue}那麼咱們能夠把他應用到不一樣的標籤中去。很是明顯class selector 給了咱們更多的自由與發揮的空間。

　　ID selector ID選擇符

　　ID selector 其實跟獨立 class selector 的功能很類似。而區別在於它們的語法和用法不一樣，以及對於 javascript 操縱 HTML元素有幫助。咱們在佈局中，對不一樣的結構區域的定義，每每用ID選擇符。

　　它的語法以下#IDname {property:value}。假如咱們有下面的定義#yelowone {color: yellow}。咱們能夠運用這個定義到任何的有一樣 ID 名字的標籤，如：text here你可能以爲既然 ID selector 和獨立 class selector 功能同樣，爲何二者都存在呢？有 ID 的 HTML元素能夠被JavaScript來操縱。

Class 可繼承

僞類A標籤能夠繼承

列表 UL LI DL DD DT 可繼承

優先級就近原則，樣式定義最近者爲準

載入樣式以最後載入的定位爲準

優先級爲

!important > [ id > class > tag ]

Important 比內聯優先級高

優先級算法：
1. 行內樣式優先級Specificity值爲1,0,0,0，高於外部定義。
如：<div style=」color: red」>sjweb</div>
外部定義指經由<link>或<style>標籤訂義的規則；
2.!important聲明的Specificity值最高；
3.Specificity值同樣的狀況下，按CSS代碼中出現的順序決定，後者CSS樣式居上；
4.由繼續而獲得的樣式沒有specificity的計算，它低於一切其餘規則(好比全局選擇符*定義的規則)。

實例分析：
1.div { font-size:12px;}
分析：
1個元素{ div}，Specificity值爲0,0,0,1

2.body div p{color: green;}
分析：
3個元素{ body div p }，Specificity值爲0,0,0,3

3.div .sjweb{ font-size:12px;}
分析：
1個元素{ div }，Specificity值爲0,0,0,1
1個類選擇符{.sjweb}，Specificity值爲0,0,1, 0
最終：Specificity值爲 0,0,1,1
4.Div # sjweb { font-size:12px;}
分析：
1個元素{ div }，Specificity值爲0,0,0,1
1個類選擇符{.sjweb}，Specificity值爲0,1,0, 0
最終：Specificity值爲 0,1,0,1
5.html > body div [id=」totals」] ul li > p {color:red;}
分析：
6個元素{ html body div ul li p}  Specificity值爲0,0,0,6
1個屬性選擇符{ [id=」totals」] }      Specificity值爲0,0,1,0
2個其餘選擇符{ >  > }            Specificity值爲0,0,0,0
最終：Specificity值爲 0,0,1,6
!important 的優先級最高

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

① 網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」

② 網頁的表示層（presentation layer）由 CSS 負責建立。 CSS 對「如何顯示有關內容」的問題作出了回答。

③ 網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM 主宰的領域。

6:css的基本語句構成是？

選擇器{屬性1:值1;屬性2:值2;……}

7.你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些？怎麼會出現？解決方法是什麼？

1，使用Trident的是internet explorer，國產的絕大部分瀏覽器。Trident是就是ie內核
2，使用Gecko的是Mozilla Firefox，使用 Gecko 內核的瀏覽器也有很多，如 Netscape MozillaSuite/SeaMonkey 等
3，使用Presto的是opera，這是目前公認網頁瀏覽速度最快的瀏覽器內核
4，使用WebKit的有蘋果的safari，谷歌的chrome，還有國產的大部分雙核瀏覽器其中一核就是WebKit

瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣

問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。

碰到頻率:100%

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

備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最多見的瀏覽器兼容問題）

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

備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

瀏覽器兼容問題三：設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

碰到頻率：60%

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距

碰到概率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

瀏覽器兼容問題五：圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

碰到概率：20%

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏碰到概率：5%

解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

瀏覽器兼容問題七：透明度的兼容CSS設置

作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題。

1 /* CSS hack*/

我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）

◆IE6認識的hacker 是下劃線_ 和星號 *

◆IE7 遨遊認識的hacker是星號 *

好比這樣一個CSS設置：

2 height:300px;*height:200px;_height:100px;

IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt，因此當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,因此他又會覆蓋掉200px高的設置，把高度設置爲100px；

IE7和遨遊也是同樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。因此它們會把高度解析爲200px，剩下的瀏覽器只認識第一個height:300px;因此他們會把高度解析爲300px。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

8.如何居中一個浮動元素?

width:500px; height:300px; float:left; margin-left:50%; position:relative; left:-250px;

background-color:#CCC;

首先設置塊元素的寬度和高度，這裏寬度是必須的，高度能夠不設，我設置了塊的背景色，以給你們看效果。實現居中關鍵在於 margin-left:50%; position:relative; left:-250px;

9.有沒有關注HTML5和CSS3?若有請簡單說一些您對它們的瞭解狀況！

10.你怎麼來實現下面這個設計圖,主要講述思路（效果圖省略）

11.若是讓你來製做一個訪問量很高的大型網站，你會如何來管理全部CSS文件、JS與圖片？

先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等

編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

頁面進行標註（例如頁面模塊開始和結束）；

CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）

JS 分文件夾存放命民以該JS 功能爲準英文翻譯；

圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理，使用圖片精靈講一些圖片合成、

12.你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端開發工程師是Web前端開發工程師的簡稱，是近五年才真正開始受到重視的一個新興職業。Web前端開發技術是一個先易後難的過程，主要包括三個要素：HTML、CSS和JavaScript，這就要求前端開發工程師不只要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，並且要學會運用各類工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

1.掌握各類修圖軟件，如PS\AI，不要求專業設計師水平，但要會用會改，今天是一專多能的時代，光會編程討很差飯碗的。

2.掌握FLASH，能製做出動態flash相冊，會Flash AS3.0編程。

3.精通JavaScript、jQuery、ExtJS等頁面效果框架，這是前端工程師的最核心技能，是專作頁面效果的技術。其實精通了JavaScript，後端編程語言，如.NET、PHP、Ruby都很容易掌握，由於其原理是同樣的

4.精通一二種模板語言，並能修改，如織夢或wordpress的模板

5.掌握thinkphp與zend框架，能修改此類開源源碼

6.掌握html5與sencha，這是作手機等移動設備的頁面前端技術

7.掌握一二種後端編程語言，如PHP、.NET、JAVA，能讀懂後端源碼，實際上其原理跟JS差很少

[Javascript]

1：js是什麼，js和html 的開發如何結合？
2.怎樣添加、移除、移動、複製、建立和查找節點

（1）建立新節點

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

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

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

（2）添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（3）查找

getElementsByTagName() //經過標籤名稱

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

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

3.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差異

在瀏覽器解析事件的時候，有兩種觸發方式，一種叫作Bubbling(冒泡)，另一種叫作Capturing(捕獲)。由上圖能夠看出來，冒泡的方式效果就是當一個DOM元素的某事件例如click事件被fire時，依次它的父元素的click事件也被fire(觸發)，一直傳遞到最頂層的body元素爲止。而捕獲的觸發方式正好相反，當某個元素的click事件被觸發時，先從最頂層的body元素click事件被觸發開始，一直傳遞到真正被觸發的元素爲止。

****************************************************************************

此次我將討論W3C的標準DOM事件模型和IE獨立門戶的DOM事件模型到底有多少區別，首先咱們能夠回想一下目前大多數Js程序員習慣如何綁定事件到DOM元素上，最多見的就是obj.onclick=handler這種方式(更惡劣的是在Html代碼的元素標籤中直接加上onclick屬性，徹底沒達到視圖和動做分開的原則)。咱們暫時稱這種方式的事件添加爲Traditional(傳統方式)吧，IE有本身的IE Event Module，而火狐等瀏覽器則遵循的W3C方式的Event Module，下面看看這三者各自的優缺點在哪裏——

一、 Traditional Module

傳統方式的事件模型即直接在DOM元素上綁定事件處理器，例如—

window.onload=function(){…}

obj.onmouseover=function(e){…}

obj.onclick=function(){…}

首先這種方式是不管在IE仍是Firefox等其餘瀏覽器上均可以成功運行的通用方式。這即是它最大的優點了，並且在Event處理函數內部的this變量無一例外的都只想被綁定的DOM元素，這使得Js程序員能夠大大利用this關鍵字作不少事情。

至於它的缺點也很明顯，就是傳統方式只支持Bubbling，而不支持Capturing，而且一次只能綁定一個事件處理器在DOM元素上，沒法實現多Handler綁定。最後就是function參數中的event參數只對非IE瀏覽器有效果(由於IE瀏覽器有特製的window.event)。

二、 W3C (Firefox.e.g) Event Module

Firefox等瀏覽器很堅定的遵循W3C標準來制定瀏覽器事件模型，使用addEventListener和removeEventListener兩個函數，看幾個例子—

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

addEventListener帶有三個參數，第一個參數是事件類型，就是咱們熟知的那些事件名字去掉前面的’on’，第二個參數是處理函數，能夠直接給函數字面量或者函數名，第三個參數是boolean值，表示事件是否支持Capturing。

W3C的事件模型優勢是Bubbling和Capturing都支持，而且能夠在一個DOM元素上綁定多個事件處理器，各自並不會衝突。而且在處理函數內部，this關鍵字仍然可使用只想被綁定的DOM元素。另外function參數列表的第一個位置(無論是否顯示調用)，都永遠是event對象的引用。

至於它的缺點，很不幸的就只有在市場份額最大的IE瀏覽器下不可以使用這一點。

三、 IE Event Module

IE本身的事件模型跟W3C的相似，但主要是經過attachEvent和detachEvent兩個函數來實現的。依舊看幾個例子吧—

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

能夠發現它跟W3C的區別是沒有第三個參數，並且第一個表示事件類型的參數也必須把’on’給加上。這種方式的優勢就是能綁定多個事件處理函數在同一個DOM元素上。

至於它的缺點，爲何現在在實際開發中不多見呢？首先IE瀏覽器自己只支持Bubbling不支持Capturing；並且在事件處理的function內部this關鍵字也沒法使用，由於this永遠都只想window object這個全局對象。要想獲得event對象必須經過window.event方式，最後一點，在別的瀏覽器中，它顯然是沒法工做的。

最後我在推薦兩個必須知道的IE和W3C標準的區別用法吧—

一、當咱們須要阻止瀏覽器某DOM元素的默認行爲的時候在W3C下調用e.preventDefault()，而在IE下則經過window.event.returnValue＝false來實現。

二、當咱們要阻止事件冒泡的時候，在W3C標準裏調用e.stopPropagation()，而在IE下經過設置window.event.cancelBubble=true來實現。

4.面向對象編程:b怎麼繼承a

一、每一個函數都包含兩個非繼承而來的方法：apply()和call()。
二、他們的用途相同，都是在特定的做用域中調用函數。
三、接收參數方面不一樣，apply()接收兩個參數，一個是函數運行的做用域(this)，另外一個是參數數組。
call()方法第一個參數與apply()方法相同，但傳遞給函數的參數必須列舉出來。

四、bind()方法　　支持此方法的瀏覽器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它是屬於ECMAScript5的方法。直接看例子：