web前端面試題及答案

精選文檔精選文檔/7.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么？標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。div中img怎么水平和垂直居中？Div{width:200px; height:200px;text-align:center; font-size:0;overflow:hidden;line-height:200px;_line-height:178px;/*兼容IE6*/}Img{vertical-align:middle;}HTML中沒有單位的屬性是？z-index:1;zoom:1;font-weight:200;form表單中input標(biāo)簽的readonly和disabled屬性有何區(qū)別？readonly="readonly”是只讀，不可以修改，disabled="disabled”是禁用，整個文本框是顯示灰色狀態(tài)form中method是數(shù)據(jù)傳遞的方式，action是與后臺數(shù)據(jù)庫提交的.xhtml和html有什么區(qū)別XHTML元素必須被正確地嵌套，閉合，區(qū)分大小寫，文檔必須擁有根元素。.行內(nèi)元素有哪些？塊級元素有哪些？行內(nèi)元素:abimgembrispaninputselect塊級元素：divph1-h6formuldloltable.行內(nèi)元素和塊級元素有什么區(qū)別？行內(nèi)元素不可以設(shè)置寬高，不獨(dú)占一行 ；塊級元素可以設(shè)置寬高，獨(dú)占一行。.我想讓行內(nèi)元素跟上面的元素距離 10px,力口margin-top和padding-top可以嗎？margin-top,padding-top無效.CSS的盒模型由什么組成？內(nèi)容（width,height）,border,margin,padding簡述div+css布局的優(yōu)勢？（1）符合w3c標(biāo)準(zhǔn)；（2）兼容性好；（3）有利于搜索引擎很友好；（4）樣式的調(diào)整更加方便；（5）css簡潔的代碼，能使樣式和結(jié)構(gòu)分離；.說說display屬性有哪些？可以做什么？display:block行內(nèi)元素轉(zhuǎn)換為塊級元素display:inline塊級元素轉(zhuǎn)換為行內(nèi)元素display:inline-block轉(zhuǎn)為內(nèi)聯(lián)元素display:box（css3新增的彈性布局屬性）.CSS選擇符有哪些？d選擇器（#myid）.類選擇器（.myclassname）.標(biāo)簽選才|器（div,h1,p）.相鄰選擇器（h1+p）.子選擇器（ul<li）.后代選擇器（lia）.通配符選擇器（*）.屬性選擇器（a[rel="external"]）.偽類選擇器（a:hover,li:nth-child）.哪些css屬性可以繼承？可繼承：font-sizefont-familycolor,ullidldddt; （字體屬性和列表屬性）不可繼承：borderpaddingmarginwidthheight;.CSS優(yōu)先級算法如何計算？[important>id>class>標(biāo)簽[important比內(nèi)聯(lián)優(yōu)先級高優(yōu)先級就近原則，樣式定義最近者為準(zhǔn) ；以最后載入的樣式為準(zhǔn)；.text-align:center和line-height有什么區(qū)別？text-align是水平對齊，line-height是行間。.前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？結(jié)構(gòu)層Html（頁面結(jié)構(gòu)內(nèi)容，骨架）表示層CSS（網(wǎng)頁的樣式和外觀） 行為層js（實(shí)現(xiàn)網(wǎng)頁的交互，動畫效果）.標(biāo)簽上title與alt屬性的區(qū)別是什么？Alt是圖片屬性，讓搜索引擎認(rèn)識你的圖片。當(dāng)圖片不顯示的時候顯示。title是網(wǎng)站標(biāo)題，是seo中最重要的屬性。.使用css精靈有什么優(yōu)缺點(diǎn)？優(yōu)：Css精靈把一堆小的圖片整合到一張大的圖片上，減輕HTTP的請求數(shù)量（HTTP連接數(shù)對網(wǎng)站的加載性能有重要影響 ）。能夠提升網(wǎng)站性能缺：可維護(hù)性方面，如要改變局部一張小圖，就要很繁瑣，而且算圖片的位置也很麻煩；.什么是語義化的HTML?標(biāo)簽使用的合理性，對于搜索引擎的抓取有好處。.b標(biāo)簽和strong標(biāo)簽,i標(biāo)簽和em標(biāo)簽的區(qū)別？后者有語義，前者則無。.tite與h1的區(qū)別。title側(cè)重于網(wǎng)站信息標(biāo)題從文章而言，hl側(cè)重于文章主題站在seo的角度看，好網(wǎng)站少不了 title,好文章少不了hl標(biāo)題，title權(quán)重高于hl。.清除浮動的幾種方式，各自的優(yōu)缺點(diǎn).使用空標(biāo)簽1#除浮動clear:both（缺點(diǎn)，增加無意義的標(biāo)簽）.使用oveflow:auto（使用zoom:1用于兼容IE）或：oveflow:hidden;.是用afert偽元素清除浮動（用于非IE瀏覽器）.Clearfix:after{content:"jdisplay:block;height:。；overflow:hidden;clear:both;}.cleafix{zoom:1;}HTMLdoctype有哪些常用的類型？HTML4.01XHTML1.0HTML5什么是csshacR（怎么讓cs4艮好的兼容各主流瀏覽器）,CSShack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過來利用CSShack為不同版本的瀏覽器定制編寫不同的 CSS效果。有三種表達(dá)方式：（1）.css內(nèi)部hack:主要針對類內(nèi)部的hack,比如IE6能識別"""*",IE7能識別“*”等（也叫類內(nèi)屬性前綴法）；（2）.選擇器hack：例如IE6能*html.class{};IE7能識別*+html.class{}（也叫選擇器前綴法）；（3）html頭部引用（ifIE）hack:針對所有IE:<!--[ifIE]><!--您的代碼--><![endif]-->,針對IE6及以下版本：<!--[ifltIE7]><!--您的代碼--><![endif]-->,這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效（也叫條件注釋法）。請簡述css加載方式link和@import 的區(qū)別？.link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。.加載順序的差別：前者在頁面加載的時候就同時加載進(jìn)來，而后者是在頁面完全加載完再加載.兼容性的差別：前者可以兼容全部，后者只有在IE5以上才能被識別；.使用JavaScriptDOM控制樣式的差別：只能控制 link標(biāo)簽，不能控制@import.display:none和visibility:hidden的區(qū)別是什么？visibility:hidden將元素隱藏，但是還占著位置。display:none將元素的顯示設(shè)為無，不占任何的位置。五大瀏覽器的內(nèi)核火狐：-moz-IE：-ms-歐朋：-o-谷歌和蘋果：-webkit-.說出幾種IE6BUG的解決方法.雙邊距BUGfloat引起的解決：使用display:inline2.3像素問題使用float引起的解決：使用dislpay:inline-3px.超鏈接hover點(diǎn)擊后失效解決：使用正確的書寫順序 linkvisitedhoveractive.Iez-index問題解決：給父級添加 position:relative5.Png透明解決：使用js代碼6.Min-height最小高度！Important解決7.img出現(xiàn)邊框border:none;8.為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的overflow:hidden,zoom:0.08line-height:1px可以解決）.域名和服務(wù)器相關(guān)知識？.HTTP狀態(tài)碼都有那些。200OK //客戶端請求成功400BadRequest〃客戶端請求有語法錯誤，不能被服務(wù)器所理解403Forbidden〃服務(wù)器收到請求，但是拒絕提供服務(wù)404NotFound〃請求資源不存在，輸入了錯誤的 URL500InternalServerError//服務(wù)器發(fā)生不可預(yù)期的錯誤503ServerUnavailable 〃服務(wù)器當(dāng)前不能處理客戶端的請求，一段時間后可能恢復(fù)正常.如何優(yōu)化網(wǎng)頁加載速度？.減少css,js文件數(shù)量及大小（減少重復(fù)性代碼，代碼重復(fù)利用 ），壓縮CSS和Js代碼.圖片的大小.把css樣式表放置頂部，把js放置頁面底部.減少http請求數(shù).使用外部Js和CSS.position屬性absolute與relative的區(qū)別？absolute絕對定位〃相對于瀏覽器定位relative相對定位〃相對于前面的容器定位.HTML5的有那些新標(biāo)簽？＜header＞頭部＜nav＞導(dǎo)航鏈接＜aside＞側(cè)邊欄＜article＞列表內(nèi)容＜footer＞腳部＜canvas＞圖片〈section須容器HTML5有哪些新特性？用于繪畫的canvas元素?用于媒介回放的video和audio元素陽本地離線存儲的更好的支持面的特殊內(nèi)容元素，比如article、footer、header、nav、section面的表單控件，比如calendar、date、time、email、url、searchHTML5有哪些新的API?.選擇器：querySelector,querySelectorAlldocument.querySelectorAll（".heacT）;.CanvasAPI:有關(guān)動態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動畫的API。.音頻與視頻API。.離線存儲API.通訊API.文件操作.地理位置API.拖放API.CSS3新增偽類有那些？p:first-of-type選擇屬于其父元素的首個 ＜p＞元素的每個＜p＞元素。p:last-of-type選擇屬于其父元素的最后 ＜p＞元素的每個＜p＞元素。p:only-of-type 選擇屬于其父元素唯一的 ＜p＞元素的每個＜p＞元素。p:only-child 選擇屬于其父元素的唯一子元素的每個 ＜p＞元素。p:nth-child（2） 選擇屬于其父元素的第二個子元素的每個 ＜p＞元素。:enabled、：disabled控制表單控件的禁用狀態(tài)。:checked,單選框或復(fù)選框被選中。.1簡述call和apply的區(qū)別？兩者的作用是一樣的，只是參數(shù)列表不同上5中==和===的區(qū)別？'=='是判斷值是否相等（先轉(zhuǎn)換類型再判斷），null==underfined這兩個是相等的'===，是判斷值及類型是否完全相等。 （直接判斷），注意：NaN!===NaN的，NaN不等于任何數(shù)，包括他自身（奇怪的東西）js中的基本數(shù)據(jù)類型?數(shù)值類型：number字符串類型：string布爾類型：boolean(true和false)對象類型：abject(null)未定義類型： underfined(undefined)什么是JavaScript閉包，有何作用？一個擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式 (通常是一個函數(shù))，因而這些變量也是該表達(dá)式的一部分。閉包的特點(diǎn)：.作為一個函數(shù)變量的一個引用，當(dāng)函數(shù)返回時，其處于激活狀態(tài)。.一個閉包就是當(dāng)一個函數(shù)返回時，一個沒有釋放資源的棧區(qū)。jQuery和JavaScript相比的優(yōu)缺點(diǎn)？優(yōu)點(diǎn)：實(shí)現(xiàn)了腳本和頁面的分離；最少的代碼做最多的事(這也是jQuery的口號)；性能更好，幾乎解決了所有的瀏覽器兼容問題；缺點(diǎn)：不能向后兼容；插件的兼容性(各版本之間不能很好的兼容)，在同一個頁面使用多個插件可能會出現(xiàn)沖突現(xiàn)象；穩(wěn)定性方面也有待提高；全局變量和局部變量有什么區(qū)別？在JavaScript中一對大括號代表著一個獨(dú)立的空間，在這個空間當(dāng)中聲明的變量相對這個大括號來說就是全局變量，而相對其他大括號來說就是局部變量，局部變量只能在自己的大括號里被使用，其他大括號是不能調(diào)用的 。.談?wù)凾his對象的理解。this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同， this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。this一般情況下：是全局對象 Global。作為方法調(diào)用，那么this就是指這個對象前端技術(shù)有哪些？還有哪些相關(guān)的書籍？JavaScriptjQueryHTML5CSS3(移動端框架： jQuerymobilePhonegapBootstra移動端開發(fā)工具等)《精通JavaScript〉《鋒利的jQuery》《編寫高質(zhì)量代碼： web前端開發(fā)修煉之道》《SEO教程：搜索引擎優(yōu)化入門與進(jìn)階》.documen.write和innerHTML有什么區(qū)別？DOM的innerHTML是DOM元素對象的一個屬性而write是document對象的一個方法用JavaScript怎么判斷谷歌瀏覽器？〈scripttype="text/javascript">varisChrome=window.navigator.userAgent.indexOf("Chrome")!==-1;alert(isChrome);if(isChrome){alert("是Chrome瀏覽器")；}else{alert("不是Chrome瀏覽器")；</script>.JSON是什么？JSON是一種輕量級的數(shù)據(jù)交換格式。它是基于JS的一個子集。數(shù)據(jù)格式簡單，易讀寫,占用帶寬小{‘a(chǎn)ge':'12','name':'back'}.ajax是什么？ajax的交互模型？同步和異步的區(qū)別？允許瀏覽器與服務(wù)器端通信（進(jìn)行數(shù)據(jù)交換）而無需刷新當(dāng)前頁面的技術(shù).通過異步模式，提升了用戶體驗(yàn).優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。.Ajax的最大的特點(diǎn)是什么。Ajax可以實(shí)現(xiàn)動態(tài)不刷新（局部刷新）.ajax的缺點(diǎn)：1、ajax不支持瀏覽器back按鈕。2、安全問題AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。3、對搜索引擎的支持比較弱。4、破壞了程序的異常機(jī)制。5、不容易調(diào)試。.你常用那些js框架？jQuerySenchaExtJS（4.0版本后要收費(fèi)）.工作流程，你怎么來實(shí)現(xiàn)頁面設(shè)計圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作 ？.介紹項目經(jīng)驗(yàn)、合作開發(fā)、獨(dú)立開發(fā)。.開發(fā)過程中遇到困難，如何解決。.對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運(yùn)營、安全都近。1、實(shí)現(xiàn)界面交互2、提升用戶體驗(yàn)3、有了Node.js,前端可以實(shí)現(xiàn)服務(wù)端的一些事情前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到100分，甚至更好，參與項目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到 1px;與團(tuán)隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通；做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)；處理hack,兼容、寫出優(yōu)美的代碼格式；針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。其它相關(guān)的加分項：.都使用和了解過哪些編輯器？都使用和了解過哪些日常工具？.都知道有哪些瀏覽器內(nèi)核？開發(fā)過的項目都兼容哪些瀏覽器 ？.瀑布流布局或者流式布局是否有了解.HTML5都有哪些新的API?.都用過什么代碼調(diào)試工具？.是否有接觸過或者了解過重構(gòu)。.你遇到過比較難的技術(shù)問題是？你是如何解決的？.什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？優(yōu)雅降級/平穩(wěn)退化：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于