史上最全的web前端面试题汇总及答案1
史上最全的web前端面试题汇总及答案1
很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。
Html&CSS
1、谈谈你对web标准的理解
web标准的理解
2、列举html中至少三个实体
&、 、<、>、®、©
3、cellpadding与cellspacing有何区别？
cellpadding：代表单元格边框到内容之间的距离（留白）
4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有哪些？
1.id选择器（ # myid）*)不可继承的样式： 优先级 CSS3新增伪类举例
5、display与visibility有何异同？
display可以有很多值，visibility只有两个常用值：visible、hidden。
6、怎么在网页中实现绝对定位？
absolute
7、table-layout、border-collapse有何用途？
①table-layout：设置表格是否自动调整宽高
8、简述盒模型
简述盒模型
9、链接标记target属性的_top、_parent、_blank、main、left、top各有何用处?
链接标记target与Dom，Bom
10、你对浏览器兼容怎么看？通常你都做哪些处理？
浏览器的兼容性
11、get和post的区别？
GET： 一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符POST： 一般用于修改服务器上的资源，对所发送的信息没有限制。
12、xhtml和html有什么区别
①HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
13、行内元素有哪些?块级元素有哪些?空(void)元素有那些？
块级元素： div p h1 h2 h3 h4 form ul ol dl dt dd行内元素: a b br i span input select image strong（强调的语气）常见空元素： 不常见空元素： ///// 行内元素： 会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素： 各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性： display:inline-block;*display:inline;*zoom:1;
14、CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式包括内联 内嵌 外链 导入
15、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?介绍一下你对浏览器内核的理解
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opera(blink)对内核的理解：
16、解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
17、清除浮动的几种方式，各自的优缺点
（1）父级div定义height。
18、Doctype作用？标准模式与兼容模式各有什么区别?
①DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。注意点：
19、iframe有哪些缺点？
①iframe会阻塞主页面的Onload事件，搜索引擎的检索程序无法解读这种页面，不利于SEO；
20、如何实现浏览器内多个标签页之间的通信?
①通过WebSocket、SharedWorker来实现；
21、如何在页面上实现一个圆形的可点击区域？
①map+area或者svg
22、CSS3有哪些新特性？
① CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）；
Html5
1、Html5与html4相比，各有何优缺点？ 怎样处理html5新标签的兼容性问题？
html5余html4的异同请看以下的链接
Javascript
1、JS如何使页面跳转?怎么引入一个外部JS文件?
①直接在head标签内写入js代码，如下
②引入写好的js文件，使用语句
也是直接放入到head标签里头，也有的是放在
前面。
2、输入框的验证用什么事件?
change(fn)
3、undefined与null有何异同？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。undefined： null： 它们都表示空，转换为boolean后都为false，但是null代表一个对象变量已经被初始化，但未装入对象；undefined表示未初始化变量
4、===与==有何异同？
相同点：都是判定两个值是否相等
5、如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？
全局函数isNaN可以判断一个变量的值是否为数字。
6、什么是Bom什么是Dom?你如何理解Dom?
链接标记target与Dom，Bom
7、Array的join、push、splice、slice各有何用途，splice与slice有何异同？
join：使用指定间隔符连接所有元素为字符串
8、如何阻止表单提交？
在onsubmit事件中返回false
9、如何动态操作表格？
可以像普通dom一样操作，但是因为表格的dom比较复杂，所以我通常是使用table的insertRow、deleteRow及tr对象的insetCell、deleteCell操作。
10、String.match与RegExp.exec有何区别？
match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果；
11、为验证手机号写一个正则。
function checkSubmitMobil()
{
if ($("#phoneNum").val() == "") {
alert("手机号码不能为空！");
//$("#moileMsg").html("手机号码不能为空！ ");
$("#mobile").focus();
return false;
}
if (!$("#phoneNum").val().match(/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/))
{
alert("手机号码格式不正确！");
//$("#moileMsg").html("手机号码格式不正确！请重新输入！ ");
$("#phoneNum").focus();
return false;
}
return true;
}
12、正则的i标记与g标记各有何用途？
i：不区分大小写；
13、为String添加trim()方法。
String.prototype.trim = function() {
return this.replace(/^ +| +$/g,"");
}
14、简述COOKIE。在JS中如何操作Cookie?
简述cookie，在JS中如何操作cookie
15、谈谈javascript数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制。
JS数组排序方法sort()的使用
16、谈谈innerHTML outerHTML innerText之间的区别。
①innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法；
17、在JavaScript中定时调用函数 foo() 如何写？
setTimeout(
foo,
1000 //这里设置延时数
);
18、setTimeout与setInterval有何区别?
①setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
19、你在js中用过array吗？如果用过，array中添加数据用什么方法？
在尾部添加使用push();
20、简述javascript的优缺点。
优点： 简单易用，与Java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；缺点： 不适合开发大型应用程序；
21、Javascript有哪些内置对象?
只有Math和Global（在浏览器环境中，Global就是Window）
22、列举Javascript的本地对象。
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
23、javascript的typeof返回哪些数据类型
object number function boolean undefind string
24、例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
25、IE和DOM事件流的区别
①执行顺序不一样、
26、事件绑定和普通事件有什么区别
①事件绑定就是针对dom元素的事件，绑定在dom元素上
27、事件委托是什么
利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！
28、闭包是什么，有什么特性，对页面有什么影响
什么是闭包 闭包的特性： 对页面的影响
29、javascript的本地对象，内置对象和宿主对象
①本地对象为array obj regexp等可以new实例化
30、编写一个数组去重的方法
思路：
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
31、this对象的理解
①this总是指向函数的直接调用者（而非间接调用者）；
32、eval是做什么的？
①它的功能是把对应的字符串解析成JS代码并运行；var obj =eval('('+ str +')');
33、new操作符具体干了什么呢?
①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
34、call() 和 apply() 的区别和作用？
①apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如何获取UA
JS代码
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
35、请解释一下 JavaScript 的同源策略
概念: 同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。为什么要有同源限制？
36、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
Ajax
1、什么是Ajax？
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。
2、如何使用Ajax从服务器获取数据？
①创建XMLHttpRequest对象，注意兼容IE6的情况
xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");
再传递参数：
xhr.send(name=liujianhong&password=123);
3、解释XMLHttpRequest是什么？
XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。
4、谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。
var xhr = new XMLHttpRequest();
//在环境中需要做浏览器兼容，这里省略了
xhr.onreadystatechange = function() {
//这里注册当xhr状态发生改变后调用事件
if( xhr.readyState == 4 ) {
//通常在读取状态为4的时候才能获取到部分数据
所以一般状态在4的时候才进行处理
if(status==200) {
//当正常请求到资源时的处理,
可以调用xhr.responseText或xhr.responseXml获取数据
}
else {
//当请求资源失败时的处理
}
}
}
xhr.open( "GET", url);
//设置xhr的请求方式和url,这里使用的是GET方式，
//如果有参数，则连接在url后面
/*
如果是POST请求，还当设置请求的Content-Type
数据使用send作为参数发送
*/
xhr.send();
5、谈谈你对JSON的理解。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
6、你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？
①有。
7、你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？
没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。
8、你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？
①遇到过。
9、解释jsonp的原理，以及为什么不是真正的ajax
①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。
你可能感兴趣的:(史上最全的web前端面试题汇总及答案1)
