Web前端⾯试题⽬及答案汇总
1.什么是盒⼦模型？
在⽹页中，⼀个元素占有空间的⼤⼩由⼏个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显⽰相应的内容，⽽有的部分只⽤来分隔相邻的区域或区域。4个部分⼀起构成了css中元素的盒模型。
2、⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？
⾏内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
3、CSS实现垂直⽔平居中
⼀道经典的问题，实现⽅法有很多种，以下是其中⼀种实现：
HTML结构：
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //⽗元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //⼆分之⼀的height，width
margin-left: -100px;
}
4、简述⼀下src与href的区别
href 是指向⽹络资源所在位置，建⽴和当前元素(锚点)或当前⽂档(链接)之间的链接，⽤于超链接。
src是指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应⽤到⽂档内，例如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底部⽽不是头部。
5、简述同步和异步的区别
同步是阻塞模式，异步是⾮阻塞模式。
同步就是指⼀个进程在执⾏某个请求的时候，若该请求需要⼀段时间才能返回信息，那么这个进程将会⼀直等待下去，直到收到返回信息才继续执⾏下去;
异步是指进程不需要⼀直等下去，⽽是继续执⾏下⾯的操作，不管其他进程的状态。当有消息返回时系统会通知进程进⾏处理，这样可以提⾼执⾏的效率。
6、px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算⽐较容易。em得值不是固定的，并且em会继承⽗级元素的字体⼤⼩。
浏览器的默认字体⾼都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
7、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。
优雅降级 graceful degradation：
⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少⽤户体验的供给
java连接数据库实现增删改查b. 渐进增强则是从⼀个⾮常基础的，能够起作⽤的版本开始，并不断扩充，以适应未来环境的需要
c. 降级(功能衰减)意味着往回看;⽽渐进增强则意味着朝前看，同时保证其根基处于安全地带
8、浏览器的内核分别是什么？
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改⽤Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
JavaScript部分
1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动
document.documentElement 返回⽂档的根节点< html>
document.body < body>
document.activeElement 返回当前⽂档中被击活的标签节点(ie)
event.fromElement 返回⿏标移出的源节点(ie)
event.srcElement 返回激活事件的源节点(ie)
event.target 返回激活事件的源节点(firefox)
当前对象为node
返回⽗节点：node.parentNode, node.parendElement,
返回所有⼦节点：node.childNodes（包含⽂本节点及标签节点）,node.children
返回第⼀个⼦节点：node.firstChild
返回最后⼀个⼦节点： node.lastChild
返回同属上⼀个⼦节点：Sibling
返回同属下⼀个⼦节点：node.previousSibling
parentNode和parentElement功能⼀样，childNodes和children功能⼀样。但是parentNode和childNodes是符合W3C标准的，可以说⽐较通⽤。⽽另外两个只是IE⽀持，不是标准，Firefox就不⽀持 ，所以只要记得有parentElement和children就⾏了
2、事件——怎样使⽤事件以及IE和DOM事件模型之间存在哪些主要差别。
（1）冒泡型事件：事件按照从最特定的事件⽬标到最不特定的事件⽬标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗⼝级别捕获事件，不过必须由开发⼈员特别指定)。
（3）DOM事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发⽣。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，⽂本节点也触发事件(在IE中不会)
3、怎样添加、移除、移动、复制、创建和查节点？
1)创建新节点
createDocumentFragment() //创建⼀个DOM⽚段
createElement() //创建⼀个具体的元素
createTextNode() //创建⼀个⽂本节点
2)添加、移除、替换、插⼊
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插⼊
3)查web前端基础面试题
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯⼀性
4、实现⼀个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进⾏值复制。
/*
对象克隆
⽀持基本数据类型及对象
递归⽅法
*/
function clone(obj){
var o;
switch(typeof obj){
case"undefined":
break;
break;
case"string":
o = obj +"";制作视频剪辑
break;
case"number":
o = obj -0;
break;
case"boolean":
o = obj;
break;
case"object":// object 分为两种情况对象(Object)或数组(Array)
if(obj ===null){
o =null;
}else{
if(String.call(obj).slice(8,-1)==="Array"){              o =[];
for(var i =0; i obj.length; i++){
o.push(clone(obj[i]));
}
}else{
o ={};
for(var k in obj){
o[k]=clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
5、如何消除⼀个数组⾥⾯重复的元素？
// ⽅法⼀：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 =[];
for(var i =0,len = arr1.length; i< len; i++){
有趣的代码大全if(arr2.indexOf(arr1[i])<0){
arr2.push(arr1[i]);
}
}
document.write(arr2);// 1,2,3,4,5,6
6、想实现⼀个对页⾯某个节点的拖曳？如何做？
源码编译使⽤原⽣JS
7、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组(类数组)：⽆法直接调⽤数组⽅法或期望length属性有什么特殊的⾏为，但仍可以对真正数组遍历⽅法来遍历它们。典型的是函数的argument参数，还有像调⽤getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象都属于伪数组。可以使⽤Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了使⽤unshift数组⽅法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
};
8、Javascript中callee和caller的作⽤？
caller是返回⼀个对函数的引⽤，该函数调⽤了当前函数;
callee是返回正在被执⾏的function函数，也就是所指定的function对象的正⽂。
9、请描述⼀下cookies，sessionStorage和localStorage的区别
sessionStorage⽤于本地存储⼀个会话(session)中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。⽽localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更⼤容量存储设计的。Cookie的⼤⼩是受限的，并且每次你请求⼀个新的页⾯的时候Cookie都会被发送过去，这样⽆形中浪费了带宽，另外cookie还需要指定作⽤域，不可以跨域调⽤。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等⽅法，不像cookie需要前端开发者⾃⼰封装
setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作⽤是与服务器进⾏交互，作为HTTP规范的⼀部分⽽存在 ，⽽Web Storage仅仅是为了在本地“存储”数据⽽⽣。
c语言程序设计教程基础知识
10、⼿写数组快速排序

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。