文档视界
文档视界 最新最全的文档下载
当前位置：文档视界 › 常见前端面试题（含答案）

常见前端面试题（含答案）

常见前端面试题（含答案）

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css 实现

•

•

•

•

•

•

•

•

•

•

div{position:absolute;width:200px;height:200px;top:50%;left: 50%;margin-left:-100px;height:-100px;z-index:1000;}

2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

•

•

•

•

•

•

•

•

•

•

•

•

•

•

实现三列宽度自适应布局

我是左边
我是中间

html,body{ margin: 0px;width: 100%; } h3{height: 100px;ma rgin:20px 0 0;} #left,#right{width: 200px;height: 200px; backgro und-

color: #ffe6b8;position: absolute;top:120px;} #left{left:0px;} #ri ght{right: 0px;} #center{margin:2px 210px ;background-color: #eee;height: 200px; }

3. 如何用原生js给一个按钮绑定两个onclick事件？

•

•

•

•

•

•

•

•

•

•

•

•

•

Var btn=document.getElementById(‘btn’);//事件监听绑定多个事件var btn4 = document.getElementById('btn4');btn4.addEventListe

ner('click',hello1);btn4.addEventListener('click',hello2);

function hello1(){ alert('hello 1')}

function hello2(){ alert('hello 2');}

4.计算一个数组arr所有元素的和

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

var arr1=[1,2,3,4,5,6,7,8,9];var sum1=0;for (var i=0;i<=arr1.le ngth;i++) { if (typeof arr1[i]=='number') { sum1+=arr1[i]; } }document.write(sum1);

function sum2(arr){var

all=0;for (var i=0;i

5.编写一个方法去掉数组里面重复的内容var

arr=[1,2,3,4,5,1,2,3]

一个数组去重的简单实现

•

•

•

•

•

•

•

•

•

•

•

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];//定义一个新的数组var s = [];//遍历数组for(var i = 0;i

6.ajax的步骤

什么是ajax?ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。如何使用ajax?第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest （);XMLHttpRequest对象用来和服务器交换数据。

•

•

•

•

•

•

•

•

var xhttp;if (window.XMLHttpRequest) {//现代主流浏览器xhttp = new XMLHttpRequest();} else {// 针对浏览器，比如IE5或IE6xhttp = new ActiveXObject('Microsoft.XMLHTTP');} 第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

7. 块级元素水平垂直居中的方法有哪些（三个方法）

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

•

•

•

•

•

•

•

.mycss{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px }

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。 CSS代码：

•

•

•

•

•

•

•

•

•

•

.mycss{ position: absolute; left: 0px; right: 0; top: 0; bottom: 0; margin: auto; height: 200px; width: 300px;}

jQuery实现水平和垂直居中原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置div等块级元素的CSS。jquery代码：

•

•

•

•

•

•

•

•

•

•

•

•

•

$(window).resize(function(){ $('.myblock').css({ positio n: 'absolute', left: ($(window).width() - $('.myblock').outerWi dth())/2, top: ($(window).height() - $('.myblock').outerHeigh t())/2 }); });

//此外在页面载入时，就需要调用resize()方法$(function(){ $(window).resize();});

8.三个盒子，左右定宽，中间自适应有几种方法

第一种：左右侧采用浮动中间采用margin-left 和 margin-right 方法。代码如下：

•

•

•

•

•

这是右侧的内容固定宽度
这是左侧的内容固定宽度
中间内容，自适应宽度

第二种：左右两侧采用绝对定位中间同样采用margin-left margin-right第三种负的margin 使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧：

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

main content
l eft content
#main { float: left; width: 100%;}#mainContainer { margin: 0 230px; height: 200px; background: green;}#left { float: left; margi n-left: -100%; width: 230px}

#right { float: left; margin-left: -230px; width: 230px;}

#left .inner,#right .inner { background: orange; margin: 0 10 px; height: 200px;}

9. 如何进行网站性能优化

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化，例如Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。一、页面级优化1. JavaScript 压缩和模块打包2. 按需加载资源

3. 在使用DOM 操作库时用上 array-ids

4. 缓存

5. 启用 HTTP/2

6. 应用性能分析

7. 使用负载均衡方案

8. 为了更快的启动时间考虑一下同构

9. 使用索引

加速数据库查询10. 使用更快的转译方案11. 避免或最小化 JavaScript 和CSS 的使用而阻塞渲染12. 用于未来的一个建议：使用service workers + 流13. 图片编码优化

10. react和vue有哪些不同，说说你对这两个框架的看法

相同点:

· 都支持服务器端渲染· 都有Virtual DOM,组件化开发,通过props 参数进行父子组件数据的传递,都实现webComponent规范· 数据驱动视图· 都有支持native的方案,React的React native,Vue的weex不同点:· React严格上只针对MVC的view层,Vue则是MVVM模式· virt ual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制· 组件写法不一样, React推荐的做法是JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

11.什么是mvvm mvc是什么区别原理

一、MVC（Model-View-Controller）MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。MVC使用非常广泛，比如JavaEE中的SSH框架

二、MVVM（Model-View-ViewModel）如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel 之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

12.px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

13.优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容

14.eval()的作用

把字符串参数解析成JS代码并运行，并返回执行的结果；

•

•

•

•

•

•

•

•

•

•

eval('2+3');//执行加运算，并返回运算值。 eval('varage=10');//声明一个age变量 //eval的作用域

function a(){ eval('var x=1'); //等效于 var x=1; console.log(x); //输出1 }

a(); console.log(x);//错误 x没有定

15. JS哪些操作会造成内存泄露

1）意外的全局变量引起的内存泄露

•

function leak(){ leak='xxx';//leak成为一个全局变量，不会被回收 }

2）闭包引起的内存泄露3）没有清理的DOM元素引用4）被遗忘的定时器或者回调 5）子元素存在引起的内存泄露

16.关于JS事件冒泡与JS事件代理（事件委托）

事件作为DOM操作重要的一环，需要大家好好理解和运用，今天特意看了一下事件冒泡和事件代理的相关资料，感触颇深，也深感自己的无知不知道多浪费了多少内存，废话不多说进入正题：1.事件冒泡：通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

2.事件委托事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：有可能在开发的时候会遇到这种情况：如导航每一个栏目都要加一个事件，你可能会通过遍历来给每个栏目添加事件：事件委托是怎么写？

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

var ul = document.getElementById('parentUl'); ul.οnclick=f unction (event) { var e = event||window.event, source = e.targ et || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement if(source.nodeName.toLowerCase() == 'li'){ //判断只有li触发的才会输出内容 alert(source.innerHTML); } stopPropagation(e); //阻止继续冒泡 };

function addElement() { var li = document.createElement(' li'); li.innerHTML='我是新孩子'; ul.appendChild(li); }

17. CSS样式覆盖规则

规则一：由于继承而发生样式冲突时，最近祖先获胜。规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜规则三：直接指定的样式发生冲突时，样式权值高者获胜。样式的权值取决于样式的选择器，权值定义如下表。

CSS选择器权值

标签选择器 1

类选择器10

ID选择器100

内联样式1000

伪元素(:first-child等) 1

伪类(:link等) 10

可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。规则四：样式权值相同时，后者获胜。规则五：!important的样式属性不被覆盖。!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。

18. 介绍一下box-sizing属性

兼容问题首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容。属性值· box-sizing：content-box· box-sizing：border-box· box-sizing：inheritcontent-box· 这是box-sizing的默认属性值· 是CSS2.1中规定的宽度高度的显示行为· 在CSS中定义的宽度和高度就对应到元素的内容框· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框border-box· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

19. 请简要描述margin重合问题，及解决方式

1.同向margin的重叠：1图片的margin-top与3图片的margin-top发生重叠，2图片的margin-bottom与3图片的margin-bottom 发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。解决同向重叠的方法：（1）在最外层的div中加入overflow:hidden;zoom:1（2）在最外层加入padding:1px;属性（3）在最外层加入：border:1px solid #cacbcc;

2.异向重叠问题：1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两

图片的最大值的决定的。解决异向重叠问题：float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）

20.什么是闭包，如何使用它，为什么要使用它？

包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。使用闭包的注意点：· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。· 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

39.请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script 标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP 在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接

收参数形式不一样！

21.请解释一下JavaScript的同源策略。

在客户端编程语言中，如javascript和ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

22.怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点createDocumentFragment() //创建一个DOM 片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2）添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入3）查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的Name属性的值getElementById() //通过元素Id，唯一性

23.谈谈垃圾回收机制方式及内存管理

回收机制方式1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。3、实例如下：

•

•

•

•

•

•

•

•

•

function fn1() { var obj = {name: 'hanzichi', age: 10};}functi on fn2() { var obj = {name:'hanzichi', age: 10}; return obj;}var a = fn1();var b = fn2();

fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。 4、垃圾回收策略：标记清除(较为常用)和引用计数。标记清除：定义和用法：当变量进入环境时，将变量标记'进入环境'，当变量离开环境时，标记为：'离开环境'。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。引用计数：定义和用法：引用计数是跟踪记录每个值被引用的次数。基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

24、px和em的区别

相同点：px和em都是长度单位；异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

25、浏览器的内核分别是什么?

IE: trident内核Firefox：gecko内核Safari：webkit内核Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发)

26、什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

27、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据不同点：(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费； web storage,会将数据保存到本地，不会造成宽带浪费；(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器； sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

28、浏览器是如何渲染页面的？

渲染的流程如下：1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式

29:js的基本数据类型

JavaScript中有五种基本数据类型，它们分别是：undefined，null，boolean，number，string。还有一种复杂数据类型object。

30：事件委托

事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。好比送信员，如果每次都把信件送给每一户，非常繁琐。但是如果交给一个大范围的管理者，比如小区的传达室，那么事情会变得非常简单。事件委托就类似这种原理，我页面中有很多按钮，如果不使用事件委托，我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div （假设所有的按钮都在这个div中），那么我只要注册一次事件，就可以处理所有按钮（只要按钮包含在上述div中）事件的响应了31：从输入url到显示页面，都经历了什么

一般会经历以下几个过程：1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）5、握手成功后，浏览器向服务器发送http请求，请求数据包。6、服务器处理收到的请求，将数据返回至浏览器7、浏览器收到HTTP响应8、读取页面内容，浏览器渲染，解析html源码9、生成Dom树、解析css样式、js交互10、客户端和服务器交互11、ajax查询

32：new操作符到底到了什么

先看代码

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

var Func=function(){ }; var func=new Func (); new共经过了4几个阶段#1、创建一个空对象varobj=new Object(); #2、设置原型链obj.__proto__= Func.prototype; #3、让Func中的this指向obj，并执行Func的函数体。var result =Func.call(obj); #4、判断Func的返回值类型：#如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。if (typeof(result) == 'object'){ func=result; } else{ func=obj ;; }

33：vue的生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子= 生命周期函数 = 生命周期事件主要的生命周期函数分类：创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data 和methods 属性 created：实例已经在内存中创建OK，此时 data 和 methods

2022年前端面试题含答案精华版

前端面试题 1)下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度 a.display:inline b.display:none c.display:block d.display:inherit 2)新窗口打开网页，用到如下哪个值（）。 a._self b._blank c. _top d. _parent 3)下面有关jquery事件旳响应，描述错误旳是？ a.onclick 鼠标点击某个对象 b.onfocus 元素失去焦点 c.onload 是某个页面旳css js html 文档构造和图像被完毕加载 d.onmousedown 某个鼠标按键被按下 4)元素旳alt和title有什么异同，选出对旳旳说法？不同旳浏览器，体现同样 a.alt和title同步设立旳时候，alt作为图片旳替代文字浮现，title是图片旳解释文字 b.alt和title同步设立旳时候，title作为图片旳替代文字浮现，alt是图片旳解释文字

c.以上说法都不对旳 5)下列js可以让一种input旳背景颜色变成红色旳是？ 6)下面有关html5标签说法错误旳有？ a.

标签定义菜单列表。当但愿列出表单控件时使用该标签 d. 标签定义命令按钮，例如单选按钮、复选框或按钮 7)下述有关css属性position旳属性值旳描述，说法错误旳是？ a.static：没有定位，元素出目前正常旳流中 b.fixed：生成绝对定位旳元素，相对于父元素进行定位 c.relative：生成相对定位旳元素，相对于元素自身正常位置进行定位。 d.absolute：生成绝对定位旳元素，相对于 static 定位以外旳第一种祖先元素进行定位。 8)下面符合一种有效旳javascript变量定义规则旳是？ a._$te$t2 b.with c. a bc d.2a 9)下面有关JavaScript中 call和apply旳描述，错误旳是？

前端面试题及答案

前端面试题及答案 在前端领域中，面试是获取工作机会的重要环节。为了帮助准备前端面试的候选人们，本文将提供一些常见的前端面试题及其答案，以供参考。 一、HTML相关面试题 1. 请简述HTML的概念和作用。 HTML是超文本标记语言的缩写，用于构建网页的标准标记语言。它通过标签来定义页面的结构和内容，并与CSS和JavaScript等其他技术协同工作，实现页面的渲染和交互。 2. 请解释一下HTML5的新特性。 HTML5引入了许多新特性，例如语义化标签（如header、footer、nav等）、视频和音频元素、Canvas绘图功能、本地存储（localStorage 和sessionStorage）、WebSocket等。这些特性提升了网页的功能和性能，使开发者能够更好地构建富交互、多媒体的网页应用。 3. 请描述一下HTML元素的块级元素和内联元素的区别。 块级元素会独占一行，相邻的两个块级元素会自动换行。常见的块级元素有div、p、h1等。而内联元素不会换行，会在一行内按照从左到右的顺序排列。常见的内联元素有span、a、em等。此外，块级元素可以包含内联元素，但是内联元素不能包含块级元素。 二、CSS相关面试题

1. 请解释一下盒模型。 盒模型描述了一个HTML元素所占空间的模型。它由内容区、内边距、边框和外边距组成。其中，内容区的大小由width和height属性决定，内边距由padding属性决定，边框由border属性决定，外边距由margin属性决定。 2. 如何实现水平居中一个块级元素？ 要实现水平居中一个块级元素，可以设置其左右外边距为auto，同时将其display属性设置为block。例如，假设元素的宽度为300px，可以使用如下CSS代码： ```css .element { width: 300px; margin-left: auto; margin-right: auto; display: block; } ``` 3. 请解释一下CSS选择器的优先级。 CSS选择器的优先级用于确定当多个选择器作用于同一个元素时，哪一个选择器的样式将被应用。选择器的优先级由四个部分组成，按

前端工程师面试题题及答案(全面综合)

1. 要动态改变层中内容可以使用的方法有（AB ） a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 在javascript里，下列选项中不属于数组方法的是（B）； a)sort() b)length() c)concat() d)reverse() 3 、var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: （选择一项）。(D ) A for(var i =0; i

c)getElementsByName() d)bgColor() 6. 、display属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D ) a)都是Location对象的属性 b)使用时返回值都是字符串 c)都是返回以像素为单位的数值 d)以上都不对 8. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗 口，下列选项正确的是__D__ a)open("x.html","HI","toolbas=1,scrollbars=1,status=1"); b)open("HI","scrollbars=1,location=1,status=1"); c)open("x.html","status=yes,menubar=1,location=1"); d)open("x.html","HI","toolbas=yes,menubar=1,location=1"); 9. 、javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C) a)8+8 b)88 c)16 d)“8”+’8 10. 关于setTimeout(“check”,10)中说法正确的是( D)

前端开发面试题及答案

前端开发面试题及答案 前端开发面试题及答案 想要应聘前端开发的求职者，要做好完成面试题的准备。下面是由小编分享的前端开发面试题及答案，希望对你有用。 前端开发面试题及答案 1、对Web标准以及W3C的理解与认识? 答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件、容易维护、改版方便，不需要变动页面内容、提供打印版本而水需要复制内容、提高网站易用性。 2、XHTML和HTML有什么区别? 答：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML元素必须被正确地嵌套; XHTML元素必须被关闭; 标签名必须用小写字母; XHTML文档必须拥有根元素。 3、Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 答：Doctype用于声明文档使用哪种规范(HTML/XHTML) 该标签可声明三种DTD类型，分别为严格版本、过度版本以及基于框架的HTML文档。 加入XML声明可触发，解析方式更改为IE5.5拥有IE5.5的bug。 4、行内元素有哪些?块级元素有哪些?CSS的盒模型? 答：行内元素：a b br i span input select 块级元素：div p h1 h2 h3 h4 form ul CSS盒模型：内容，border margin padding 5、CSS引入的方式有哪些?link和@import的区别是?

答：方式：内联内嵌外链导入 区别：同时加载 前者无兼容性，后者CSS2.1以下浏览器不支持 Link支持使用javascript 改变样式，后者不可。 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 答：标签选择符、类选择符、id选择符 继承不如指定 id>class>标签选择 后者优先级高 7、前端页面有哪三层构成，分别是什么?作用是什么? 答：结构层HTML 表示层CSS 行为层JS 8、你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么? 答：Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto) 9、img标签上title与 alt属性的区别是什么? 答：Alt当图片不显示时，用文字代表 Title为该属性提供信息。 10、描述CSS Reset的作用和用途 答：Reset重置浏览器的CSS默认属性浏览器的品种不同，样式不同，然后重 置，让他们统一。 11、http状态码有那些?分别代表是什么意思? 100-199 用于指定客户端应响应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 400 语义有误，当前请求无法被服务器理解。 401 当前请求需要用户验证

前端工程师面试题和答案

前端工程师面试题和答案 1、在 css 选择器当中，优先级排序正确的是（） [单选题] * A、id选择器>标签选择器>类选择器 B、标签选择器>类选择器>id选择器 C、类选择器>标签选择器>id选择器 D、id选择器>类选择器>标签选择器(正确答案) 2、下列定义的 css 中，哪个权重是最低的?（） [单选题] * A、#game .name B、#game .name span C、#game div(正确答案) D、#game https://www.docsj.com/doc/9f19136885.html, 3、关于HTML语义化，以下哪个说法是正确的?（） [单选题] * A、语义化的HTML有利于机器的阅读，如PDA手持设备、搜索引擎爬虫;但不利于人的阅读 B、Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格 C、语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化 D、header、article、address都属于语义化明确的标签(正确答案) 4、放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行?（）[单选题] * A、文件头部位置

C、标签部分 D、标签部分(正确答案) 5、新窗口打开网页，用到以下哪个值（） [单选题] * A、_self B、_blank(正确答案) C、_top D、_parent 6、下列关于web页面级优化描述最正确的是（） [单选题] * A、减少HTTP请求的次数 B、进行资源合拼和压缩 C、Inline images D、将外部脚本置于低端 E、减少不必要的HTTP跳转 F、以上描述都对(正确答案) 7、下列哪个不属于id与class之间的区别（） [单选题] * A、id在文档中只能使用一次，而class可以多次使用 B、id比class具有更高的样式优先级 C、一个元素只能有一个id属性值，却可以拥有多个class属性值 D、在class中可以定义:hover伪类，在id中不能定义(正确答案) 8、JavaScript中window对象的子对象不包含以下哪个对象?（） [单选题] *

最新web前端面试题及答案

1. WEB标准以及W3C标准是什么？ 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。 1.1div中img怎么水平和垂直居中？ Div{width:200px; height:200px;text-align:center; font-size:0; overflow: hidden;line-height:200px; _line-height:178px;/*兼容IE6*/ } Img{ vertical-align:middle;} 1.2 HTML中没有单位的属性是？ z-index:1; zoom:1; font-weight:200; 1.3 form表单中input标签的readonly 和disabled属性有何区别？ readonly=“readonly”是只读，不可以修改，disabled=“disabled”是禁用，整个文本框是显示灰色状态 form 中method是数据传递的方式，action是与后台数据库提交的 5.xhtml和html有什么区别 XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。 3.行内元素有哪些？块级元素有哪些？ 行内元素: a b img em br i span input select 块级元素：div p h1-h6 form ul dl ol table 4.行内元素和块级元素有什么区别？ 行内元素不可以设置宽高，不独占一行; 块级元素可以设置宽高，独占一行。 5.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？margin-top,padding-top无效 6.CSS的盒模型由什么组成？ 内容（width,height），border ,margin，padding 6.1 简述div+css布局的优势？ （1）符合w3c标准；（2）兼容性好；（3）有利于搜索引擎很友好；（4）样式的调整更加方便；（5）css简洁的代码，能使样式和结构分离； 7.说说display属性有哪些？可以做什么？ display:block行内元素转换为块级元素 display:inline块级元素转换为行内元素 display:inline-block转为内联元素 display:box(css3新增的弹性布局属性) 8.CSS 选择符有哪些？ 1.id选择器（# myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul < li） 6.后代选择器（li a）

web前端面试题及答案

web前端面试题及答案 web前端面试题及答案 引导语：了解一些面试题及答案，可以帮助自己顺利通过面试哦。以下是小编为大家整理的web前端面试题及答案，供各位参考。 1、怎样添加、移除、移动、复制、创建和查找节点？ 创建新节点： creatDocumentFragment()，创建一个DOM片段。 creatElement()，创建一个具体的元素。 creatTextNode()，创建一个文本节点。 添加、移除、替换、插入： appendChild()，添加。 removeChild()，移除。 replaceChild()，替换。 Before()，插入。 查找： getElementsByTagName()，通过标签名称。 getElementsByName()，通过元素的Name属性的值。 getElementById()，通过元素id，唯一性。 2、JS中什么是伪数组？如何将伪数组转化为标准数组？ 伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为。但仍可以对真正数组遍历方法来遍历它们。典型的是函数的arguement参数，还有像调用getElementsByT agName()、document.childNodes()之类的'，它们都返回NodeList对象，都属于伪数组。可以用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。 3、JS中callee和caller的作用。 caller是返回一个对函数的引用，该函数调用了当前函数； callee是返回正在被执行的函数，也就是所指定的function对象的正文。

前端开发面试题及答案

前端开发面试题及答案 1. 什么是前端开发？ 答：前端开发是一门技术，其主要目的是使用 HTML，CSS 和 JavaScript 来创建动态网页，视图和用户界面。 2. 如何使用CSS制作一个圆角边框？ 答：使用 CSS 的 border-radius 属性可以制作圆角边框，如：border-radius: 10px; 3. 请描述流式布局的概念。 答：流式布局是一种网页布局技术，它可以根据浏览器窗口大小自动调整页面中元素的位置和大小。 4. 请描述XML及其用途。 答：XML（可扩展标记语言）是一种标记语言，可以用来存储和传输数据，也用于创建 web 应用。 5. 什么是AJAX？ 答：AJAX 是 Asynchronous JavaScript and XML 的缩写，它是一种用于创建异步 Web 应用的技术，可以在不重新加载整个页面的情况下更新网页的部分内容。 6. 什么是JSON？ 答：JSON 是 JavaScript 对象表示法的缩写，是一种轻量级的数据交换格式，用于在应用程序之间进行数据交换和存储。 7. 什么是CDN？

答：CDN 是内容分发网络的缩写，是一种分散式网络技术，用于将静态资源（如 JavaScript 和 CSS 文件）分发到多个服务器上，以提供更快的网页加载速度。 8. 请描述Web存储的概念。 答：Web 存储提供了一种方式，可以在网站上存储数据，并在下次用户访问中访问这些数据。使用 web 存储，可以为用户提供更好的体验和功能，因为它可以更快地加载页面和保存状态信息。 9. 请描述HTML5的新特性。 答：HTML5 包含许多新特性，包括新的元素（如

，