web前端面試常見題型整理

1.Doctype?嚴格模式與混雜模式-如何觸發這兩種模式區分它們有何意義?

第一種回答:用於聲明文檔使用那種規範(html/Xhtml)一般爲嚴格過度基於框架的html文檔
加入XMl聲明可觸發,解析方式更改爲IE5.5 擁有IE5.5bug

 

第二種回答:!DOCTYPE聲明位於文檔中的最前面的位置,處於html標籤之前。此標籤可告知瀏覽器文檔使用哪種HTMLXHTML規範。

該標籤可聲明三種DTD類型,分別表示嚴格版本、過渡版本以及基於框架HTML文檔。

當瀏覽器廠商開始創建與標準兼容的瀏覽器時,他們希望確保向後兼容性。爲了實現這一點,他們創建了兩種呈現模式標準模式和混雜模式(quirks mode)。在標準模式中,瀏覽器根據規範呈現頁面;在混雜模式中,頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式通常模擬老式瀏覽器(比如Microsoft IE 4Netscape Navigator 4)的行爲以防止老站點無法工作。

MozillaSafari還有第三種模式,稱爲"幾乎標準的模式(almost

standards mode)",除了在處理表格的方式上有一些細微的差異之外,這種模式與標準模式相同。

如何觸發這兩種模式:

瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE,那麼它一般以標準模式呈現。對於HTML 4.01文檔,包含嚴格DTDDOCTYPE常常導致頁面以標準模式呈現。包含過渡DTDURIDOCTYPE也導致頁面以標準模式呈現,但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致

HTMLXHTML文檔以混雜模式呈現。

DOCTYPE切換是瀏覽器用來區分遺留文檔和符合標準的文檔的手段。無論是否編寫了有效的CSS,如果選擇了錯誤的DOCTYPE,那麼頁面就將以混雜模式現,但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。

2.行內元素有哪些?塊級元素有哪些?css模型?

塊級元素:div p h1 h2 h3 h4 form ul
行內元素: a b br ispan input select
Css
盒模型:內容,border ,marginpadding

3.WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率、使用外cssjs腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件,容易維護、改版方便,不需要變動頁面內容、提供打印版本而不需要複製內容、提高網站易用性;

4.xhtmlhtml有什麼區別
HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的置標語言
最主要的不同:
XHTML
元素必須被正確地嵌套。
XHTML
元素必須被關閉。
標籤名必須用小寫字母。
XHTML
文檔必須擁有根元素。

5.CSS引入的方式有哪些? link@import的區別是?
內聯內嵌外鏈導入
區別:同時加載
前者無兼容性,後者CSS2.1以下瀏覽器不支持
Link
支持使用javascript改變樣式,後者不可

一、內聯引用CSS

將STYLE屬性直接加在個別的元件標籤裏元件(標籤)STYLE=””}

這種方法優點可靈巧應用樣式於各標籤中。方便於編寫代碼時的使用。

這種方法缺點沒有整篇文件的"統一性"在需要修改某樣式的時候也變的比較困難。

二、內部引用CSS

將樣式規則寫在STYLE./STYLE標籤之中。通常是將整個的STYLE./STYLE結構寫在網頁的HEAD/HEAD部份之中。

這種方法的優點整篇文章有了統一性只要是有聲明的的元件即會套用該樣式規則。

這種方法的缺點個別元件的靈活度不足整站的功能性較弱。

三、外部引用link標籤引用CSS

將樣式規則寫在.css的樣式文件中再以link標籤引入。

link rel=stylesheettype="text/css"href="example.css"

這樣引入該css樣式表文件以後就可以直接套用該樣式檔案中所制定的樣式了。通常是將link標籤寫在網頁的head/head部份之中。

這種方法的優點可以把要套用相同樣式規則的數篇文件都指定到同一個樣式文件中可以進行統一的修改也便於整站的設置有統一的風格。

一般css網頁佈局都使用此種方法。

這種方法的缺點在個別文件或元素的靈活度不足。

四、外部引用@import引用CSS

跟link方法很像但必須放在STYLE./STYLE

@import url(引入的樣式表的位址、路徑與檔名)

STYLE TYPE="text/css"

--

@import url(css/example.css)

--

/STYLE

要注重的是行末的分號是必須的千萬不能漏寫

這種方法的優點可以靈活的引入css文件對xhtml元素進行控制。有時候也用來編寫某些css hack。

這種方法的缺點在個別文件或元素的靈活度不足。區別參考隸屬上的差別

 link屬於XHTML標籤而@import完全是CSS提供的一種方式。link標籤除了可以加載CSS外還可以做很多其它的事情比如定義RSS定義rel連接屬性等@import就只能加載CSS了。此處注意瀏覽器的linksrc爲空時候時會導致頁面加載次數增多。

@import次數限制

傳聞在IE6@import只能引入31次css文件可是可以通過在css文件中再次import來垂直擴展斷橋殘雪沒有測試過不過如果出現這樣的情況說明這個寫代碼的人也挺變態的。

加載順序的不同

當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候)link引用的CSS文件會同時被加載而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式然後突然樣式會出現網速慢的時候還挺明顯@import這點跟把CSS文件放在頁面結尾效果相同不過如果我們一些樣式開始頁面並不會出現而是在交互時纔出現的CSS樣式可以通過這個方法引入時間上錯開。例如Ajax的html交互時的彈出框彈出div

兼容性上的差別

由於@import是CSS2.1提出的@import只有在IE5以上的才能識別而link標籤無此問題(似乎影響不大~)。

使用DOM控制樣式時的差別

當使用javascript控制DOM(document.styleSheets)去改變樣式的時候只能使用link標籤因爲@import不是dom可以控制的。

6.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
第一種回答:標籤選擇符類選擇符 id選擇符
繼承不如指定Id>class>標籤選擇
後者優先級高

第二種回答:ID和CLASS Class可繼承

僞類A標籤可以繼承

列表UL LIDL DD DT可繼承

有一些屬性不能被繼承border,margin,padding,background等。

優先級就近原則樣式定義最近者爲準

載入樣式以最後載入的定位爲準

優先級爲

HTML標記的權重是1,CLASS的權重是10,ID的權重是100繼承的權重爲0(後面會講到)。

important[id class tag]

Important比內聯優先級高

7:前端頁面有哪三層構成分別是什麼?作用是什麼?

網頁的結構層(structural layer)由HTML或XHTML之類的標記語言負責創建。標籤也就是那些出現在尖括號裏的單詞對網頁內容的語義含義做出了描述但這些標籤不包含任何關於如何顯示有關內容的信息。,

網頁的表示層(presentation layer)由CSS負責創建。CSS對"如何顯示有關內容"的問題做出了回答。

網頁的行爲層(behavior layer)負責回答"內容應該如何對事件做出反應"這一問題。這是Javascript語言和DOM主宰的領域。

8,css的基本語句構成是?

選擇器{屬性1值1屬性2值2…}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐(Gecko谷歌(webkit opear(Presto)

10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的使用display
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.select
ie6下遮蓋使用iframe嵌套
8.
爲什麼沒有辦法定義1px左右的寬度容器(IE6默認的行高造成的,使用over:hidden,zoom:0.08 line-height:1px
11.標籤上titlealt屬性的區別是什麼?
Alt 當圖片不顯示是用文字代表。
Title
爲該屬性提供信息
12.
描述css reset的作用和用途。
Reset重置瀏覽器的css默認屬性瀏覽器的品種不同,樣式不同,然後重置,讓他們統一
13.解釋css sprites,如何使用。
Css 精靈把一堆小的圖片整合到一張大的圖片上,減輕服務器對圖片的請求數量
14.
瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型渲染模式的不同
使用window.top.document.compatMode 可顯示爲什麼模式

所謂的標準模式是指,瀏覽器按W3C標準解析執行代碼;

怪異模式則是使用瀏覽器自己的方式解析執行代碼,因爲不同瀏覽器解析執行的方式不一樣,所以我們稱之爲怪異模式。

瀏覽器解析時到底使用標準模式還是怪異模式,與你網頁中的DTD聲明直接相關,DTD聲明定義了標準文檔的類型(標準模式解析)文檔類型,會使瀏覽器使用相應的方式加載網頁並顯示,忽略DTD聲明,將使網頁進入怪異模式(quirks mode)

<html><head><title>重慶PHP</title></head><body></body></html>

  如果你的網頁代碼不含有任何聲明,那麼瀏覽器就會採用怪異模式解析,便是如果你的網頁代碼含有DTD聲明,瀏覽器就會按你所聲明的標準解析。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>重慶PHP</title></head><body></body></html>

上面的代碼,瀏覽器會按HTML 4.01的標準進行解析。
到底標準模式和怪異模式有什麼不同呢?標準模式中
IE6
不認識!important聲明,IE7IE8FirefoxChrome等瀏覽器認識;

而在怪異模式中,IE6/7/8都不認識!important聲明,這只是區別的一種,還有很多其它區別。所以,要想寫出跨瀏覽器的CSS,你必須採用標準模式。好像太絕對了,呵呵。好吧,要想寫出跨瀏覽器CSS,你最好採用標準模式。
15.你如何對網站的文件和資源進行優化?期待的解決方案包括:
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用
16.
什麼是語義化的HTML?
直觀的認識標籤對於搜索引擎的抓取有好處
17.清除浮動的幾種方式,各自的優缺點
1.使用空標籤清除浮動 clear:both(理論上能清楚任何標籤,,,增加無意義的標籤)
2.
使用overflow:auto(空標籤元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用於兼容IE
3.
是用afert僞元素清除浮動(用於非IE瀏覽器)
Javascript
1.javascript
typeof返回哪些數據類型
Object number function boolean underfind
2.
例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number
隱式(== – ===
3.split()join()
的區別
前者是切割成數組的形式,後者是將數組轉換成字符串
4.
數組方法pop() push()unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()
頭部添加 shift()頭部刪除
5.
事件綁定和普通事件有什麼區別

6.IE
DOM事件流的區別
1.執行順序不一樣、
2.
參數不一樣
3.
事件加不加on
4.this
指向問題

7.IE
和標準下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth ||document.body.clientWidth
Var target = ev.srcElement||ev.target

8.ajax
請求的時候get post方式的區別
一個在url後面一個放在虛擬載體裏面
有大小限制
安全問題
應用不同一個是論壇等只需要請求的,一個是類似修改密碼的
9.call
apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

10.ajax
請求時,如何解釋json數據
使用eval parse 鑑於安全性考慮使用parse更靠譜
11.b繼承a的方法

12.
寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

13.
事件委託是什麼
讓利用事件冒泡的原理,讓自己的所觸發的事件,讓他的父元素代替執行!
http://www.webasily.com/?p=78
例子可見此鏈接
14.
閉包是什麼,有什麼特性,對頁面有什麼影響
閉包就是能夠讀取其他函數內部變量的函數。
http://blog.csdn.net/gaoshanwudi/article/details/7355794
此鏈接可查看(問這個問題的不是一個公司)
15.
如何阻止事件冒泡和默認事件
canceBubble return false
16.
添加刪除替換插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.
解釋jsonp的原理,以及爲什麼不是真正的ajax
動態創建script標籤,回調函數
Ajax
是頁面無刷新請求數據操作
18.javascript
的本地對象,內置對象和宿主對象
本地對象爲array objregexp等可以new實例化
內置對象爲gload Math 等不可以實例化的
宿主爲瀏覽器自帶的document,window
19.documentload
document ready的區別
Document.onload 是在結構和樣式加載完才執行js
Document.ready
原生種沒有這個方法,jquery中有 $().ready(function)
20.”==”
“===”的不同
前者會自動轉換類型
後者不會
21.javascript
的同源策略
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性,這裏的同一來源指的是主機名、協議和端口號的組合
22.
編寫一個數組去重的方法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章