1. 有哪些經典的 Web 前端或者 JavaScript 面試筆試題
、定項選擇題 （每題3共30）
1. 聲明象給加name屬性show顯示其name值代碼確（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:zhangsan,show:alert(this.name)};
C. var obj = {name:zhangsan,show:function(){alert(name);}};
D. var obj = {name:zhangsan,show:function(){alert(this.name);}};
2. 關於Array數組象說確（ CD ）
A. 數組數據排序用sort函數排序效非預期給sort函數加排序函數參數
B. reverse用於數組數據倒序排列
C. 向數組位置加新元素用pop
D. unshift用於向數組刪除第元素
3. 要頁面狀態欄顯示已經選該文本框列JavaScript語句確（ A ）
A. window.status=已經選該文本框
B. document.status=已經選該文本框
C. window.screen=已經選該文本框
D. document.screen=已經選該文本框
4. 點擊頁面按鈕使打新窗口載入網頁JavaScript代碼行（ AD ）
A. button value=new
onclick=open(『new.html』, 『_blank』)/>
B. button value=new
onclick=window.location=』new.html』;/>
C. button value=new
onclick=location.assign(『new.html』);/>
D. _blankaction=new.html>
submit value=new/>
5. 使用JavaScript向網頁輸
hello
代碼行（ BD ）
A. text/javascript>
document.write(
hello
);
B. text/javascript>
document.write(
hello
);
C. text/javascript>
hello
D.
text/javascript>
document.write(hello);
6. 析面代碼：
text/javascript>
function writeIt (value) { document.myfm.first_text.value=value;}
#ffffff>
myfm>
text name=first_text>
text name=second_text>
說確（ CD ）
A. 頁面第二文本框輸入內容滑鼠離第二文本框第文本框內容變
B. 頁面第文本框輸入內容滑鼠離第文本框第二文本框復制第文本框內容
C. 頁面第二文本框輸入內容滑鼠離第二文本框第文本框復制第二文本框內容
D. 頁面第文本框輸入內容滑鼠離第文本框第二文本框內容變
7. 面JavaScript語句（ D ）實現檢索前頁面表單元素所文本框並全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==text)
form1.elements.value=";}
B. for(vari=0;i
if(forms[0].elements.type==text)
forms[0].elements.value=";
}
C. if(document.form.elements.type==text)
form.elements.value=";
D. for(vari=0;i
for(var j=0;j
if(document.forms.elements[j].type==text)
document.forms.elements[j].value=";
}
}
8. 表單(form1)文本框元素(fname)用於輸入電號碼格式：010-82668155要求前3位010緊接-面8位數字要求提交表單根據述條件驗證該文本框輸入內容效性列語句（ A ）能確實現功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=010-|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(效電號碼);
B. var str= form1.fname.value;
if(str.substr(0,4)!=010- && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(效電號碼);
C. var str= form1.fname.value;
if(str.substr(0,3)!=010-|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(效電號碼);
D. var str= form1.fname.value;
if(str.substr(0,4)!=010-&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(效電號碼);
9. 關於則表達式聲明6位數字郵編代碼確（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(\d{6});
10. 關於JavaScriptxml處理說明確（ BCD ）
A. Xml種擴展標記語言格式更規范作未html替代
B. Xml般用於傳輸存儲數據html補充兩者目同
C. JavaScript解析處理xml數據瀏覽器同其做同
D. IE瀏覽器處理xml首先需要創建ActiveXObject象
二、問答題
1. 列舉瀏覽器象模型BOM用至少4象並列舉window象用至少5 （10）
象：Window document location screen history navigator
：Alert() confirm() prompt() open() close()
2. 簡述列舉文檔象模型DOMdocument用查找訪問節點並做簡單說明 （10）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定元素名查找元素
三、程序題
1、補充按鈕事件函數確認用戶否退前頁面確認關閉窗口； （10）
text/javascript >
function closeWin(){
//處添加代碼
if(confirm(確定要退)){
window.close();
}
}
buttonvalue=關閉窗口onclick=closeWin()/>
2、寫簡單描述html標簽（帶屬性始標簽結束標簽）則表達式並字元串html標簽除掉（15）
var str = div
面段落
;
//
text/javascript>
varreg = /<\/?\w+\/?>/gi;
varstr = div
面段落
;
alert(str.replace(reg,"));
3、完foo()函數內容要求能夠彈框提示前選第幾單選框（10）
Content-Type content=text/html;charset=utf-8″ />
text/javascript >
function foo() {
//處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i
if(rdo.checked){
alert(您選擇第+(i+1)+單選框);
}
}
}
form1″ >
radio name=radioGroup/>
radio name=radioGroup/>
radio name=radioGroup/>
radio name=radioGroup/>
submit/>
4、完函數showImg()要求能夠態根據拉列表選項變化更新圖片顯示 （15）
text/javascript >
function showImg (oSel) {
//處添加代碼
var str = oSel.value;
document.getElementById(pic).src= str+.jpg;
}
picsrc=img1.jpgwidth=200″ height=200″ />
sel>
img1>城市
img2>都市早報
img3>青山綠水
2. Web前端開發筆試題
Web前端開發筆試題集錦
Web前端開發筆試題集錦：
1，截取字元串abcdefg的efg
var str = "abcdefg";
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf("efg"), 3);
alert(efg);
}
2, 判斷字元串是否是這樣組成的，第一個必須是字母，後面可以是字母、數字、下劃線，總長度為5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
3，判斷一個字元串中出現次數最多的字元，統計這個次數
//將字元串的`字元保存在一個hash table中，key是字元，value是這個字元出現的次數
var str = "abcdefgaddda";
var obj = {};
for (var i = 0, l = str.length; i < l; i++) {
var key = str[i];
if (!obj[key]) {
obj[key] = 1;
} else {
obj[key]++;
}
}
/*遍歷這個hash table，獲取value最大的key和value*/
var max = -1;
var max_key = "";
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert("max:"+max+" max_key:"+max_key);
4，IE與FF腳本兼容性 問題
(1) window.event：
表示當前的事件對象，IE有這個對象，FF沒有，FF通過給事件處理函數傳遞事件對象
(2) 獲取事件源
IE用srcElement獲取事件源，而FF用target獲取事件源
(3) 添加，去除事件
IE：element.attachEvent(onclick, function) element.detachEvent(onclick, function)
FF：element.addEventListener(click, function, true) element.removeEventListener(click, function, true)
(4) 獲取標簽的自定義屬性
IE：div1.value或div1[value]
FF：可用div1.getAttribute(value)
(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能獲取div元素
FF：可以
(6) input.type的屬性
IE：input.type只讀
FF：input.type可讀寫
(7) 是否可用id代替HTML元素
IE：可以用id來代替HTML元素
FF：不可以
(8) innerText textContent outerHTML
IE：支持innerText, outerHTML
FF：支持textContent
;3. web前端培訓課程內容有哪些
您好，web前端培訓課程的內容包括以下8個階段：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、JavaScript函數式編程、JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
4. 有哪些經典的 Web 前端或者 JavaScript 面試筆試題
一、不定項選擇題 （每題3分，共30分）
1. 聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是（ CD ）
A. 對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素，可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」，下列JavaScript語句正確的是（ A ）
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕，使之打開一個新窗口，載入一個網頁，以下JavaScript代碼中可行的是（ AD ）
A.
onclick=」open(『new.html』, 『_blank』)」/>
B.
onclick=」window.location=』new.html』;」/>
C.
onclick=」location.assign(『new.html』);」/>
D.
5. 使用JavaScript向網頁中輸出
hello
，以下代碼中可行的是（ BD ）
A.
document.write(
hello
);
B.
document.write(「
hello
」);
C.
hello
D.
document.write(「hello」);
6. 分析下面的代碼：
function writeIt (value) { document.myfm.first_text.value=value;}
以下說法中正確的是（ CD ）
A. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，第二個文本框的內容不變
7. 下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的所有文本框，並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i
for(var j=0;j
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname)，用於輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個「-」，後面是8位數字。要求在提交表單時，根據上述條件驗證該文本框中輸入內容的有效性，下列語句中，（ A ）能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼！」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
9. 關於正則表達式聲明6位數字的郵編，以下代碼正確的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(「\d{6}」);
10. 關於JavaScript里的xml處理，以下說明正確的是（ BCD ）
A. Xml是種可擴展標記語言，格式更規范，是作為未來html的替代
B. Xml一般用於傳輸和存儲數據，是對html的補充，兩者的目的不同
C. 在JavaScript里解析和處理xml數據時，因為瀏覽器的不同，其做法也不同
D. 在IE瀏覽器里處理xml，首先需要創建ActiveXObject對象
二、問答題
1. 列舉瀏覽器對象模型BOM里常用的至少4個對象，並列舉window對象的常用方法至少5個 （10分）
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 （10分）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之後關閉窗口； （10分）
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎？」)){
window.close();
}
}
2、寫出簡單描述html標簽（不帶屬性的開始標簽和結束標簽）的正則表達式，並將以下字元串中的html標簽去除掉（15分）
var str = 「
這里是div
裡面的段落
」;
//
varreg = /<\/?\w+\/?>/gi;
varstr = 「
這里是div
裡面的段落
」;
alert(str.replace(reg,」"));
3、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。（10分）
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
4、完成函數showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示 （15分）
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
5. web前端 基礎 操作題
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第一題</title>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微軟雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<buttononclick="alert('你點我了~~')">點我</button>
</form>
</body>
</html>
第一題如上（保存文件為.html形式）
---------------------------------------------------------------------------
第二題如下（html部分保存文件為.html形式，JS部分保存為.js文件。兩個文件放在同一個文件夾下，因為我的src路徑是這樣寫的，你可以改）
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第二題</title>
<scriptsrc="pulsate.js"></script>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微軟雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<button>點我</button>
</form>
</body>
</html>
下面是第二題的，JS部分：
window.onload=function(){
varbtn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
alert("哎呀，你又點我了~");
}
}加油~
6. web前端開發實訓內容
web前端開發實訓有以下內容：
1、熟練掌握html基本知識，包括每個標簽的用法等。這個建議網上找個視頻看看，因為也不會太長的，這個是前端開發的信息結構。
2、熟練掌握div+css基本知識，這個東西基本就是前端的基礎了，它可以將你寫的東西直觀的展示出效果給你看，所以須熟練掌握。而且個人由於js的不行，格外的喜歡div+css，因為不管你做了什麼，瞬間就可以看到效果，對調試、修改有很大的幫助，這個就是前端開發的顯示效果。
3、至少掌握一個後台的內容管理系統，比如現在流行的phpcms v9、dede、帝國等都是比較好用的，比如：phpcms v9、dede，畢竟技多不壓身。這個也會了，你就基本可以在本地建站了玩了，就可以用來熟悉你前面學到的html和div+css，讓自己熟練的掌握這些，並且你會發現這樣比枯燥的學習更有樂趣。知道以上這幾點，基本就可以開始玩了，將自己的想法加入到自己的程序中，將以前學的東西更加深刻的掌握，並且熟練的運用。
4、學習javascript編程，深入學習，包括jquery等框架。這個部分比較重要，也有些難度，需要花費一定的時間和精力，但是這塊學明白了，基本上前端的大多數問題也就學會了。
5、學習一門簡單的後台編程語言，比如asp或者php，推薦php，不需要學的太深入，主要為了培養編程思想。
想要了解更多有關web前端的相關信息，推薦咨詢千鋒教育。千鋒教育成立教研學科中心，推出貼近企業需求的線下技能培訓課程。採用全程面授高品質、高體驗培養模式，學科大綱緊跟企業需求，擁有國內一體化教學管理及學員服務，在職業教育發展道路上不斷探索前行。
7. web前端面試筆記，基礎題
1、讓一個p水平居中，至少寫出3中；
2、有幾種前端儲存的方式？這些方式的區別是什麼？
3、以下代碼輸出什麼？
const arr = [x=>x*1,x=>x*2,x=>x*3,x=>x*4];
console.log(arr.rece((agg,el)=>agg+el(agg),1));
4、null與undefined的區別是什麼？
6、Vue的生命周期有哪些
7、Vue組件如何通信？
8,Vue是如何實現雙向綁定的？請用代碼實現
9、實現一個防抖函授
10，實現Event(event bus)
11、實現一個call方法；
12：CSS盒子模型，
13：CSS優先順序；
14：CSS偽類；
15：vue過濾器和攔截
16：vue dom
17：js循環機制；
18：JS非同步
19：JS的數據類型分為哪2種類型；
20：forEach() 和 map() 的區別
21：js對象
22：vue搜索組件，
23：V-MODLE調用；
24：同步非同步方法；
25：js是單線程還是多線程；
單線程；
26：js循環機制
27：深拷貝和淺拷貝
28：原型鏈
29：vue通訊方式
30：數組去重,
31：小程序開發流程
32：vue生命周期
33：js跨域
34：Cookie、sessionStorage、localStorage的區別及用法
35：typeof 返回的數據類型
36：px、em、rem、rpx區別和為什麼使用62.5%；
37：vue基本命令
8. web前端筆試題(HTML/CSS篇)
web前端筆試題集錦(HTML/CSS篇)
導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。以下是由我J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。
一、HTML/CSS
1，讓一個input的背景顏色變成紅色
2，div的高寬等於瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域
思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條
(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條
(5)編寫JavaScript，另div2的高度等於頁面可見高度，寬度等於頁面可見寬度，注意，在計算完可見高度height和可見寬度width後，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px
這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。
3，IE、FF下面CSS的解釋區別
(1) 讓頁面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的設置+text-align:center
(2) ff：不支持濾鏡
ie：支持濾鏡
(3) ff：支持!important
ie支持*，ie6支持_
(4) min-width,min-height
FF支持，IE不支持，IE可以用css expression來替代
(5) Css Expression
FF不支持，IE支持
(6) cursor：hand
IE下可以顯示手指狀，FF下不行
(7) UL的默認padding和margin
IE下ul默認有margin，FF下ul默認有padding
(8) FORM的默認margin
IE下FORM有默認margin，FF下margin默認為0
4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的布局，請寫出主要的.HTML標簽及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)
5，CSS中margin和padding的區別
margin是元素的外邊框，是元素邊框和相鄰元素的距離
Padding是元素的內邊框，是元素邊框和子元素的距離
6，最後一個問題是，如何製作一個combo選項，就是可以輸入可以下拉菜單選擇。
思路：
(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇
(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指
7，
中alt和tittle的區別
alt：圖片顯示不出來了就提示alt
title：滑鼠劃過圖片顯示的提示
8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。
在這里我使用了兩種方式：
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定寬度
自適應
二者的CSS公用，如下：
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9，解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相對長度單位，相當於當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對於瀏覽器的默認字體尺寸。
該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍
10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什麼版本，其中的DTD叫文檔類型定義，裡麵包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識並展現出來
DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。
嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5隻支持混雜模式。
可那個過DOCTYPE聲明來判斷哪種模式被觸發
(1) 沒有DOCTYPE聲明的網頁採用混雜模式解析
(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析
(3) 對於瀏覽器不能識別的DOCTYPE聲明，瀏覽器採用嚴格模式解析
(4) 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如
，採用混雜模式解析，在IE7，IE8中這條規則不生效。
(5) 在ie下，如果DOCTYPE之前有任何字元，都會導致它進入混雜模式，如：
區分這兩種模式可以理解瀏覽器解析CSS的區別，主要是在盒模式的解釋上。
常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用於描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最裡面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。
11，CSS引入的方式有哪些? link和@import的區別?
引入css的方式有下面四種
(1) 使用style屬性
(2) 使用style標簽
(3) 使用link標簽
(4) 使用@import引入
Link和@import區別：
(1) link屬於XHTML標簽，@import是CSS提供的一種方式。Link除了載入CSS外，還可以做很多事情，如定義RSS，rel連接屬性等;@import只能載入CSS
(2)載入順序不同，當頁面被載入的時候，link載入的CSS隨之載入，而@import引用的CSS會等到頁面完全下載完之後才會載入
(3)兼容性差別，由於@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題
使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。
12，如何居中一個浮動元素?
一個浮動元素裡麵包含的元素可以水平居中，原理如下：
讓浮動元素left相對於父元素container右移50%，浮動元素left的子元素left-child相對於left左移50%就可以實現left-child相對於container水平居中
垂直居中類似，不過操作的不是left而是top
13，HTML5和CSS3的了解情況
有所了解
HTML5和CSS3分別是新推出的HTML和CSS規范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發出了不少基於他們的應用。
HTML5相對於原來的HTML規范有一些變化：
(1)DOCTYPE更簡潔
(2)新增了一些語義化標簽，如article,header,footer,dialog等
(3)新增了一些高級標簽，如,,
CSS3相對於CSS2也新增了不少功能
(1) 選擇器更加豐富
(2) 支持為元素設置陰影
(3) 無需圖片能提供圓角
14，你怎麼來實現下面這個設計圖
(1) 切圖
(2) 布局，採用兩欄布局，分別左浮動
(3) 編寫css代碼
15，css 中id和class如何定義,哪個定義的優先順序別高?
id：#***，***為HTML中定義的id屬性
class:.***，***為HTML中定義的class屬性
id比class的優先順序高
16，用html實現如下表格(不如嵌套實用表格)
三行三列,其中第一行第一列和第二行第一列合並; 第二行第二列和第二行第三列合並(現場畫表)
運行結果如下：
17，web標准網站有那些優點
(1) Web標准網站結構和布局分離，使網站的訪問和維護更加容易
(2) Web標准網站結構，布局以及頁面訪問都標准化，使網站能在更多的web標准設備中訪問，兼容性更好
(3) Web標准網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。
;