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("http://www.w3schools.com","window2")

B.  window.open("http://www.w3schools.com","window2")

C.  new("http://www.w3schools.com","window2")

D.  new.window("http://www.w3schools.com","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”在哪些场景下使用分别代表什么?

答案摘自:浅析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); //
}
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); //
}
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); //
}
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怎么实现继承?

原型链、借用构造函数、组合继承、原型式继承、寄生组合继承(最佳方式)、原型式、寄生式。

重新理解JS的6种继承方式

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框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。
5、另外,像其他方面的一些问题,比如说违背了url和资源定位的初衷。例如,有一个url地址,如果采用了ajax技术,也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
6、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,如手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的。

2.8   曾经常使用的开发调试工具?

常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具

上一篇:记一次项目上线后Log4j2不输出日志的坑


下一篇:Ubuntu中如何打开终端terminal