web前端面試題及答案

1、web前端面試題及答案1 .WEB標準以及 W3C標準是什么？標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結構行為表現(xiàn)的分離。1.1 div中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 表

2、單中input標簽的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)元

3、素和塊級元素有什么區(qū)別？行內(nèi)元素不可以設置寬高，不獨占一行； 塊級元素可以設置寬高，獨占一行。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簡潔的代碼，能使樣式和結構分離；7 .說說display屬性有哪些？可以做什么？displa

4、y: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選擇符有哪些？8.1 d 選擇器（# 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 - c

5、hild ）9 .哪些css屬性可以繼承?可繼承：font-size font-family color, ul li dl dddt;（字體屬性和列表屬性）不可繼承 ：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、.前端頁面由哪三層構成，分別是什么？作用是什么？結構層 Html（頁面結構內(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.什么是語

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

8、.Clearfix:after content: “ ； display:block;height:。; 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

9、,比如IE6能識別“_” “*”，IE7 能識別“*”等（也叫類內(nèi)屬性前綴法）；（2）. 選擇器 hack :例如 IE6 能*html .class;IE7能識別*+html .class （也叫選擇器前綴 法）；（3） html頭部引用（if IE） hack :針對 所有 IE :<!-ifIE><!-您的代碼-><!endif-> ,針對 IE6 及以下版本：<!-if ltIE 7><!-您的代碼-><!endif-> ,這類 Hack 不僅對CSS生效，對寫在判斷語句里面的所有 代碼都會生效（也叫條件注釋法）。

10、18.3請簡述css加載方式link 和import 的區(qū)別？1 . link屬于XHTML標簽，而import完全是 CSS提供的一種方式。2 .加載順序的差別：前者在頁面加載的時候就 同時加載進來，而后者是在頁面完全加載完再加 載3 .兼容性的差別：前者可以兼容全部，后者只 有在IE5以上才能被識別；4,使用JavaScript DOM 控制樣式的差別：只 能控制link標簽，不能控制 import19 .display:none 和 visibility:hidden 的區(qū)別是什么？visibility: hidden一 將元素隱藏）但是還占著 位置。display: none-將元素的

11、顯示設為無）不 占 任何的位置。19.1 五大瀏覽器的內(nèi)核火狐：-moz- IE : -ms-歐朋：-o-谷歌和蘋 果：-webkit-20 .說出幾種IE6 BUG的解決方法1.雙邊距 BUG float引起的解決：使用 display:inline2.3像素問題 使用float引起的 解決：使用 dislpay:inline -3px3.超鏈接hover點擊后失效解決：使用正 確的書寫順序 link visited hover active1.1 e z-index問題解決：給父級添加 position:relative5 .Png透明解決：使用js代碼6 .Min-height 最小高度

12、！ Important 解決 7.img 出現(xiàn)邊框 border:none;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請求資源不存在，輸入了錯誤的URL500 Internal Server Error 服務器發(fā)生不可預期的錯誤

13、503 Server Unavailable服務器當前不能處理客戶端的請求，一段時間后可能恢復正常23 .如何優(yōu)化網(wǎng)頁加載速度？1 .減少css, js文件數(shù)量及大?。p少重復性代 碼，代碼重復利用），壓縮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 , querySelectorAll document. querySelectorAll( ".head");

15、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-child選擇屬于其父元素的唯一

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

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

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

19、是總有一個原則，I 那就是this指的是調(diào)用函數(shù)的那個對象。this 一般情況下：是全局對象Global。作為方法調(diào)用，那么this就是指這個對象28.1 前端技術有哪些？還有哪些相關的書籍？JavaScript jQuery HTML5 CSS3 （移動端框架：jQuery mobile PhonegapBootstra移動端開發(fā)工具等）精通JavaScript »鋒利的jQuery »編寫高質(zhì)量代碼： web前端開發(fā)修煉之道 SEO教程：搜索引擎優(yōu)化入門與進階29 .documen.wHte 和 innerHTML 有什么區(qū)別？DOM 的innerHTML 是DOM 元

20、素對象的一個屬性而write是document對象的一個方法29.1 用JavaScript怎么判斷谷歌瀏覽器？script type="text/javascript">varisChrome=window.navigator.userAgent.indexOf("Chrome ")!= -1;alert(isChrome);if (isChrome) alert("是 Chrome 瀏覽器"); else alert("不是 Chrome 瀏覽器")；</script>30 .JSON是什么？

21、JSON是一種輕量級的數(shù)據(jù)交換格式。它是基 于JS的一個子集。數(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)不刷新（局部刷新）

22、3 .ajax的缺點：1、ajax不支持瀏覽器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、

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