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前端开发笔试题