前端程序員面試分類真題4簡答題1.

iframe元素有哪些缺點?正確答案：iframe元素主要有4個方面的缺點。

(1)瀏覽器對同一域名的并發請求數是有限制的。iframe中的文檔(即子文檔（江南博哥）)與父文檔會共享連接，當并發請求數達到上限值時，子文檔中的資源只能等待，直到前面的通信完成。

(2)阻塞父窗口的load事件。

(3)腳本的執行是同步和阻塞的，將script元素放置于iframe之前，同樣也會阻塞iframe中資源的請求。

(4)制造點擊劫持(ClickJacking)，將一個不可見的iframe或包含用戶感興趣內容的iframe覆蓋在文檔的某個位置上，誘使用戶點擊iframe中的內容。[考點]HTML元素iframe

2.

HTML5新增了幾個多媒體元素，請列舉使用這些元素的優勢。正確答案：使用多媒體元素有以下4個方面的優勢。

(1)支持移動設備，可為智能手機、平板電腦或其他移動設備提供豐富的觀看體驗。

(2)易于定制效果，使用傳統的CSS就能為多媒體元素設計個性化的視覺體驗，例如漸變、陰影、遮罩和動畫等。

(3)輕松實現響應式設計，能在不同媒體(如計算機顯示器、移動設備和輔助設備等)中渲染合適的樣式，呈現最優的界面。

(4)語義化的元素，可提供明確的含義，提升文檔的可訪問性，便于閱讀與理解。[考點]多媒體和繪圖

3.

除了video和audio元素，HTML5還支持哪些多媒體元素?正確答案：HTML5還支持embed和track元素。embed元素用于嵌入外部資源，例如SVG矢量圖形、應用程序或插件等。track元素是audio和video的子元素，為多媒體文件添加輔助文本信息，例如字幕、屏幕閱讀器說明和主題等。在Chrome瀏覽器中，可用WebVTT(網絡視頻文本軌道)文件和track元素結合(如以下代碼所示)，給媒體資源添加可同步顯示的字幕，效果如下圖所示。

＜video＞

＜sourcesrc="video/piano.webm"type="video/webm"/＞

＜trackkind="subtitles"src="video/piano.vtt"label="中文"srclang="zh"default/＞

＜/video＞

帶字幕的視頻[考點]多媒體和繪圖

4.

請簡單描述一下canvas元素。正確答案：canvas是HTML5新增的元素，該元素能創建一個固定大小的畫布，在畫布中可以繪制或處理要展示的內容(例如圖像、文本等)，以下是它的特征和功能。

(1)只能通過JavaScript腳本來繪制圖形，例如矩形、圓等。

(2)如果要為圖形設置CSS樣式、文本或動畫，那么也得通過JavaScript來實現。

(3)canvas元素有很強的圖像操作能力，不僅能實現圖像的合成與裁剪，還能修改圖像的像素數據，實現濾鏡的一些效果(例如浮雕、模糊和黑白等)。

(4)如果在畫布中繪制一個按鈕，不能直接為這個按鈕添加DOM事件(例如點擊、聚焦等)。[考點]多媒體和繪圖

5.

什么是SVG?正確答案：SVG(ScalableVectorGraphics)即可伸縮矢量圖形，是一種用XML描述圖形的標記語言，早在2003年就已成為W3C標準。與畫布(Canvas)只能用JavaScript繪圖不同，SVG提供了各種類型的元素，包括形狀、文本、漸變、動畫和濾鏡等，并且可以為每個元素附加DOM事件，還能用CSS控制它們的樣式，不過只能使用部分CSS屬性，像border、background就不可用。SVG中也可插入圖像(即插入img元素)，執行裁剪、遮罩、旋轉等功能。不過，SVG不能像Canvas那樣，將處理過的圖形輸出，canvas元素有個toDataURL()方法，可以將畫布中的內容編碼成字符串形式。[考點]多媒體和繪圖

6.

用canvas元素畫一個藍底白字的矩形按鈕，如下圖所示。

按鈕正確答案：在HTML文檔中先定義一個canvas元素，并且將畫布的寬和高分別設置為200px和100px，再用腳本繪制按鈕，具體如以下代碼所示。

＜canvasid="btnCanvas"width="200"height="100"＞

＜p＞這是一個按鈕,用于啟動游戲＜/p＞

＜/canvas＞

＜script＞

varcanvas=document.getElementById("btnCanvas"),

ctx=canvas.getContext("2d");

ctx.fillStyle="#007ab9";

//矩形背景色

ctx.fillRect(0,0,canvas.width,canvas.height);

//繪制矩形

ctx.font="40pxserif";

//字體設置

ctx.fillStyle="#FFF";

//字體顏色

ctx.fillText("游戲開始",20,60);

//繪制文本

＜/script＞[考點]多媒體和繪圖

7.

localStorage和sessionStorage有哪些異同?正確答案：localStorage是指本地存儲，sessionStorage是指會話存儲。它們都不會作為請求報文中的額外信息傳遞給服務器，并且存儲容量也相同，但在使用的時候略有不同。本地存儲永遠不會過期，即使瀏覽器關閉，也還會存在，同源的本地存儲可以共享。而會話存儲只能應用于頁面會話期間，當關閉頁面或瀏覽器的時候，會話存儲中的數據將會被自動清除。[考點]數據存儲

8.

用什么方法可以防止Cookie被盜取?正確答案：Cookie是先由瀏覽器向服務器發起請求，再由服務器響應后回傳Set-Cookie首部(此時可設置HttpOnly屬性)并向客戶端瀏覽器寫入Cookie。在給Cookie設置HttpOnly屬性后，就能夠禁止頁面的JavaScript訪問這個Cookie，從而避免被盜取。[考點]數據存儲

9.

CSS指的是什么?正確答案：CSS(CascadingStyleSheets)即層疊樣式表，它是一種樣式語言，用于控制頁面的表現(外觀和內容排版)。它對HTML來說是一種有效的補充，利用CSS，可以創建各種規則，應用到所有的HTML元素。[考點]CSS與CSS3

10.

什么叫漸進增強?它和優雅降級有哪些區別?正確答案：漸進增強(ProgressiveEnhancement)并不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人看到的網頁、感受到的體驗都一致的網站是幾乎不可能的。但還是得確保網站的可訪問性，保證用戶在任何環境下，都能正常訪問核心內容或使用基本功能(避免頁面打不開、排版錯亂等)，并為他們提供當前條件下最好的體驗，這是漸進增強的核心思想。

優雅降級(GracefulDegradation)也是一種設計思想，保證在高版本瀏覽器中提供最好的體驗，遇到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。兩種思想的區別如下所列。

(1)漸進增強是向上兼容，優雅降級是向下兼容。

(2)漸進增強是從簡單到復雜，優雅降級是從復雜到簡單。

(3)漸進增強關注的是內容，優雅降級關注的是瀏覽體驗。[考點]CSS與CSS3

11.

請談談你對CSSHack的理解。正確答案：CSSHack是一種編程技巧，它讓CSS代碼能兼容各個瀏覽器，盡量讓頁面取得想要的效果，避免出現錯誤的布局。不同廠商的瀏覽器(例如Chrome、Firefox等)或相同廠商不同版本的瀏覽器(例如IE6、IE7等)對CSS的解析能力有差異，并且各自還會存在特有的BUG，CSSHack就會利用這些特點來執行或忽略相應的CSS樣式。雖然CSSHack能提升兼容性，但還是盡量少用，這是因為每次都要多寫幾段額外的兼容樣式，這帶來了巨大的維護成本，并且在瀏覽器升級后，瀏覽器支持了更多的CSS特性或修正了BUG，原先的寫法可能就會失效。[考點]CSS與CSS3

12.

什么是盒模型?正確答案：盒模型(boxmodel，也稱為框模型)就是從盒子頂部俯視所得的一張平面圖，用于描述元素所占用的空間。有兩種盒模型，W3C盒模型和IE盒模型(IE6以下，不包含IE6以及怪異模式下的IE5.5+)，兩者不同之處是對元素尺寸的計算方式。當用CSS給某個元素定義寬或高的時候，IE盒模型中內容的寬或高將會包含內邊距和邊框，而W3C盒模型并不會包含。[考點]視覺格式模型

13.

什么是外邊距塌陷?當出現外邊距塌陷時，外邊距之間的計算方式是怎樣的?正確答案：外邊距塌陷(margincollapsing)也稱為外邊距合并，是指兩個在正常流中相鄰(兄弟或父子關系)的塊級元素的外邊距，組合在一起變成單個外邊距。不過只有上下外邊距才會有塌陷，左右外邊距不會出現這種問題。

元素的外邊距可以用正數或負數來指定，使用不同的組合會改變外邊距的計算方式，總共有3種組合方式，如下所列：

(1)兩個都是正數，取較大的值。

(2)兩個都是負數，取絕對值較大的值。

(3)一正一負，取兩個值相加的和。[考點]視覺格式模型

14.

為span元素定義下面的CSS樣式后，元素的寬和高是如何計算的?

span{

border:1pxsolid#000;

margin:10px0;

padding:10px0;

width:300px;

height:100px;

}正確答案：span是一個行內元素，它的盒類型默認是inline。行內元素不能定義width和height屬性，它的寬度和高度都由其內容和邊框決定。行內元素也不能定義上下外邊距(margin)和上下內邊距(padding)。雖然定義上下padding后，能使得元素變高，但元素占據的空間并沒有改變。下面用代碼解釋行內元素的這個特點，效果如下圖所示，在設置上下內邊距(padding)后，行內元素與相鄰的塊級元素重疊在了一起。

＜div＞塊級元素＜/div＞

＜span＞行內元素＜/span＞

塊級元素和行內元素[考點]視覺格式模型

15.

將元素的display屬性設為inline-block后，能把多個這樣的元素排列在一行中，但元素之間會有間隙(如下圖所示)，如何才能去除間隙?

行內元素之間的間隙正確答案：之所以有間隙是因為在編寫HTML文檔的時候，為了便于閱讀，通常會將結構格式化(如以下代碼所示)，格式化后的文檔不但會包含換行符，而且還會包含空白符。瀏覽器會將這些額外的字符合并成一個空白符。

＜div＞

＜spanstyle="display:inline-block"＞行內塊元素＜/span＞

＜spanstyle="display:inline-block"＞行內塊元素＜/span＞

＜spanstyle="display:inline-block"＞行內塊元素＜/span＞

＜/div＞

既然間隙是由這個多余的空白符造成的，那么只要去除了這個字符，就能解決間隙的問題，解決方法如下所列。

(1)在父元素div中定義CSS屬性font-size為0。

(2)將3個span元素寫在一行中。

(3)給父元素div定義負的CSS屬性letter-spacing，減小字符之間的間距，再將span元素中的letter-spacing定義為0，清除間距。[考點]視覺格式模型

16.

display:none與visibility:hidden都可隱藏元素，有什么區別?正確答案：將CSS屬性display定義為none后，相當于元素沒有了后代元素，在正常流中不占用任何空間，元素的真實尺寸將會丟失，還會導致瀏覽器的重排(reflow)和重繪(repaint)。而將CSS屬性visibility定義為hidden后，在正常流中還是會占用空間，仍具有元素的真實尺寸，只會導致瀏覽器重繪。[考點]視覺格式模型

17.

請談談對BFC的理解。正確答案：BFC(BlockFormattingContext)即塊格式化上下文，它既不是一個CSS屬性，也不是一段代碼，而是CSS2.1規范中的一個概念，決定元素的內容如何渲染以及與其他元素的關系和交互。BFC有5條規則，具體如下所列。

(1)BFC有隔離作用，內部元素不會受外部元素的影響(反之亦然)。

(2)一個元素只能存在于一個BFC中，如果能同時存在于兩個BFC中，那么就違反了BFC的隔離規則。

(3)BFC內的元素按正常流排列，元素之間的間隙由元素的外邊距(margin)控制。

(4)BFC中的內容不會與外面的浮動元素重疊。

(5)計算BFC的高度，需要包括BFC內浮動子元素的高度。[考點]視覺格式模型

18.

什么是hasLayout?觸發hasLayout后會帶來什么樣的后果?正確答案：hasLayout是微軟的一個私有概念，它類似于BFC，能夠運行在早期的IE6和IE7中，但在IE8及之后的IE版本中已經被拋棄。在早期的IE瀏覽器中，元素會被分為擁有布局(haslayout)和沒有布局，擁有布局的元素可以控制自己內容的尺寸和位置，而沒有布局的元素需要由最近的擁有布局的祖先元素代勞。IE6中的很多BUG都是由于元素沒有布局所引起的，例如浮動元素會引起雙倍外邊距(即10px的外邊距會變成20px)?？梢酝ㄟ^定義特定的CSS屬性來觸發hasLayout，使得這個元素擁有布局。下面所列的是能觸發hasLayout的情況：

(1)float屬性為left或right。

(2)position屬性為absolute。

(3)值不是auto的width或height屬性。

(4)值不是normal的zoom屬性。

hasLayout除了能修復IE的BUG，還能像BFC一樣，清除浮動、解決外邊距塌陷問題。[考點]視覺格式模型

19.

CSS中類選擇器和ID選擇器有哪些區別?正確答案：類選擇器和ID選擇器主要有以下4個方面的區別：

(1)類選擇器