2017前端基礎面試題

　　關于前端的面試題你有了解過嗎?提前的準備對面試有很大的幫助，那么2017年的前端面試題有哪些呢?以下是陽光網小編幫你們整理的2017前端基礎面試題，一起來學習啦。

　　2017前端基礎面試題(一)

　　1、什么時網頁三劍客?

　　網頁三劍客，是一套強大的網頁編輯工具，最初是由Macromedia公司開發出來的。由Dreamweaver，Fireworks，Flash三個軟件組成，俗稱網頁三劍客。

　　Dreamweaver 是一個“所見即所得”的可視化網站開發工具，主要用于動態網頁和靜態網頁的開發;Fireworks主要是用于對網頁上常用的jpg、gif的制作和處理，也可用于制作網頁布局;Flash主要用來制作動畫，現推出Flash平臺，可預見有極好的前景。

　　2、怎么調試網頁代碼?怎么查看網頁源代碼?

　　(1)、按鍵盤上的F12，打開開發者調試工具;

　　(2)、鼠標右鍵查看頁面源代碼。

　　3、什么是H5?

　　H5=HTML5，指的是HTML超文本標記語言(HTML)的第五次重大修改，HTML的第五代。 HTML5具有的特點：

　　(1)、語義化的標簽：好處是網站加載更快;該標簽舉例：header、nav、article等。

　　(2)、增加了音頻、視頻標簽：好處是取代falsh;該標簽舉例：audio、video。

　　(3)、canvas標簽：好處在瀏覽器上繪制圖形或動畫，取代flash。

　　(4)、支持手機和平板的響應式布局。

　　HTML5的缺點：低版本瀏覽器支持性不好，比如IE9以下的瀏覽器不支持HTML5。

　　4、H5為什么這么火?H5是哪一年產生的?H5會火多久?

　　(1)、因為H5的后臺很硬，是谷歌(google)和蘋果(Apple)兩大巨頭公司，谷歌和蘋果大力倡導H5的發展，也是H5的忠實的支持者和實踐者(IOS+Android系統占據手機市場92.36%)，H5的產生主要目的'也是干掉flash，因為flash是adobe公司的，adobe不是W3C組織的成員之一，蘋果和谷歌等萬維網聯盟也不希望在自己的產品中使用加載量過大的flash。

　　(2)、H5是2014年9月份W3C(萬維網聯盟，主要有蘋果和谷歌公司)組織發布的。

　　(3)、刷臉時代(這里專指網站用戶體驗更加美觀的時代)+移動端時代(手機+平板)，會促使H5會在未來的有更加美好的發展前景，只要有網站，H5就會很火，UI也就很火，H5的發展會讓UI更加提高用戶的滿意度，H5的火爆時代，會促進UI更好發展。

　　(4)、微信的發展，O2O的促使H5更火。

　　在這里不得不談微信，如果沒有微信，或許今天我們不會這樣來討論H5，微信無意中養成了用戶掃碼的習慣，并通過公眾號的內容生.產及分發，以及微信本身已有的龐大的用戶群體及社交屬性，使基于網頁的內容可以快速傳播，真正帶來了APP即瀏覽器的時代，取消了輸入內容網址的麻煩。以微信為代表的超級社交APP，解決了網頁內容瀏覽及分發的通路。 H5或許會沒落，但會迎來H6、H7„，只會變得越來越好，所以沒必要擔心H5會不會死，當下重在實踐與積累，至少現在，Html5的影響力，會超出你我的想象，也就意味著H5的好閨蜜UI會一直火下去。

　　5、什么叫做響應式?

　　針對不用的屏幕顯示不同的網頁布局，比如說大屏幕手機、小屏幕手機、平板能夠適應不同的屏幕來顯示網站。

　　2017前端基礎面試題(二)

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

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

　　(2)、行內元素有：a b span img input select strong(強調的語氣)

　　塊級元素有：div ulol li dl dtdd h1 h2 h3 h4„p。

　　2、CSS的盒子模型?

　　(1)、兩種， IE 盒子模型、標準W3C 盒子模型;IE 的content部分包含了 border 和pading;

　　(2)、盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)。

　　3、瀏覽器的`內核分別是什么?經常遇到的瀏覽器的兼容性有哪些?

　　* IE瀏覽器的內核Trident、 Mozilla(火狐)的Gecko、google(谷歌)的WebKit、Opera內核Presto;

　　* png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

　　* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

　　* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

　　4、頁面重構怎么操作?

　　編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。

　　5、為什么要初始化CSS樣式。

　　因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

　　當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

　　*最簡單的初始化方法就是： * {padding: 0; margin: 0;} 。

　　2017前端基礎面試題(三)

　　1、div是什么?在div出現之前做網站用什么布局?

　　div是網站布局的盒子標簽，div出現是table布局，因為table布局嵌套很多，網站加載慢，布局層級不清晰。

　　2、html是什么?css是什么?js是什么?

　　(1)、html是超文本標記語言，他是做網站時候用的一些文本標記標簽，比如div、span等。

　　(2)、css是層疊樣式表，是做網站的時候給標簽來美化網站的樣式，比如說background(背景)、color(字體顏色)、height(高度)、width(寬度)等。

　　(3)、js=javascript是網站中寫前后臺交互效果、網頁動畫效果的一種開發語言，比如鼠標點擊事件(click)、前后臺數據請求(ajax)等。

　　3、什么是前端工程師?什么是后端工程師?

　　前端工程師就是指的做靜態網頁的工程師：

　　(1)、廣義的前端分為三種：安卓工程師、ios工程師、web前端工程師。

　　(2)、狹義的前端指的'是web前端工程師，web前端工程師指的是做靜態的PC端和手機端靜態網頁的工程師。

　　4、什么是靜態網頁?什么叫做動態網頁?

　　(1)、靜態網頁：沒有數據交互的網頁，沒有數據庫參與，沒有服務器端數據的加載。比如靜態網頁就是只有html+css+JavaScript做成的網站。

　　(2)、動態網頁：有后臺數據參與的網頁，網頁中的數據是從數據庫取的，需要有后臺邏輯的支持。比如動態網頁就是jsp頁面(后臺語言是java)、asp頁面(后臺語言是asp.net)。

　　5、前端語言有哪些?后端語言有哪些?

　　(1)、前端語言：HTML、css、javascript。

　　(2)、后端語言(服務器端語言)：php、java、asp.net。最近新出的node.js

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

　　(1)、聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器的解析器，用什么文檔類型規范來解析這個文檔。

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

　　(3)、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

　　(4)、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

【前端基礎面試題】相關文章：

2018前端面試題及答案12-06

php基礎面試題11-26

java基礎面試題04-04

.net基礎面試題11-25

2017web前端面試題04-05

java基礎面試題201704-05

java基礎面試題及答案04-05

2017java基礎面試題04-05

c語言基礎面試題及答案04-01