web前端開發考試題

Ⅰ Web前端面試題小集

一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化(比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800)，請寫出大概的css代碼。


1.使用flex

//html

Ⅱ 有哪些經典的 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>青山綠水

Ⅲ Web前端面試之css高頻面試題

今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。


1.什麼是BFC機制


BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。


·___シ⑻跫(以下任意一條)


§_loat的值不為none


§_verflow的值不為visible


§_isplay的值為table-cell、tabble-caption和inline-block之一


§_osition的值不為static或則releative中的任何一個


在IE下,Layout,可通過zoom:1_シ


·___FC布局與普通文檔流布局區別:


BFC布局規則:


1._浮動的元素會被父級計算高度(父級元素觸發了BFC)


2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)


3._margin不會傳遞給父級(父級觸發BFC)


4._屬於同一個BFC的兩個相鄰元素上下margin會重疊


5._普通文檔流布局:浮動的元素是不會被父級計算高度


6._非浮動元素會覆蓋浮動元素的位置


7._margin會傳遞給父級元素


8._兩個相鄰元素上下的margin會重疊


·___⒅械撓τ


§_柚_argin重疊


§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)


§_允視α嚼覆季


§_梢宰柚乖乇桓《馗哺


2.CSS3中新增的選擇器以及屬性


這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章


·___糶匝≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素


E[att$="val"]
屬性att的值以"val"結尾的元素


E[att*="val"]
屬性att的值包含"val"字元串的元素


·___峁刮崩嘌≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素


E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1


E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1


E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素


E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素


E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)


E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)


E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)


E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)


E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)


E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素


·___ss3新增屬性


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3


text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3


border-colors
為邊框設置多種顏色
FF3+


boder-image
圖片邊框
FF3.5,Safari4,Chrome3


text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10


word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3


border-radius
圓角邊框
FF3+,Safari4,Chrome3


opacity
不透明度
all


box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3


outline
外邊框
FF3+,safari4,chrome3,opera10


background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10


background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+


background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3


rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10


3.居中布局


·___驕又


1._行內元素:_ext-align:center


2._塊級元素:_argin:0auto


3._絕對定位和移動:_bsolute+transform


4._絕對定位和負邊距:_bsolute+margin


5._flex布局:_lex+
justify-content:center


·___怪本又


1._子元素為單行文本:_ine-height:height


2._absolute+transform


3._flex+align-items:center


4._table:_isplay:table-cell;vertical-align:
middle


5._利用position和top和負margin


·___醬怪本又_HAPE*MERGEFORMAT


1.已知元素寬高:絕對定位+margin:auto:


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


2.已知元素寬高:_遠ㄎ+負margin


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


3.absolute+transform


_div{
__width:200px;
__height:200px;
__background:
green;

__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}


4.flex+justify-content
+align-items


.box{
_height:600px;

_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_


4.清除浮動有哪些方法,各有什麼優缺點


·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如

Ⅳ 2020年Web前端面試題及答案匯總

今天小編要跟大家分享的文章是關於2020年Web前端面試題及答案匯總。正准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。

一、Mysql資料庫


1.MySQL中varchar與char的區別以及varchar(50)中的50代表的涵義?


答案：


Varchar是變長字元串，最多存儲的大小是65535位元組，查詢速度相對較慢;Char
是定常字元串，最多存儲的大小是255位元組，查詢速度相對較快;


varchar(50)表示：Mysql4.0表示存放50個位元組，5.0存放50個字元。


2.簡述瀏覽器打開#顯示頁面，中間都經過哪些過程?


答案：


向DNS伺服器獲取域名對應的IP地址並返回瀏覽器，通過IP地址向Web伺服器發請求，Web伺服器從文件伺服器獲取網頁中所需要的文件，從資料庫伺服器獲取網頁中所需要的數據，最後講完整的網頁相應給瀏覽器。


3.如何解決MySQL中存儲中文亂碼問題?


答案：


腳本文件採用UTF8編碼


客戶端連接資料庫使用UTF8編碼


伺服器端創建資料庫使用UTF8編碼


4.Float和Double的區別是什麼?


答案：


FLOAT(單精度浮點數)類型數據可以存儲至多8位十進制數，並在內存中佔4位元組。


DOUBLE(雙精度浮點數)類型數據可以存儲至多18位十進制數，並在內存中佔8位元組。


5.把數據id等於1的名字oldboy更改為oldgirl?


答案：


updatetestsetname='oldgirl'whereid=1;


6.如何登錄mysql數據?


答案：


mysql-uroot。


二、JS基礎


1.continue和break有什麼區別?


答案：


break和continue都是用來控制循環結構的：


break終止循環，跳出循環體執行循環後面的語句。


continue跳過本次循環，執行下一次循環。


2.i++和++i的區別?


答案：


i++：先用i值後加1,


++i：先加1後用i值，


計算：varn=5;求varnum=n+++++n+n+++++n+n;//37


3.JavaScript都有哪些數據類型?


答案：


原始類型：數值型/字元串型/布爾型/undefined/null


引用類型：對象


4.自調用函數是什麼?用於什麼地方?


答案：立即執行的函數。(function(){//函數體})();


用於創建一個局部作用域。


5.slice和splice有什麼區別?


答案：


slice截取子數組，從指定的數組中，截取幾個連續的元素組成一個新數組


splice允許從指定數組中，刪除一部分元素，同時再添加另一部分元素


6.typeof返回的類型有哪些?


答案：


number、string、boolean、undefined、object、function


ex:


vararr=[1,2,3,4,5];


console.log(typeof(arr));//object


functionmyDemo(){


returnfunctiontest(){};


}


console.log(typeof(myDemo()));//function


7.取1~11之間的隨機數(即包括1不包括11)?


答案：


Math.floor(Math.random()*10+1)


parseInt(Math.random()*10+1)


8.什麼是變數聲明提前?


答案：


使用var關鍵字聲明的變數，會將聲明提升到所在作用域的最前邊。。


9.push、pop、shift和unshift區別?


答案：


這兩組同為對數組的操作，並且會改變數組的本身的長度及內容。


不同的是push()、pop()是從數組的尾部進行增減，unshift()、shift()是從數組的頭部進行增減。。


10.例舉4種強制類型轉換和3種隱式類型轉換?


答案：


強制轉換：parseInt/parseFloat/Number/toString


隱式轉換：


字元串+數值數值轉字元串


數值+布爾型布爾型中true轉為1，false轉為0


字元串+布爾型布爾型轉為字元串。


11.函數聲明與函數表達式的區別?


答案：


相同點：兩者都可以創建函數。


不同點：函數聲明可以存在函數提升(前)，函數表達式不存在函數提升(前)。


//函數聲明


functionmyFunction(){


functioninnerFunction(){}


}


//以下為函數表達式


varmyFunc=function(){};


myFunc(function(){


returnfunction(){};


});


12.請指出JavaScript宿主對象和原生對象的區別?


答案：


宿主對象：指JavaScript解釋器提供的對象，由解釋器廠家自定義並提供實現，不同的解釋器提供的擴展對象存在較大的差異(DOM和BOM對象)。


原生對象：JavaScript語言本身預定義的對象，在ECMAScript標准中定義，由所有的解釋器廠家來提供具體實現(Array,Date,Math,Number,String,Boolean等)。


13.js中有哪些內置函數?


答案：Object,Array,Boolean,Number,String,Function,Date,Math,RegExp,
Error,Global


14.列舉出獲取日期相關函數


答案：


console.log(Date.now());//返回當前日期和時間񟬢/01/0100:00:00'之間的毫秒值


vardt=newDate();//獲取當前時間---年月日時分秒


console.log(dt.getTime());//返回當前日期和時間񟬢/01/0100:00:00'之間的毫秒值


console.log(dt.getFullYear());//年份


console.log(dt.getMonth()+1);//月份(0-11)


console.log(dt.getDate());//日期(0/1-31)


console.log(dt.getDay());//星期(0-6)


console.log(dt.getHours());//小時(0-23)


console.log(dt.getMinutes());//分鍾(0-59)


console.log(dt.getMilliseconds);//返回毫秒(0-999)


console.log(dt.getSeconds());//秒(0-59)


15.Math相關函數


答案：


Math.random()-返回0~1之間的隨機數


Math.abs(x)-返回數的絕對值


Math.ceil(x)-向上取整


Math.floor(x)-向下取整


Math.round()四捨五入


Math.max()和Max.min()獲取一組數據中的最大值和最小值


Math.PI獲取圓周率π的值Math.pow()獲取一個值的多少次冪


Math.sqrt()對數值開方


Math.pow(10，2)=100;


Math.sqrt(100)=10;


16.null和undefined的區別?


答案：


undefined是訪問一個未初始化的變數時返回的值，


null是訪問一個尚不存在的對象時所返回的值。因此，可以把undefined看作是空的變數，而null看作是空的對象。


17.==和===有什麼不同?


答案：


==抽象相等，比較時，會先進行類型轉換，然後再比較值;


===嚴格相等，判斷兩個值相等同時數據類型也得相同。


18.setTimeout和setInterval的區別是什麼?


答案：


二者都是用來設置定時操作的。


setTimeout:設置一個定時器，在定時器到期後執行一次函數或代碼段


setInterval:設置一個定時器，以固定的時間間隔重復調用一個函數或者代碼段


19.請說出以下代碼執行結果


for(vari=0;i<3;i++){


setTimeout(function(){


console.log(i);


},0);


console.log(i);


}


答案：012333，執行過程如下


vari=0;


console.log(i);i++;


console.log(i);i++;


console.log(i);i++;


setTimeout(function(){console.log(i);


},0);s


etTimeout(function(){


console.log(i);


},0);


setTimeout(function(){


console.log(i);


},0);//輸出012333


20.請說出(true+flase)>2+true的執行結果


答案：false


21.當前代碼塊輸出結果是什麼?


varz=10;


functionfoo(){console.log(z);}


(function(funArg){varz=20;funArg();})(foo);


答案：10，自調用函數。


22.setTimeout(function(){},10)表示什麼意思?


答案：每隔10毫秒調用一次函數。


23.程序中捕獲異常的方法?


答案：


try{


}catch(e){


}finally{


}


24.以下代碼執行結果?


varuname='jack'


functionchange(){


alert(uname)//?


varuname='lily'


alert(uname)//?


}


change()


答案：undefinedlily


25.如何使用npm下載express模塊?


答案：npminstallexpress


26.split和join的區別?


答案：split()將字元串按照指定的字元分割成一個數組，並返回


join()將數組用指定的字元連接成一個字元串，並返回


27.看下列代碼會有什麼樣的輸出?


varfoo="11"+2-"1";


console.log(foo);


console.log(typeoffoo);


答案：111number


28.foo=foo||bar，這行代碼是什麼意思?為什麼要這樣寫?


答案：這種寫法稱之為短路表達式


相當於：


varfoo;


if(foo){


foo=foo;


}else{


foo=bar;


}


常用於函數參數的空判斷


29.用js實現隨機選取10_100之間的10個數字，存入一個數組，並排序


答案：


functiongetRandom(istart,iend){


variChoice=iend-istart+1;


returnMath.floor(Math.random()*iChoice+istart);


}variArray=[];


for(vari=0;i<10;i++){


varresult=getRandom(10,100);


iArray.push(result);


}iArray.sort();


30.如何獲取javascript三個數中的最大值和最小值?


答案：Math.max(a,b,c);//最大值


Math.min(a,b,c)//最小值


31.實現冒泡排序?


vararray=[5,4,3,2,1];


vartemp=0;


for(vari=0;i

for(varj=0;j

if(array[j]>array[j+1]){


temp=array[j+1];


array[j+1]=array[j];


array[j]=temp;


}


}


三、NODEJS


1.同步和非同步有何區別?


答案：


同步：指發送一個請求,需要等待返回,然後才能夠發送下一個請求，有等待過程(在一個任務進行中時不能開啟其他的任務)。


非同步：指發送一個請求,不需要等待返回,隨時可以再發送下一個請求，即不需要等待(在一個任務進行中時可以開啟其他的任務)。


2.NodeJS中有哪些類型模塊，文件操作用哪一個模塊?


答案：


模塊類型：核心模塊、自定義模塊、第三方模塊。


文件操作：fs模塊


3.對NodeJS的優點和缺點提出自己的看法?


答案：CPU密集型任務的特點是進行大量的計算，消耗CPU資源，比如計算圓周率(上千位)、對視頻進行編碼等,全靠CPU的運算能力
(一般用C語言，java)IO(Input/
Output)密集型任務，這類任務的特點是CPU消耗很少，大部分時間都在等待IO操作。常見的大部分任務都是IO密集型任務，比如Web應用(一般用腳本語言：python/Nodejs)。Nodejs設計思想中以事件驅動、非同步、非堵塞I/O密集型為核心，他提供的大多數api都是基於事件的、非同步的風格。所以非常適合處理高並發請求。此外，與Node伺服器交互的客戶端代碼是由js語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，減少了成本。


4.使用NodeJS完成登錄功能(編寫HTML頁面和路由介面中的代碼)?


答案：


HTML頁面：





用戶：



密碼：









user.js路由


constexpress=require('express');


constpool=require('../pool.js');


varrouter=express.Router();


router.post('/login',(req,res)=>{


varobj=req.body;


var$uname=obj.uname;


if(!$uname){


res.send({code:401,msg:'unamerequired'});


return;


}


var$upwd=obj.upwd;


if(!$upwd){res.send({code:402,msg:'upwdrequired'});


return;


}


varsql='SELECT*FROMxz_userWHEREuname=?ANDupwd=?'
pool.query(sql,[$uname,$upwd],(err,result)=>{


if(err)throwerr;


if(result.length>0){


res.send({code:200,msg:'loginsuccess'});


}else{


res.send({code:301,msg:'loginerror'});


}});


});


//路由器導出


mole.exports=router;


5.什麼是Nodejs?


Nodejs是一個JavaScript的運行環境，是一個伺服器端的「JavaScript解釋器」，用於方便高效地搭建一些響應速度快、易於擴展的網路應用。它採用事件驅動、非同步編程，為網路服務而設計

Ⅳ 求web前端開發筆試題