web前端面試題及答案

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

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

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

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

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

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

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

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

9、法）；（2）.選擇器hack：例如IE6能*html .class; IE7能識(shí)別 *+html .class（也叫選擇器前綴法）; （3）html頭部引用（if IE）hack：針對(duì)所有IE：<!-if IE><!-您的代碼-><!endif->，針對(duì)IE6及以下版本：<!-if lt IE 7><!-您的代碼-><!endif->，這類(lèi)Hack不僅對(duì)CSS生效，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效（也叫條件注釋法）。18.3請(qǐng)簡(jiǎn)述css加載方式link和import的區(qū)別？1. link屬于XHTML標(biāo)簽，而impor

10、t完全是CSS提供的一種方式。2加載順序的差別：前者在頁(yè)面加載的時(shí)候就同時(shí)加載進(jìn)來(lái)，而后者是在頁(yè)面完全加載完再加載3兼容性的差別：前者可以兼容全部，后者只有在IE5以上才能被識(shí)別；4. 使用JavaScript DOM控制樣式的差別：只能控制link標(biāo)簽，不能控制import19.display:none和visibility:hidden的區(qū)別是什么？ visibility: hidden-將元素隱藏，但是還占著位置。 display: none-將元素的顯示設(shè)為無(wú)，不占任何的位置。19.1五大瀏覽器的內(nèi)核火狐：-moz- IE：-ms- 歐朋：-o- 谷歌和蘋(píng)果：-webkit-20.說(shuō)出

11、幾種IE6 BUG的解決方法 1.雙邊距BUG float引起的  解決：使用display:inline 2.3像素問(wèn)題 使用float引起的 解決：使用dislpay:inline -3px   3.超鏈接hover 點(diǎn)擊后失效  解決：使用正確的書(shū)寫(xiě)順序 link visited hover active 4.Ie z-index問(wèn)題 解決：給父級(jí)添加position:relative 5.Png 透明 解決：使用js代碼 6.Min-height 最小高度 ！Important 解決 7.img出現(xiàn)邊框 border:none

12、; 8.為什么沒(méi)有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的overflow:hidden,zoom:0.08 line-height:1px可以解決）21.域名和服務(wù)器相關(guān)知識(shí)？22.HTTP狀態(tài)碼都有那些。 200 OK /客戶(hù)端請(qǐng)求成功 400 Bad Request /客戶(hù)端請(qǐng)求有語(yǔ)法錯(cuò)誤，不能被服務(wù)器所理解 403 Forbidden /服務(wù)器收到請(qǐng)求，但是拒絕提供服務(wù) 404 Not Found /請(qǐng)求資源不存在，輸入了錯(cuò)誤的URL 500 Internal Server Error /服務(wù)器發(fā)生不可預(yù)期的錯(cuò)誤 503 Server Unavailable /服務(wù)器當(dāng)前不

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

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

15、ead”);2. Canvas API：有關(guān)動(dòng)態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動(dòng)畫(huà)的API。3. 音頻與視頻 API。4. 離線(xiàn)存儲(chǔ)API5. 通訊API6. 文件操作7. 地理位置API8. 拖放API26.CSS3新增偽類(lèi)有那些？ p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。 p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。 p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。 p:only-chil

16、d 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。 p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。 :enabled、:disabled 控制表單控件的禁用狀態(tài)。:checked，單選框或復(fù)選框被選中。271 簡(jiǎn)述call和apply的區(qū)別？?jī)烧叩淖饔檬且粯拥?，只是參?shù)列表不同27.2 js中= 和 = 的區(qū)別？=是判斷值是否相等（先轉(zhuǎn)換類(lèi)型再判斷）, null = underfined 這兩個(gè)是相等的=是判斷值及類(lèi)型是否完全相等。（直接判斷），注意： NaN！=NaN 的，NaN不等于任何數(shù)，包括他自身（奇怪的東西）27.3 j

17、s中 的基本數(shù)據(jù)類(lèi)型？數(shù)值類(lèi)型：number 字符串類(lèi)型：string 布爾類(lèi)型：boolean（true和false） 對(duì)象類(lèi)型： abject （null） 未定義類(lèi)型： underfined（underfined）27.4 什么是JavaScript 閉包，有何作用？一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。閉包的特點(diǎn)：1.作為一個(gè)函數(shù)變量的一個(gè)引用，當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。2.一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒(méi)有釋放資源的棧區(qū)。27.5 jQuery和JavaScript相比的優(yōu)缺點(diǎn)？?jī)?yōu)點(diǎn)：實(shí)現(xiàn)了腳本和頁(yè)面的分離；最少的

18、代碼做最多的事（這也是jQuery的口號(hào)）；性能更好，幾乎解決了所有的瀏覽器兼容問(wèn)題；缺點(diǎn)：不能向后兼容；插件的兼容性（各版本之間不能很好的兼容），在同一個(gè)頁(yè)面使用多個(gè)插件可能會(huì)出現(xiàn)沖突現(xiàn)象；穩(wěn)定性方面也有待提高；27.6全局變量和局部變量有什么區(qū)別？在JavaScript中一對(duì)大括號(hào)代表著一個(gè)獨(dú)立的空間，在這個(gè)空間當(dāng)中聲明的變量相對(duì)這個(gè)大括號(hào)來(lái)說(shuō)就是全局變量，而相對(duì)其他大括號(hào)來(lái)說(shuō)就是局部變量，局部變量只能在自己的大括號(hào)里被使用，其他大括號(hào)是不能調(diào)用的。28.談?wù)凾his對(duì)象的理解。 this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是總有一個(gè)原則，那就是this指的

19、是調(diào)用函數(shù)的那個(gè)對(duì)象。 this一般情況下：是全局對(duì)象Global。 作為方法調(diào)用，那么this就是指這個(gè)對(duì)象28.1 前端技術(shù)有哪些？還有哪些相關(guān)的書(shū)籍？JavaScript jQuery HTML5 CSS3 （移動(dòng)端框架：jQuery mobile Phonegap Bootstra移動(dòng)端開(kāi)發(fā)工具等）精通JavaScript鋒利的jQuery編寫(xiě)高質(zhì)量代碼：web前端開(kāi)發(fā)修煉之道SEO教程：搜索引擎優(yōu)化入門(mén)與進(jìn)階29.documen.write和 innerHTML有什么區(qū)別？ DOM的innerHTML是DOM元素對(duì)象的一個(gè)屬性 而write是document對(duì)象的一個(gè)方法29.1用J

20、avaScript怎么判斷谷歌瀏覽器？<script type="text/javascript"> var isChrome = window.navigator.userAgent.indexOf("Chrome") != -1; alert(isChrome); if (isChrome) alert("是Chrome瀏覽器"); else alert("不是Chrome瀏覽器"); </script>30.JSON是什么？ JSON是一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于JS的一個(gè)子集。

21、數(shù)據(jù)格式簡(jiǎn)單, 易讀寫(xiě), 占用帶寬小'age':'12', 'name':'back'31.ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?允許瀏覽器與服務(wù)器端通信（進(jìn)行數(shù)據(jù)交換）而無(wú)需刷新當(dāng)前頁(yè)面的技術(shù) 1. 通過(guò)異步模式，提升了用戶(hù)體驗(yàn) 2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用 3. Ajax在客戶(hù)端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，減少了大用戶(hù)量下的服務(wù)器負(fù)載。 2. Ajax的最大的特點(diǎn)是什么。 Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新） 3.ajax的缺點(diǎn)： 1、ajax不

22、支持瀏覽器back按鈕。 2、安全問(wèn)題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。 3、對(duì)搜索引擎的支持比較弱。 4、破壞了程序的異常機(jī)制。 5、不容易調(diào)試。32.你常用那些js框架？jQuery Sencha Ext JS（4.0版本后要收費(fèi)） 33.工作流程，你怎么來(lái)實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 34.介紹項(xiàng)目經(jīng)驗(yàn)、合作開(kāi)發(fā)、獨(dú)立開(kāi)發(fā)。35.開(kāi)發(fā)過(guò)程中遇到困難，如何解決。36.對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？ 前端是最貼近用戶(hù)的程序員，比后端、數(shù)據(jù)庫(kù)、產(chǎn)品經(jīng)理、運(yùn)營(yíng)、安全都近。 1、實(shí)現(xiàn)界面交互 2、提升用戶(hù)體驗(yàn) 3、有了Node.js，前端可以實(shí)現(xiàn)

23、服務(wù)端的一些事情前端是最貼近用戶(hù)的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分，甚至更好， 參與項(xiàng)目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到1px； 與團(tuán)隊(duì)成員，UI設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通； 做好的頁(yè)面結(jié)構(gòu)，頁(yè)面重構(gòu)和用戶(hù)體驗(yàn)； 處理hack，兼容、寫(xiě)出優(yōu)美的代碼格式； 針對(duì)服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。其它相關(guān)的加分項(xiàng)：1. 都使用和了解過(guò)哪些編輯器?都使用和了解過(guò)哪些日常工具?2. 都知道有哪些瀏覽器內(nèi)核?開(kāi)發(fā)過(guò)的項(xiàng)目都兼容哪些瀏覽器?3. 瀑布流布局或者流式布局是否有了解4. HTML5都有哪些新的API?5. 都用過(guò)什么代碼調(diào)試工具?6. 是否有接觸過(guò)或者了解過(guò)重構(gòu)。7.你遇到過(guò)比較難的技術(shù)問(wèn)題是？你是如何解決