久久99精品久久久久久琪琪,久久人人爽人人爽人人片亞洲,熟妇人妻无码中文字幕,亚洲精品无码久久久久久久

2017年前端開發面試題(含答案)5篇

時間:2019-05-14 20:30:51下載本文作者:會員上傳
簡介:寫寫幫文庫小編為你整理了多篇相關的《2017年前端開發面試題(含答案)》,但愿對你工作學習有幫助,當然你在寫寫幫文庫還可以找到更多《2017年前端開發面試題(含答案)》。

第一篇:2017年前端開發面試題(含答案)

XX公司

產品部-前端面試題-答案

產品部 Beijing

2015前端面試題2015-02 前端開發面試知識點大綱:

HTML&CSS:

對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:布局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應 JavaScript:

數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。其他:

HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯

作為一名前端工程師,無論工作年頭長短都應該必須掌握的知識點:

1、DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。

2、DOM操作

——如何添加、移除、移動、復制、創建和查找節點等。

3、事件

—— 如何使用事件,以及IE和標準DOM事件模型之間存在的差別。

4、XMLHttpRequest —— 這是什么、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

5、嚴格模式與混雜模式 —— 如何觸發這兩種模式,區分它們有何意義。

6、盒模型 —— 外邊距、內邊距和邊框之間的關系,及IE8以下版本的瀏覽器中的盒模型

7、塊級元素與行內元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

8、浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。

9、HTML與XHTML——二者有什么區別,你覺得應該使用哪一個并說出理由。

10、JSON —— 作用、用途、設計結構。/ 28

2015前端面試題

2015-02 HTML

一、Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?(1)、 聲明位于文檔中的最前面,處于 標簽之前。告知瀏覽器的解析器,用什么文檔類型 規范來解析這個文檔。

(2)、嚴格模式的排版和 JS 運作模式是

以該瀏覽器支持的最高標準運行。

(3)、在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。(4)、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

二、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

(1)CSS規范規定,每個元素都有display屬性,確定該元素的類型,每個元素都有默認的display值,比如div默認display屬性值為“block”,成為“塊級”元素;span默認display屬性值為“inline”,是“行內”元素。

(2)行內元素有:a b span img input select strong(強調的語氣)塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4…p(3)知名的空元素:


鮮為人知的是:

三、link 和@import 的區別是?

(1)link屬于XHTML標簽,而@import是CSS提供的;(2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;(3)import只在IE5以上才能識別,而link是XHTML標簽,無兼容問題;(4)link方式的樣式的權重 高于@import的權重.四、瀏覽器的內核分別是什么? * IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內核原為Presto,現為Blink; / 28

2015前端面試題2015-02

五、常見兼容性問題?

* png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。* IE6雙邊距bug:塊屬性標簽float后,又有橫行的margin情況下,在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{ float:left;width:10px;margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離,解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)漸進識別的方式,從總體中逐漸排除局部。

首先,巧妙的使用“9”這一標記,將IE游覽器從所有情況中分離出來。接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。

css

.bb{

background-color:#f1ee18;/*所有識別*/

.background-color:#00deff9;/*IE6、7、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

}

* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.解決方法:統一通過getAttribute()獲取自定義屬性.* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.* 解決方法:(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。/ 28

2015前端面試題

2015-02 * Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性-webkit-text-size-adjust: none;解決.超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

六、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

* HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。* 繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;

sessionStorage 的數據在瀏覽器關閉后自動刪除

語意化更好的內容元素,比如 article、footer、header、nav、section

表單控件,calendar、date、time、email、url、search

新的技術webworker, websockt, Geolocation * 移除的元素-純表現的元素:basefont,big,center,font, s,strike,tt,u; 對可用性產生負面影響的元素:frame,frameset,noframes;

七、支持HTML5新標簽:

* IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽后,還需要添加標簽默認的樣式:

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

八、如何區分: DOCTYPE聲明新增的結構元素功能元素,語義化的理解?

用正確的標簽做正確的事情!

html語義化就是讓頁面的內容結構化,便于對瀏覽器、搜索引擎解析; 在沒有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重,利于 SEO。使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。

九、HTML5的離線儲存?

localStorage

長期存儲數據,瀏覽器關閉后數據不丟失; sessionStorage 數據在瀏覽器關閉后自動刪除。

十、(寫)描述一段語義的html代碼吧。

(HTML5中新增加的很多標簽(如:

、