web前端面试题

Posted 2020-10-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="[email protected]">

B. <mail href="[email protected]">

C. <a href="mailto:[email protected]">

D. <mail>[email protected]</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);    //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怎么实现继承？

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

重新理解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的开发人员工具

以上是关于web前端面试题的主要内容，如果未能解决你的问题，请参考以下文章

史上最全前端面试题(含答案) - Web开发面试题

web前端面试题