1. 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不僅對用戶友好，對搜索引擎也友好。
;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 前端或者 JavaScript 面試筆試題有哪些
一、不定項選擇題（每題3分，共30分）x0dx0a1.聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（D）x0dx0aA.varobj=[name:"zhangsan",show:function(){alert(name);}];x0dx0aB.varobj={name:」zhangsan」,show:」alert(this.name)」};x0dx0aC.varobj={name:」zhangsan」,show:function(){alert(name);}};x0dx0aD.varobj={name:」zhangsan」,show:function(){alert(this.name);}};x0dx0a2.以下關於Array數組對象的說法不正確的是（CD）x0dx0aA.對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數x0dx0aB.reverse用於對數組數據的倒序排列x0dx0aC.向數組的最後位置加一個新元素，可以用pop方法x0dx0aD.unshift方法用於向數組刪除第一個元素x0dx0a3.要將頁面的狀態欄中顯示「已經選中該文本框」，下列JavaScript語句正確的是（A）x0dx0aA.window.status=」已經選中該文本框」x0dx0aB.document.status=」已經選中該文本框」x0dx0aC.window.screen=」已經選中該文本框」x0dx0aD.document.screen=」已經選中該文本框」x0dx0a4.點擊頁面的按鈕，使之打開一個新窗口，載入一個網頁，以下JavaScript代碼中可行的是（AD）x0dx0aA.