web前端面試題及答案

1、1. WEB標準以及W3C標準是什么？ 標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結(jié)構行為表現(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標簽

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

3、不可以設置寬高，不獨占一行; 塊級元素可以設置寬高，獨占一行。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標準；（2）兼容性好；（3）有利于搜索引擎很友好；（4）樣式的調(diào)整更加方便；（5）css簡潔的代碼，能使樣式和結(jié)構分離；7.說說display屬性有哪些？可以做什么？ display:block行內(nèi)元素轉(zhuǎn)換為塊級元素 disp

4、lay: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 < li） 6.后代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（arel = "external"） 9.偽類選擇器（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)先級算法如何計算？ !important > id > class > 標簽 !important 比 內(nèi)聯(lián)優(yōu)先級高 * 優(yōu)先級就近原則，樣式定義最近者為準; * 以最后載入的樣式為準;11.text-align:center和line-height有什么區(qū)別？ text-align是水平對齊，line-height是行間。12.前端頁面由哪三層構成，分別是什么？作用是

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

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

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

9、法）；（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和import的區(qū)別？1. link屬于XHTML標簽，而impor

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

11、幾種IE6 BUG的解決方法 1.雙邊距BUG float引起的  解決：使用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

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

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

14、;列表內(nèi)容<footer>腳部<canvas>圖片<section>塊容器25.1 HTML5有哪些新特性？用于繪畫的 canvas 元素用于媒介回放的 video 和 audio 元素對本地離線存儲的更好的支持新的特殊內(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：有關動態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動畫的API。3. 音頻與視頻 API。4. 離線存儲API5. 通訊API6. 文件操作7. 地理位置API8. 拖放API26.CSS3新增偽類有那些？ p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。 p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。 p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 p:only-chil

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

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

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

19、是調(diào)用函數(shù)的那個對象。 this一般情況下：是全局對象Global。 作為方法調(diào)用，那么this就是指這個對象28.1 前端技術有哪些？還有哪些相關的書籍？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用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是一種輕量級的數(shù)據(jù)交換格式。它是基于JS的一個子集。

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

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

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