1.Doctype?嚴格模式與混雜模式-如何觸發這兩種模式區分它們有何意義?
第一種回答:用於聲明文檔使用那種規範(html/Xhtml)一般爲嚴格過度基於框架的html文檔
加入XMl聲明可觸發,解析方式更改爲IE5.5 擁有IE5.5的bug
第二種回答:!DOCTYPE聲明位於文檔中的最前面的位置,處於html標籤之前。此標籤可告知瀏覽器文檔使用哪種HTML或XHTML規範。
該標籤可聲明三種DTD類型,分別表示嚴格版本、過渡版本以及基於框架的HTML文檔。
當瀏覽器廠商開始創建與標準兼容的瀏覽器時,他們希望確保向後兼容性。爲了實現這一點,他們創建了兩種呈現模式標準模式和混雜模式(quirks mode)。在標準模式中,瀏覽器根據規範呈現頁面;在混雜模式中,頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式通常模擬老式瀏覽器(比如Microsoft IE 4和Netscape Navigator 4)的行爲以防止老站點無法工作。
Mozilla和Safari還有第三種模式,稱爲"幾乎標準的模式(almost
standards mode)",除了在處理表格的方式上有一些細微的差異之外,這種模式與標準模式相同。
如何觸發這兩種模式:
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE,那麼它一般以標準模式呈現。對於HTML 4.01文檔,包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現,但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致
HTML和XHTML文檔以混雜模式呈現。
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 ,margin,padding
3.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件,容易維護、改版方便,不需要變動頁面內容、提供打印版本而不需要複製內容、提高網站易用性;
4.xhtml和html有什麼區別
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.標籤上title與alt屬性的區別是什麼?
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聲明,IE7、IE8、Firefox、Chrome等瀏覽器認識;
而在怪異模式中,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.編寫一個數組去重的方法