web前端面试题（一）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
web前端⾯试题（⼀）
1 选择题
1.1 默认情况下，使⽤P标记会形成什么效果（）
A.在⽂字P所在位置中加⼊8个空格
B.P后⾯的⽂字会变成粗体
C.开始新的⼀⾏
D.P后⾯的⽂字会变成斜体
答案： C
1.2 META元素的作⽤是什么（）
A.META元素⽤于表达HTML⽂档的格式
B.META元素⽤于指定相关HTML⽂档的信息
C.META元素⽤于实现本页的⾃动刷新
D.以上都不对
答案：B
1.3 我们在HTML页⾯中制作了⼀个图像，想要在⿏标指向这个图像时浮出⼀条信息，应该使⽤哪个参数做（）
A.POP
B.SRC
C.ALT
D.MSG
答案：C
1.4 使⽤以下哪⼀种元素可以将声⾳添加到⽹页⾥⾯（）
A.sound
B.bgsound
C.music
D.voice
答案：B
1.5 以下HTML代码中，哪⼀个是将词语“Hello”显⽰为Verdana字体并且字号为5号的正确代码（）
A.<font size="5" font="Verdana">Hello</font>
B.<font size="5" face="Verdana">Hello</font>
C.<font size=5 face=Verdana>Hello</font>
D.<font size=5 face="Verdana",text="Hello"</font>
答案：B
1.6 在<param>标签中，下列哪个属性⽤于给参数传递内容（）
A.Address
B.Value
C.Amount
D.Method
答案：B
1.7 ⼀个⽂件夹名称叫Parent，其下有⼀个叫做test.asp的⽂件，和⼀个名为Child的⽂件夹。
Child下有⼀个名为default.htm⽂件，想在default.htm中作⼀个连接，链到test.asp。
以下正确的是（）
A.<a href=“/test.asp”>…</a>
B.<a href=“c:/test.asp”>…</a>
C.<a href=“‥/test.asp”>…</a>
D.<a href=“Parent/test.asp”>…</a>
答案：C
1.8 Window对象是代表InternetExplorer窗⼝的对象，其属性、⽅法和事件可以不经限定就可以直接使⽤。
⽐如Window.Alert“stop”也可以直接写成：Alert“stop”这种说法是正确的还是错误的（）
A.正确
B.错误
答案：A
1.9 语句A：HTML⽂档必须包括“头”和“主体”两部分语句B：HTML⽂档的扩展名为.htm或.html以下说法正确的是：
A.两句都对
B.两句都错
C.只有A对
D.只有B对
答案：D
1.10 要将表格中的⽂字放在靠上居中的位置，应该怎么办( )
A.align="middle" align="top"
B.align="center" align="top"
C.valign="middle" align="top"
D.valign="top" align="center"
答案：D
1.11 下⾯语句表述正确的是（）
A. marginwidth=5表⽰框架宽度部分边缘所保留的空间。
B.marginwidth=5表⽰框架宽度空间
C.noresize是设定不⽤使⽤框框的⼤⼩
D.noresize是使⽤者设定此参数后，可随意地拉动框架改变其⼤⼩。
答案：A
1.12 下列哪种CSS样式定义的⽅式拥有最⾼的优先级（）
A. 嵌⼊
B. ⾏内
C. 链接
D. 导⼊
答案：B
1.13web标准的制定者是（）
A. 微软
B. 万维⽹联盟（W3C）
C. ⽹景公司（Netscape）
D. SUN公司
答案：B
1.14 下列的HTML中哪个是最⼤的标题（）
A. <h6>
B. <head>
C. <heading>
D. <h1>
答案：D
1.15 请选择产⽣斜体字的HTML标签（）
A. <i>
B. <italics>
C. <ii>
D. <it>
答案：A
1.16 如何制作电⼦邮件链接（）
A. <a href="xxx@yyy">
B. <mail href="xxx@yyy">
C. <a href="mailto:xxx@yyy">
D. <mail>xxx@yyy</mail>
答案：C
1.17 如何在新窗⼝打开链接（）
A. <a href="url" new>
B. <a href="url" target="_blank">
C. <a href="url"target="new">
D. <a href="url" target="_parent">
答案：B
1.18 哪个HTML标签可⽤来定义内部样式表（）
A. <style>
B. <script>
C. <css>
答案：A
1.19 下列哪个选项的CSS语法是正确的（）
A. body:color=black
B. {body:color=black(body}
C. body{color: black}
D. {body;color:black}
答案：C
1.20 如何在CSS⽂件中插⼊注释（）
A. // this is a comment
B. // this is a comment
C. /*this is a comment */
D. ' this is a comment
答案：C
1.21 哪个CSS属性可控制⽂本的尺⼨（）
A. font-size
B. text-style
C. font-style
D. text-size
答案：A
1.22 以下的CSS中，可使所有<p>元素变为粗体的正确语法是（）
A. <p style="font-size:bold">
B. <p style="text-size:bold">
C. p{font-weight:bold}
D. p {text-size:bold}
答案：C
1.23 如何显⽰没有下划线的超链接（）
A. a{text-decoration:none}
B. a {text-decoration:no underline}
C. a {underline:none}
D. a {decoration:no underline}
答案：A
1.24 定义JavaScript数组的正确⽅法是（）
A. var txt = new Array="tim","kim","jim"
B. var txt = newArray(1:"tim",2:"kim",3:"jim")
C. vartxt = new Array("tim","kim","jim")
D. var txt = newArray:1=("tim")2=("kim")3=("jim")
答案：C
1.25 打开名为“window2”的新窗⼝的JavaScript语法是（）
A. open.new("","window2")
B. window.open("","window2")
C. new("","window2")
D. new.window("","window2")
答案：B
1.26 在调试前的准备⼯作下列叙述不对的是（）
A. 在“设置”列表框中找到两个“禁⽤脚本调试”复选框，将它们前⾯的钩去掉
B. 如果“禁⽤脚本调试”复选框，前⾯的钩不去掉，则不会弹出调试信息
C. “禁⽤脚本调试”复选框，前⾯的钩去掉后，当程序出错时会弹出调试信息
D. “禁⽤脚本调试”复选框，前⾯的钩去不去与调试⽆关
答案：D
1.27 关于代码优化下列表述不对的是（）
A. JavaScript程序代码编写出来后，主要是交给浏览器去运⾏
B. 尽可能使⽤全局变量，可以使代码简单
C. 书写风格应遵循“标识符短⽽含义清晰”、“代码缩进对齐”、“尽可能注释”等原则
D. 在机器上运⾏的代码总是希望其速度越快越好，阅读维护时其可读性可理解性最好
答案：B
1.28 在HTML页⾯中，CSS样式的属性名为background-image对应的style对象的属性名是（）
A.background
B.backgroungImage
C.image
答案：B
1.29 HMTL表单的⾸要标记是<form>,<form>标记的参数method表⽰表单发送的⽅法，可能为get或post，下列关于get和post的描述正确的是（）
A.post⽅法传递的数据对客户端是不可见的
B.get请求信息以查询字符串的形式发送，查询字符串长度没有⼤⼩限制
C.post⽅法对发送数据的数量限制在255个字符之内
D.get⽅法传递的数据对客户端是不可见的
答案：A
1.30 Javascript中制作图⽚代替按钮的提交效果需要⼿动提交⽅法submit()，以下调⽤正确的是（）
A.submit();
B.myform.submit()
C.document.myform.submit()
D.window.myform.submit();
答案：C
1.31 如果在HTML页⾯中包含如下图⽚标签，则选项中的（）语句能够实现隐藏该图⽚的功能（）
A.document.getElementById(“pic”).style.display=”visible”;
B.document.getElementById(“pic”).style.display=”disvisible”;
C.document.getElementById(“pic”).style.display=”block”;
D.document.getElementById(“pic”).style.display=”none”;
答案：D
1.32 在HTML页⾯上，当按下键盘上的任意⼀个键时都会触发Javascript的（）事件
A.onFocus
B.onBlur
C.onSubmit
D.onKeyDown
答案：D
1.33 下列JavaScript表达式当中，错误的是（）
A．var tempA, tempB, tempC
B．tempA *= 3
C．tempA >= tempB || tempA <= tempC
D．tempA >= tempB >tempC
答案：D
1.34 在JavaScript中，以下代码能并闭⼀个窗⼝的是（）
A．window.exit()
B．window.shutdown()
C．window.end()
D．window.close()
答案：D
1.35 下列关于⽹页元素overflow的说法，正确的是（）
A．指⽹页元素的位置，距离左边框和上边框的距离
B．指⽹页元素的位置，距离右边框和下边框的距离
C．指⽹页元素的定位⽅式，可以取值中包括absolute
D．指⽹页元素的内容溢出时，是否显⽰多余的内容
答案：D
1.36 如果将想将两个层排列在同⼀⾏中，下列描述不能实现的是（）
A．直接插⼊两个DIV标记，会⾃动排在同⼀⾏
B．指定DIV的position属性为absolute，然后将层位置拖放到同⼀⾏中
C．指定DIV标记的宽，并且指定其浮动⽅式，当层宽度之和⼩于外层元素宽度时，会排在同⼀⾏D．使⽤⼀个表格，将两个层分别放⼊⼀⾏中的两个单元格内
答案：A
1.37 下列哪个是获得某时间对象的⽉份⽅法getMonth()的特点（）
A．获取的⽉份是从1开始计数的
B．获取的⽉份是从0开始计数的
C．获取的⽉份是英⽂单词的缩写，如六⽉份为Jun
D．⽆法获取⽉份
答案：B
1.38 求⼀个表达式的值，可以使⽤的函数有（）
A．eval()
B．isNaN()
C．parseInt()
D．parseFloat()
E．return()
答案：A
1.39 以下代码能获得⽂档中的第⼀个form对象的是（）
A.document.forms[0];
B.document.forms(0);
C.document.forms.0;
D.document.forms.item(0)
答案：AD
1.40 下列选项中，（）段HTML代码所表⽰的“返回”链接能够正确实现IE⼯具栏中“后退”按钮的功能。
A.<a href=”javascript:history.go(-1)”>返回</a>
B.<ahref=”javascript:location.back()”>返回</a>
C.<ahref=”javascript: location go(-1)”>返回</a>
D.<a href=”javascript:history.back()”>返回</a>
答案：AD
2 问答题
2.1 JavaScript中“==”和“===”有什么区别？
==进⾏判断的时候，如果类型不⼀致的，会⾃动转换类型进⾏判断。
===进⾏判断的时候，如果类型不⼀致，结果直接就是不相等。
2.2 JavaScript中“this”在哪些场景下使⽤分别代表什么？
答案摘⾃：
情况⼀：全局 & 调⽤普通函数
在全局环境中，this 永远指向 window。
情况⼆：构造函数
所谓的构造函数就是由⼀个函数 new 出来的对象，⼀般构造函数的函数名⾸字母⼤写，例如像 Object，Function，Array 这些都属于构造函数。
情况三：对象⽅法
如果函数作为对象的⽅法时，⽅法中的 this 指向该对象。
注意：若是在对象⽅法中定义函数，那么情况就不同了。
var obj = {
x: 10,
foo: function () {
function f(){
console.log(this); //Window
console.log(this.x); //undefined
}
f();
}
}
obj.foo();
可以这么理解：函数 f 虽然是在 obj.foo 内部定义的，但它仍然属于⼀个普通函数，this 仍指向 window。
在这⾥，如果想要调⽤上层作⽤域中的变量 obj.x，可以使⽤ self 缓存外部 this 变量。
var obj = {
x: 10,
foo: function () {
var self = this;
function f(){
console.log(self); //{x: 10}
console.log(self.x); //10
}
f();
}
}
obj.foo();
如果 foo 函数不作为对象⽅法被调⽤：
var obj = {
x: 10,
foo: function () {
console.log(this); //Window
console.log(this.x); //undefined
}
};
var fn = obj.foo;
fn();
obj.foo 被赋值给⼀个全局变量，并没有作为 obj 的⼀个属性被调⽤，那么此时 this 的值是 window。
情况四：构造函数 prototype 属性
function Foo(){
this.x = 10;
}
Foo.prototype.getX = function () {
console.log(this); //Foo {x: 10, getX: function}
console.log(this.x); //10
}
var foo = new Foo();
foo.getX();
在 Foo.prototype.getX 函数中，this 指向的 foo 对象。
不仅仅如此，即便是在整个原型链中，this 代表的也是当前对象的值。
情况五：函数⽤ call、apply或者 bind 调⽤。
var obj = {
x: 10
}
function foo(){
console.log(this); //{x: 10}
console.log(this.x); //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();
当⼀个函数被 call、apply 或者 bind 调⽤时，this 的值就取传⼊的对象的值。
情况六：DOM event this
在⼀个 HTML DOM 事件处理程序⾥，this 始终指向这个处理程序所绑定的 HTML DOM 节点：
情况七：箭头函数中的 this
当使⽤箭头函数的时候，情况就有所不同了：箭头函数内部的 this 是词法作⽤域，由上下⽂确定。
2.3 了解或使⽤过哪些 JavaScript库或框架，它们分别有什么区别?
库：jQuery、HighCharts、ECharts。
echarts
先⼤体了解⼀下echarts的历史：
echarts是百度公司前端开发的⼀个图表库。
⽀持柱状图、饼状图、k线图、map图、热导向图、折线图
主要采⽤canvas画图。
highchart
highcharts是国外的⼀家公司开发的图表库，主要采⽤svg画图。
⽀持的图表也很多，功能也⽐较强⼤。
框架：vue.js、requirejs。
2.4 JQuery对象和dom对象怎么相互切换？
jQuery对象转成DOM对象：
两种转换⽅式将⼀个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是⼀个数据对象，可以通过[index]的⽅法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本⾝提供，通过.get(index)⽅法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是⼀个DOM对象，只需要⽤$()把DOM对象包装起来，就可以获得⼀个jQuery对象了。
$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使⽤jQuery的⽅法了。
通过以上⽅法，可以任意的相互转换jQuery对象和DOM对象。
需要再强调注意的是：DOM对象才能使⽤DOM中的⽅法，jQuery对象是不可以⽤DOM中的⽅法。
2.5 form中“readonly”和“disabled”有什么区别？
Readonly只针对input(text / password)和textarea有效，⽽disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
但是表单元素在使⽤了disabled后，当我们将表单以POST或GET的⽅式提交的话，这个元素的值不会被传递出去，⽽readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使⽤的）。
2.6 JavaScript怎么实现继承？
原型链、借⽤构造函数、组合继承、原型式继承、寄⽣组合继承（最佳⽅式）、原型式、寄⽣式。
2.7 ajax的优缺点
ajax的优点
Ajax的给开发者带来的好处⼤家基本上都深有体会，如下：
1、最⼤的⼀点是页⾯⽆刷新，在页⾯内与服务器通信，给⽤户的体验⾮常好。
2、使⽤异步⽅式与服务器通信，不需要打断⽤户的操作，具有更加迅速的响应能⼒。
3、可以把以前⼀些服务器负担的⼯作转嫁到客户端，利⽤客户端闲置的能⼒来处理，减轻服务器和带宽的负担，节约空间和宽带租⽤成本。
并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最⼤程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被⼴泛⽀持的技术，不需要下载插件或者⼩程序。
ajax的缺点
1、ajax⼲掉了back按钮，即对浏览器后退机制的破坏。
后退按钮是⼀个标准的web站点的重要功能，但是它没法和js进⾏很好的合作。
这是ajax所带来的⼀个⽐较严重的问题，因为⽤户往往是希望能够通过后退来取消前⼀次操作的。
那么对于这个问题有没有办法？答案是肯定的，⽤过Gmail的知道，Gmail下⾯采⽤的ajax技术解决了这个问题，在Gmail下⾯是可以后退的，但是，它也并不能改变ajax的机制，它只是采⽤的⼀个⽐较笨但是有效的办法，即⽤户单击后退按钮访问历史记录时，通过创建或使⽤⼀个隐藏的IFRAME来重现页⾯上的变更。
（例如，当⽤户在Google Maps中单击后退时，它在⼀个隐藏的IFRAME中进⾏搜索，然后将搜索结果反映到Ajax元素上，以便将应⽤程序状态恢复到当时的状态。
）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是⾮常⾼的，和所要求的快速开发是相背离的。
这是ajax所带来的⼀个⾮常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建⽴了⼀个直接通道。
这使得开发者在不经意间会暴露⽐以前更多的数据和服务器逻辑。
ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许⿊客从远端服务器上建⽴新的攻击。
还有ajax也难以避免⼀些已知的安全弱点，诸如跨站点脚步攻击、和基于credentials的安全漏洞等。
3、对搜索引擎的⽀持⽐较弱。
4、破坏了程序的异常机制。
⾄少从⽬前看来，像ajax.dll，ajaxpro.dll这些是会破坏程序的异常机制的。
5、另外，像其他⽅⾯的⼀些问题，⽐如说违背了url和资源定位的初衷。
例如，有⼀个url地址，如果采⽤了ajax技术，也许在该url地址下⾯看到的和别⼈在这个url地址下看到的内容是不同的。
这个和资源定位的初衷是相背离的。
6、⼀些⼿持设备（如⼿机、PDA等）现在还不能很好的⽀持ajax，如⼿机的浏览器上打开采⽤ajax技术的⽹站时，它⽬前是不⽀持的。
2.8 曾经常使⽤的开发调试⼯具？
常⽤的调试⼯具有Chrome浏览器的调试⼯具，⽕狐浏览器的Firebug插件调试⼯具，IE的开发⼈员⼯具。