web前端面試題及答案

1、1. WEB標(biāo)準(zhǔn)以及 W3C標(biāo)準(zhǔn)是什么？標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。l.ldiv中img怎么水平和垂直居中？Divwidth:200p x;height:200px;text-alig n:ce nter;fon t-size:0;overflow:hidden;line-height:200px; _line-height:178px;/*兼容 IE6*/ Img vertical-alig n:middle;1.2 HTML中沒有單位的屬性是？z-i ndex:1; zoom:1; fon t-weight:200;1.3 form 表單中in

2、put標(biāo)簽的reado nly 和disabled 屬性有何區(qū)別？readonly=“readonly "是只讀，不可以修改， disabled= “disabled "是禁用，整個文本框是顯示灰色狀態(tài)form中method是數(shù)據(jù)傳遞的方式，action是與后臺數(shù)據(jù)庫提交的2. xhtml和html有什么區(qū)別XHTML元素必須被正確地嵌套，閉合，區(qū)分大小寫，文檔必須擁有根元素。3. 行內(nèi)元素有哪些？塊級元素有哪些？行內(nèi)元素:a b img em br i spa n in put select塊級元素：div p h1-h6 form ul dl ol table4. 行內(nèi)

3、元素和塊級元素有什么區(qū)別？行內(nèi)元素不可以設(shè)置寬高，不獨占一行；塊級元素可以設(shè)置寬高，獨占一行。5. 我想讓行內(nèi)元素跟上面的元素距離10px，加margin-top和padding-top可以嗎？margin-top,paddi ng-top無效6. CSS的盒模型由什么組成？內(nèi)容（width,height ） ， border ,margin ， padding6.1簡述div+css布局的優(yōu)勢？（1）符合w3c標(biāo)準(zhǔn)；（2）兼容性好；（3）有利于搜索引擎很友好；（4）樣式的調(diào)整更加 方便；（5）css簡潔的代碼，能使樣式和結(jié)構(gòu)分離；7. 說說display屬性有哪些？可以做什么？display

4、:block行內(nèi)元素轉(zhuǎn)換為塊級元素display:i nline 塊級元素轉(zhuǎn)換為行內(nèi)元素display:i nli ne-block轉(zhuǎn)為內(nèi)聯(lián)元素display:box（css3 新增的彈性布局屬性 ）8.CSS選擇符有哪些?1.ic1 選擇器（# myid ）2.類選擇器（.myclassname）3.標(biāo)簽選擇器（div, h1, p ）4.相鄰選擇器（h1 + p ）5.子選擇器（ul < li ）6.后代選擇器（li a )7.通配符選擇器(* )8.屬性選擇器（arel = "exter naF)9.偽類選擇器（a: hover, li: nth - child)9. 哪

5、些css屬性可以繼承？可繼承：fon t-size fo nt-family color, ul li dl dd dt;（字體屬性和列表屬性）不可繼承 :border padding margin width height ;10. css優(yōu)先級算法如何計算？!importa nt > id > class >標(biāo)簽!important 比內(nèi)聯(lián)優(yōu)先級高* 優(yōu)先級就近原則，樣式定義最近者為準(zhǔn)；* 以最后載入的樣式為準(zhǔn)；11. text-align:center和 line-height有什么區(qū)別？text-alig n是水平對齊，lin e-height是行間。12. 前端頁面

6、由哪三層構(gòu)成，分別是什么？作用是什么？結(jié)構(gòu)層Html（頁面結(jié)構(gòu)內(nèi)容，骨架）表示層CSS （網(wǎng)頁的樣式和外觀）行為層js （實現(xiàn)網(wǎng)頁的交互，動畫效果）13. 標(biāo)簽上title 與alt屬性的區(qū)別是什么？Alt是圖片屬性，讓搜索引擎認(rèn)識你的圖片。當(dāng)圖片不顯示的時候顯示。title是網(wǎng)站標(biāo)題，是 seo中最重要的屬性。14. 使用css精靈有什么優(yōu)缺點？優(yōu)：Css精靈 把一堆小的圖片整合到一張大的圖片上，減輕HTTP的請求數(shù)量（HTTP連接數(shù)對網(wǎng)站的加載性能有重要影響）。能夠提升網(wǎng)站性能缺：可維護(hù)性方面，如要改變局部一張小圖，就要很繁瑣，而且算圖片的位置也很麻煩；15. 什么是語義化的 HTML標(biāo)簽

7、使用的合理性，對于搜索引擎的抓取有好處。16. b標(biāo)簽和strong標(biāo)簽,i標(biāo)簽和em標(biāo)簽的區(qū)別？后者有語義，前者則無。17. tite與h1的區(qū)別。title側(cè)重于網(wǎng)站信息標(biāo)題從文章而言，h1側(cè)重于文章主題站在seo的角度看，好網(wǎng)站少不了title ，好文章少不了 h1標(biāo)題，title 權(quán)重高于h1。18. 清除浮動的幾種方式，各自的優(yōu)缺點1.使用空標(biāo)簽清除浮動clear:both（缺點，增加無意義的標(biāo)簽）2. 使用 overflow:auto （使用 zoom:1 用于兼容 IE）或：overflow:hidden;3. 是用afert偽元素清除浮動（用于非IE瀏覽器）.Clearfix:

8、aftercontent: ” ; display:block; height:0; overflow:hidden;clear:both;.cleafix zoom:1;18.1 HTML doctype 有哪些常用的類型？HTML4.01 XHTML1.0 HTML518.2什么是css hack ?（怎么讓css很好的兼容各主流瀏覽器），CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。有三種表達(dá)方式：（1）.css內(nèi)部hack :主要針對類內(nèi)部的 hack，比如IE6能識別"_”

9、“*” ,IE7 能識別“ *”等（也叫類內(nèi)屬性前綴法）；（2）.選擇器hack :例如IE6能*html .class;IE7能識別*+html .class（也叫選擇器前綴法）；（3）html頭部引用（if IE）hack :針對 所有 IE: <!-if IE><!-您的代碼-><!endif->，針對 IE6 及以下版本：<!-if lt IE 7><!- 您的代碼-><!endif->，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都 會生效（也叫 條件注釋法）。18.3請簡述css加載方式link和

10、import 的區(qū)別？1. link屬于XHTML標(biāo)簽，而import完全是CSS提供的一種方式。2 加載順序的差別：前者在頁面加載的時候就同時加載進(jìn)來，而后者是在頁面完全加載完 再加載3 兼容性的差別：前者可以兼容全部，后者只有在IE5以上才能被識別；4.使用JavaScript DOM 控制樣式的差別：只能控制link標(biāo)簽，不能控制 import19. display:none和 visibility:hidden的區(qū)別是什么？visibility: hidden-將元素隱藏，但是還占著位置。display: none-將元素的顯示設(shè)為無，不占任何的位置。19.1五大瀏覽器的內(nèi)核火狐：-m

11、oz- IE : -ms- 歐朋：-o- 谷歌和蘋果：-webkit-20. 說出幾種IE6 BUG的解決方法1.雙邊距BUG float弓I起的解決：使用display:inline2.3像素問題使用float引起的解決：使用 dislpay:inline -3px3. 超鏈接hover點擊后失效 解決：使用正確的書寫順序link visited hoveractive4.Ie z-index問題解決：給父級添加 position:relative5. Png透明解決：使用js代碼6. Min-height最小高度！ Important解決7.img 出現(xiàn)邊框 border:none;8.

12、為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的 overflow:hidde n,zoom:0.08 lin e-height:1px可以解決）21. 域名和服務(wù)器相關(guān)知識?22. HTTP狀態(tài)碼都有那些。200 OK /客戶端請求成功400 Bad Request /客戶端請求有語法錯誤，不能被服務(wù)器所理解403 Forbidden /服務(wù)器收到請求，但是拒絕提供服務(wù)404 Not Fou nd /請求資源不存在，輸入了錯誤的 URL500 In ternal Server Error/服務(wù)器發(fā)生不可預(yù)期的錯誤503 Server Un available /服務(wù)器當(dāng)前不能處

13、理客戶端的請求，一段時間后可能恢復(fù)正常23. 如何優(yōu)化網(wǎng)頁加載速度？1. 減少css，js文件數(shù)量及大小(減少重復(fù)性代碼，代碼重復(fù)利用)，壓縮CSS和Js代碼2. 圖片的大小3. 把css樣式表放置頂部，把 js放置頁面底部4. 減少http請求數(shù)5. 使用外部Js和CSS24. position屬性 absolute 與 relative 的區(qū)別？absolute絕對定位/相對于瀏覽器定位relative 相對定位/相對于前面的容器定位25. HTML5的有那些新標(biāo)簽？<header>頭部<nav>導(dǎo)航鏈接 <aside>側(cè)邊欄<article>

14、;列表內(nèi)容 vfooter> 腳部<canvas> 圖片 vsection> 塊容器25.1 HTML5有哪些新特性？用于繪畫的 canvas 元素?用于媒介回放的video和audio元素?寸本地離線存儲的更好的支持?新的特殊內(nèi)容元素，比如article、footer、header、nav、section?新的表單控件，比女口calendar、date、time、email、url、search25.2 HTML5有哪些新的 API ？1. 選擇器：querySelector ，querySelectorAIIdocument. querySelectorAII( “

15、.head ” );2. Ca nvas API :有關(guān)動態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動畫的API。3. 音頻與視頻API 。4.離線存儲API5. 通訊API6. 文件操作7. 地理位置API8. 拖放APIp:first-of-type p:last-of-type p:only-of-type選擇屬于其父元素的首個 選擇屬于其父元素的最后 選擇屬于其父元素唯一的26.CSS3新增偽類有那些?p元素的每個p元素。p元素的每個p元素。p元素的每個vp元素。p:only-child選擇屬于其父元素的唯一子元素的每個vp元素。p:nth-child（2）選擇屬于其父元素的第二個子元素的每個vp

16、元素:enabled 、:disabled控制表單控件的禁用狀態(tài):checked，單選框或復(fù)選框被選中。27. 1簡述call和apply的區(qū)別？兩者的作用是一樣的，只是參數(shù)列表不同27.2 js中=和=的區(qū)別？='是判斷值是否相等 （先轉(zhuǎn)換類型再判斷），null = underfined 這兩個是相等的=' 是判斷值及類型是否完全相等。（直接判斷），注意： NaN ! =NaN的，NaN不等于任何數(shù)，包括他自身（奇怪的東西） 27.3 js中的基本數(shù)據(jù)類型？數(shù)值類型：number 字符串類型：string 布爾類型：boolean （true和false）對象類型:abjec

17、t （null） 未定義類型：underfined （ undefined ）27.4什么是JavaScript閉包，有何作用？一個擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個函數(shù)），因而這些變量也是該表達(dá)式的一部分。閉包的特點：1. 作為一個函數(shù)變量的一個引用，當(dāng)函數(shù)返回時，其處于激活狀態(tài)。2. 一個閉包就是當(dāng)一個函數(shù)返回時，一個沒有釋放資源的棧區(qū)。27.5 jQuery 和JavaScript 相比的優(yōu)缺點？優(yōu)點：實現(xiàn)了腳本和頁面的分離；最少的代碼做最多的事（這也是jQuery的口號）；性能更好，幾乎解決了所有的瀏覽器兼容問題；缺點：不能向后兼容；插件的兼容性（各版本之間不能很好

18、的兼容），在同一個頁面使用多個插件可能會出現(xiàn)沖突現(xiàn)象；穩(wěn)定性方面也有待提高； 27.6全局變量和局部變量有什么區(qū)別？在JavaScript中一對大括號代表著一個獨立的空間，在這個空間當(dāng)中聲明的變量相對這個大括號來說就是全局變量，而相對其他大括號來說就是局部變量，局部變 量只能在自己的大括號里被使用，其他大括號是不能調(diào)用的。28. 談?wù)凾his對象的理解。this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。this 一般情況下：是全局對象Global。作為方法調(diào)用，那么this就是指這個對象28.1前端技術(shù)有哪些？還

19、有哪些相關(guān)的書籍？JavaScript jQuery HTML5 CSS3（移動端框架：jQuery mobile Phon egapBootstra移動端開發(fā)工具等）精通JavaScript鋒利的jQuery編寫高質(zhì)量代碼：web前端開發(fā)修煉之道SEO教程：搜索引擎優(yōu)化入門與進(jìn)階29. documen.write 和 innerHTML 有什么區(qū)別？DOM勺innerHTML是DOM元素對象的一個屬性而write 是document對象的一個方法29.1用JavaScript怎么判斷谷歌瀏覽器？<script type="text/javascript">va

20、r isChrome = wi ndow. navigator.userAge nt.i ndexOf（"Chrome"） != -1;alert（isChrome）;if （isChrome） alert（"是 Chrome 瀏覽器"）; else alert（"不是 Chrome瀏覽器"）;</script>30. J SON是什么？JSON是一種輕量級的數(shù)據(jù)交換格式。它是基于JS的一個子集。數(shù)據(jù)格式簡單，易讀寫,占用帶寬小'age':'12', 'n ame':'

21、;back'31. ajax 是什么？ajax的交互模型？同步和異步的區(qū)別？允許瀏覽器與服務(wù)器端通信（進(jìn)行數(shù)據(jù)交換）而無需刷新當(dāng)前頁面的技術(shù)1. 通過異步模式，提升了用戶體驗2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用3. Ajax在客戶端運行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。2. Ajax的最大的特點是什么。Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新）3.ajax的缺點：1 、ajax不支持瀏覽器back按鈕。2 、安全問題AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。3 、對搜索引擎的支持比較弱。4 、破壞了程序的異常機制。5 、不容易

22、調(diào)試。32. 你常用那些js框架？jQuery Sencha Ext JS （ 4.0 版本后要收費）33. 工作流程，你怎么來實現(xiàn)頁面設(shè)計圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作？34. 介紹項目經(jīng)驗、合作開發(fā)、獨立開發(fā)。35. 開發(fā)過程中遇到困難，如何解決。36. 對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？ 前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運營、安全都近。1 、實現(xiàn)界面交互2 、提升用戶體驗3 、有了 Node.js，前端可以實現(xiàn)服務(wù)端的一些事情前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從90分進(jìn)化到100分，甚至更好,參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到 1px ；與團(tuán)隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通；做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗；處理hack，兼容、寫出優(yōu)美的代碼格式；針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。其它相關(guān)的加分項：1. 都使用和了解過哪些編輯器 ？都使用和了解過哪些日常工具 ？2. 都知道有哪些瀏覽器內(nèi)核？開發(fā)過的項目都兼容哪些瀏覽器 ？3. 瀑布流布局或者流式布局是否有了解4. HTML5都有哪些新的 API?5. 都用過什么代碼調(diào)試工具？6. 是否有接觸過或者了解過重構(gòu)。7. 你遇到過比較難的技術(shù)問題是？你是如何解決的？8. 什么叫優(yōu)雅降級