web前端面試題及答案

1、1.WEB 標(biāo)準(zhǔn)以及 W3C 標(biāo)準(zhǔn)是什么？標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、使用外鏈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中沒有單位的屬性是？z-index:1; zoom:1; font-weight:200;1.3 form 表單中 input 標(biāo)簽

2、的 readonly和 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 imgem br i span input select塊級元素： div p h1-h6 form ul dl ol table4.行內(nèi)元素和塊級元素有什么區(qū)別

3、？行內(nèi)元素不可以設(shè)置寬高，不獨占一行;塊級元素可以設(shè)置寬高，獨占一行。5.我想讓行內(nèi)元素跟上面的元素距離10px，加 margin-top和 padding-top可以嗎？margin-top,padding-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:inline 塊級元素轉(zhuǎn)換為行內(nèi)元素display:inline-block轉(zhuǎn)為內(nèi)聯(lián)元素display:box(css3 新增的彈性布局屬性)8.CSS 選擇符有哪些？1.id 選擇器（# myid ）2.類選擇器（ .myclassname）3.標(biāo)簽選擇器（div, h1, p）4.相鄰選擇器（h1 + p）5.子選擇器（ ul 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-

5、align 是水平對齊，line-height 是行間。12.前端頁面由哪三層構(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ù)性方面，如要改變局部一

6、張小圖，就要很繁瑣，而且算圖片的位置也很麻煩；15.什么是語義化的HTML ？標(biāo)簽使用的合理性，對于搜索引擎的抓取有好處。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 ）或：

7、overflow:hidden;3.是用 afert 偽元素清除浮動(用于非 IE 瀏覽器 ).Clearfix:after content: ”;display:block; height:0; overflow:hidden; clear:both;.clearfix zoom:1;18.1 HTML doctype有哪些常用的類型？HTML4.01XHTML1.0HTML518.2 什么是 css hack？（怎么讓css很好的兼容各主流瀏覽器），CSShack 的目的就是使你的CSS 代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過來利用 CSS hack為不同版本的瀏覽器定制編寫不同的CS

8、S 效果。有三種表達(dá)方式：（ 1）.css 內(nèi)部 hack ：主要針對類內(nèi)部的 hack ，比如 IE6 能識別“ _ ”“ *”,IE7 能識別“ *”等（也叫 類內(nèi)屬性前綴法 ）；（ 2） .選擇器 hack ：例如 IE6 能 *html .class; IE7 能識別 *+html .class （也叫 選擇器前綴法 ）; （ 3）html 頭部引用（ if IE ）hack ：針對所有 IE ： ，針對 IE6 及以下版本： ，這類 Hack 不僅對 CSS 生效，對寫在判斷語句里面的所有代碼都會生效（也叫 條件注釋法 ）。18.3 請簡述 css 加載方式 link和import的

9、區(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)核火狐： -

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

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

12、available /服務(wù)器當(dāng)前不能處理客戶端的請求，一段時間后可能恢復(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)簽？ 頭部 導(dǎo)航 鏈接 側(cè)邊 欄 列表 內(nèi) 容 腳部 圖片 塊容器25.1

13、 HTML5有哪些新特性？用于繪畫的canvas元素?用于媒介回放的video和 audio元素?對本地離線存儲的更好的支持?新的特殊內(nèi)容元素，比如article 、 footer 、 header 、 nav 、 section?新的表單控件，比如calendar 、 date 、 time 、 email 、 url 、search25.2 HTML5有哪些新的API ？1. 選擇器： querySelector， querySelectorAll document. querySelectorAll( “.head” );2.Canvas API：有關(guān)動態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動畫

14、的API 。3. 音頻與視頻 API 。4. 離線存儲 API5. 通訊 API6. 文件操作7. 地理位置 API8. 拖放 API26.CSS3 新增偽類有那些？p:first-of-type選擇屬于其父元素的首個 元素的每個 元素。p:last-of-type選擇屬于其父元素的最后 元素的每個 元素。p:only-of-type選擇屬于其父元素唯一的 元素的每個 元素。p:only-child選擇屬于其父元素的唯一子元素的每個 元素。p:nth-child(2)選擇屬于其父元素的第二個子元素的每個 元素。:enabled、:disabled 控制表單控件的禁用狀態(tài)。:checked，單選

15、框或復(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 ）對象類型：abject（ null ） 未定義類型：underfined （ underfin

16、ed ）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 的口號）；性能更好，幾乎解決了所有的瀏覽器兼容問題；缺點：不能向后兼容；插件的兼容性（各版本之間不能很好的兼容），在同一個頁面使用多個插件可能會出現(xiàn)沖突現(xiàn)象；穩(wěn)定性方面也有

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

18、Query HTML5 CSS3 （移動端框架： jQuery mobile Phonegap Bootstra 移動端開發(fā)工具等）精通 JavaScript鋒利的 jQuery 編寫高質(zhì)量代碼： web 前端開發(fā)修煉之道SEO 教程：搜索引擎優(yōu)化入門與進(jìn)階29.documen.write和 innerHTML有什么區(qū)別？DOM 的 innerHTML是 DOM 元素對象的一個屬性而 write 是 document 對象的一個方法29.1 用 JavaScript怎么判斷谷歌瀏覽器？var isChrome = window.navigator.userAgent.indexOf(Chrom

19、e) != -1; alert(isChrome);if (isChrome) alert( 是 Chrome 瀏覽器 ); else alert( 不是 Chrome 瀏覽器 );30.JSON 是什么？JSON 是一種輕量級的數(shù)據(jù)交換格式。它是基于JS 的一個子集。數(shù)據(jù)格式簡單, 易讀寫 ,占用帶寬小age:12, name:back31.ajax是什么 ?ajax 的交互模型 ?同步和異步的區(qū)別?允許瀏覽器與服務(wù)器端通信（進(jìn)行數(shù)據(jù)交換）而無需刷新當(dāng)前頁面的技術(shù)1. 通過異步模式，提升了用戶體驗2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用3. Ajax 在客戶

20、端運行，承擔(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、破壞了程序的異常機(jī)制。5、不容易調(diào)試。32.你常用那些js 框架？jQuerySencha Ext JS（4.0 版本后要收費）33.工作流程，你怎么來實現(xiàn)頁面設(shè)計圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作?34.介紹項目經(jīng)驗、合作開發(fā)、獨立開發(fā)。35.開發(fā)過程中遇到困難，如何解決。36.對前端界面工程師這個

21、職位是怎么樣理解的？它的前景會怎么樣？前端是最貼近用戶的程序員，比后端、數(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)雅降級和漸進(jìn)增強(qiáng)？優(yōu)雅降級 /平穩(wěn)退化： Web 站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代