web前端面試題及答案分解

1、1. WEB標準以及 W3C標準是什么？ 標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。 1.1div中img怎么水平和垂直居中？ Divwidth:200px;height:200px;text-alig n:cen ter;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

2、表單中in put標簽的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 img em br i spa n in put select 塊級元素：div p h1-h6 form ul dl ol table 4. 行內(nèi)

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

4、display: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標簽選擇器（div, h1, p） 4. 相鄰選擇器（h1 + p） 5. 子選擇器（ul id class 標簽 !important比內(nèi)聯(lián)優(yōu)先級高 * 優(yōu)先級就近原則，樣式定義最近者為準； * 以最后載入的樣式為準； 11. text-align:center 和 line-

5、height 有什么區(qū)別？ text-align是水平對齊，line-height是行間。 12. 前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？ 結(jié)構(gòu)層Html（頁面結(jié)構(gòu)內(nèi)容，骨架）表示層CSS（網(wǎng)頁的樣式和外觀） 行為層js（實 現(xiàn)網(wǎng)頁的交互，動畫效果） 13. 標簽上title與alt屬性的區(qū)別是什么？ Alt是圖片屬性，讓搜索引擎認識你的圖片。當(dāng)圖片不顯示的時候顯示。 title是網(wǎng)站標題，是seo中最重要的屬性。 14. 使用css精靈有什么優(yōu)缺點？ 優(yōu)：Css精靈 把一堆小的圖片整合到一張大的圖片上，減輕HTTP的請求數(shù)量（HTTP 連接數(shù)對網(wǎng)站的加載性能有重要影響）。能夠提升網(wǎng)站

6、性能 缺：可維護性方面，如要改變局部一張小圖，就要很繁瑣，而且算圖片的位置也很麻煩； 15. 什么是語義化的 HTML ？ 標簽使用的合理性，對于搜索引擎的抓取有好處。 16. b標簽和strong標簽,i標簽和em標簽的區(qū)別？ 后者有語義，前者則無。 17. tite與h1的區(qū)別。 title側(cè)重于網(wǎng)站信息標題 從文章而言，h1側(cè)重于文章主題 站在seo的角度看，好網(wǎng)站少不了title，好文章少不了 h1標題，title權(quán)重高于h1。 18. 清除浮動的幾種方式，各自的優(yōu)缺點 1. 使用空標簽清除浮動clear:both （缺點，增加無意義的標簽） 2. 使用 oveflow:auto （使

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

8、k為不同版本的瀏覽器定制編寫不同的CSS效果。 有三種表達方式：（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 的區(qū)別？ 1. lin

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

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

11、8.為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的 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 /請求資源不存在，輸入了錯誤的 URL 500 Internal Server Error/服務(wù)器發(fā)生不可預(yù)期的錯誤 503 Server Un available 服務(wù)

12、器當(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和CSS 24. position屬性 absolute與 relative 的區(qū)別？ absolute絕對定位/相對于瀏覽器定位 relative相對定位/相對于前面的容器定位 25. HTML5 的有那些新標簽？ vheader頭部nav導(dǎo)航鏈接aside側(cè)邊欄varticle列 表內(nèi)容vfooter腳部 vcanvas

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

14、染圖形、圖表、圖像和動畫的API。 3. 音頻與視頻API。 4. 離線存儲API 5. 通訊API 6. 文件操作 7. 地理位置API 8. 拖放API 26. CSS3新增偽類有那些？ p:first-of-type 選擇屬于其父元素的首個 元素的每個 vp 元素。 p:last-of-type 選擇屬于其父元素的最后元素的每個 元素。 p:only-of-type 選擇屬于其父元素唯一的元素的每個 元素。 p:only-child選擇屬于其父元素的唯一子元素的每個元素。 p:nth-child（2） 選擇屬于其父元素的第二個子元素的每個元素。 :enabled、:disabled控制表

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

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

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

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

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

20、減少了帶寬占用 3. Ajax在客戶端運行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服 務(wù)器負載。 2. Ajax的最大的特點是什么。 Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新） 3. ajax的缺點： 1、ajax不支持瀏覽器back按鈕。 2、安全問題 AJAX暴露了與服務(wù)器交互的細節(jié)。 3、對搜索引擎的支持比較弱。 4、破壞了程序的異常機制。 5、不容易調(diào)試。 32. 你常用那些js框架？ jQuery Sencha Ext JS （4.0 版本后要收費） 33. 工作流程，你怎么來實現(xiàn)頁面設(shè)計圖，你認為前端應(yīng)該如何高質(zhì)量完成工作？ 34. 介紹項目經(jīng)驗、合作開發(fā)、獨立開發(fā)。

21、35. 開發(fā)過程中遇到困難，如何解決。 36. 對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？ 前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運營、安全都近。 1、實現(xiàn)界面交互 2、提升用戶體驗 3、有了 Node.js，前端可以實現(xiàn)服務(wù)端的一些事情 前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從90分進化到100分，甚至更好, 參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到 1px ； 與團隊成員，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)雅降級和漸進增強？ 優(yōu)雅降級/平穩(wěn)退化：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是 老式瀏覽器，則代碼會檢查