web前端面试题(一)
2021-05-16 22:29
标签:checkbox mit 别人 不能 flow 简单 大小 html dom 服务器 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.Hello B.Hello C.Hello D. 答案:B 1.6 在标签中,下列哪个属性用于给参数传递内容() A.Address B.Value C.Amount D.Method 答案:B 1.7 一个文件夹名称叫Parent,其下有一个叫做test.asp的文件,和一个名为Child的文件夹。Child下有一个名为default.htm文件,想在default.htm中作一个连接,链到test.asp。以下正确的是() A.… B.… C.… D.… 答案: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. B. C. D. 答案:D 1.15 请选择产生斜体字的HTML标签() A. B. C. D. 答案:A 1.16 如何制作电子邮件链接() A. B. C. D. 答案:C 1.17 如何在新窗口打开链接() A. B. C. D. 答案:B 1.18 哪个HTML标签可用来定义内部样式表() A. B. C. 答案: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中,可使所有 元素变为粗体的正确语法是() A. B. 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表单的首要标记是1 选择题
B.
C.
D.javascript:history.back()”>返回
答案: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前端面试题(一)
标签:checkbox mit 别人 不能 flow 简单 大小 html dom 服务器
原文地址:http://www.cnblogs.com/yingzi1028/p/7712685.html