web前端面试题

来源：互联网发布：淘宝嘉年华英伦休闲鞋编辑：程序博客网时间：2024/06/05 08:58

幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。

事先声明：

◆ 这些题目的来源：面试曾经被问过;工作被别人问过或者遇见过;网上看见过...

◆ 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。

◆ 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我也只是一面，不丢人也不怕丢人。

◆ 如果朋友们有好的面试题欢迎提建议，我会其实补充更新的，先谢谢各位了。

HTML相关

1. <!DOCTYPE>标签的定义与用法。

2. 块级元素和行内元素都有哪些?

3. 你真的了解HTML吗? 雅虎面试题　　把前面黄底那段拿去搜索下就知道了(曾在某浪公司面试的时候被问到过，确实是很好的问题)。

CSS相关

1. 介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。

2. 介绍CSS盒模型。

3. CSS层叠是什么?介绍一下。

4. 都知道哪些CSS浏览器兼容性问题。

5. 有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...

JavaScript基础相关

1. HTTP协议的状态消息都有哪些?(如200、302对应的描述)

2. AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

3. 同步和异步的区别?

4. 简述javascript封装。

5. JavaScript继承有哪两种形式形式，进行描述。

6. 什么是闭包?以下代码点击<p> 会输出什么?为什么?能大概说明白的话继续问能想出几种解决办法。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>闭包演示</title> 
<style type="text/css"> 
    p {background:gold;}  
</style> 
<script type="text/javascript">   
function init() {      
    var pAry = document.getElementsByTagName("p");      
    for( var i=0; i<pAry.length; i++ ) {      
         pAry[i].onclick = function() {      
         alert(i);      
    }   
  }  
}  
</script>   
</head>   
<body onload="init();">   
<p>产品 0</p>   
<p>产品 1</p>   
<p>产品 2</p>   
<p>产品 3</p>   
<p>产品 4</p>   
</body>   
</html>

7. 在js中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。

8. 简述下cookie的操作，还有cookie的属性都知道哪些。

9. IE与FF的JS兼容性都知道哪些。

10. DOM操作 - 怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题，一般不会问)。

jQuery相关

1. jquery源码是否尝试去读过?说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。

2. 都知道哪些不好的jQuery书写方式。

3. Sizzle是否有读过?

其它相关的加分项：

1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?

2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?

3. 国内外的JS牛人都知道哪些?

4. 瀑布流布局或者流式布局是否有了解

4. 正则表达式有系统学习过吗(看书或网上教程)?有的话就问问简单点的邮箱验证、URL验证，或者问问贪婪匹配与懒惰匹配的理论知识。

5. Node.js是否有过尝试?到什么程度?说说个人理解的看法?

6. HTML5都有哪些新的JS API?

7. 前端优化知识都知道哪些?

8. 基础算法题(如快速排序，能否一两句说说重要的核心原理或者数组消重等)。

9. 是否有接触过或者了解过重构。

1.简述div元素和span元素的区别。

div是块元素，默认换行，一般用于排版。

span是行内元素，默认不换行，一般用于局部文字样式。

通过display属性他们之间可以相互转换，div默认为block,span默认为inline。

2.谈谈javascript数组方法sort()的使用，重点介绍sort()参数的使用及其内部机制。

语法：arrayObject.sort(sortby)

参数sortby:可选，规定排序顺序。必须是函数。

返回对数组的引用。注意，数组在原数组上进行排序，不生成副本。

如果该方法没有使用参数，将按照字符编码的顺序进行排序。

如果想要按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：

1）若a小于b，在排序后的数组中a应该出现在b之前，返回一个小于0的值。

2）若a等于b，返回0。

3）若a大于b，则返回一个小于0的值。

例：按照数值进行排序

<script type="text/javascript">function sortNumber(a,b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "<br />")document.write(arr.sort(sortNumber))</script>

3.结合<span id="outer"><span id="inner">text</span></span>这段结构，谈谈innerHTML outerHTML innerText之间的区别。

innerHTML:对象里面的HTML内容，这里是<span id="inner">text</span>

outerHTML:对象里面包括对象本身的HTML内容，这里是<span id="outer"><span id="inner">text</span></span>

innerText:对象里面的文本内容，这里是text

4.说几条XHTML规范的内容。

1）标签名必须用小写字母。

2）所有标签都必须被关闭，包括空标签。

3）属性值必须加引号。

4）用Id属性代替name属性。

5）所有XHTML文档必须进行文件类型声明。

5.对Web标准化（或网站重构）知道哪些相关知识，简述几条你知道的Web标准？

为什么要使用web标准？

1）具有更好的兼容性。

2）易于代码维护和开发。

3）可增加网站的访问量。

4）标准的web文档更易被转换为其他格式。

5）更易被搜索引擎访问，也更易被准确索引。

6）更易被JavaScript和DOM代码访问。

W3C标准：HTML、XHTML、CSS、XML、XSL、DOM。

6.完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

<html>

<head>

function foo() {

//在此处添加代码

var radioGroup = document.getElementsByName("radioGroup");

for(var i=0; i<radioGroup.length; i++) {

if(radioGroup[i].checked) {

alert("你选择了第" + (i+1)+"单选框");

}

return false;

}

</script>

</head>

<body>

</form>

</body>

</html>

7.填充注释部分的函数体，使得foo()函数调用弹出“成功”的对话框。代码应尽量简短。

<html>

<head>

function foo() {

var str = reverse('a,b,c,d,e,f,g');

alert(str);

if (str == 'g,f,e,d,c,b,a') {

alert('成功');

}else {

alert('失败');

}

function reverse(str)

{

// 在此处加入代码，完成字符串翻转功能

return str.split(",").reverse().join(",");

}

</script>

</head>

<body>

</body>

</HTML>

8.下面代码：

var x = 1;

var y = 0;

var z = 0;

function add(n) {

n = n +1;

}

y = add(x);

function add(n) {

n = n + 3;

}

z = add(x);

s = y + z;

</script>

求：y、z、s的值。

答案：undefined、undefined、NaN。两个add函数都没有返回值，所以是undefined，两个undefined相加自然是NaN。

9.下面代码：

var x = 1;

var y = 0;

var z = 0;

function add(n) {

return n = n +1;

}

y = add(x);

function add(n) {

return n = n + 3;

}

z = add(x);

s = y + z;

</script>

求：y、z、s的值。

答案：4，4，8。直接通过function声明的函数，后面定义的会影响前面的。

function x() {alert("2");}

x();//输出3

function x() {alert("3");}

x();//输出3

</script>

通过var声明的函数，后面定义的不会影响前面的：

var x = function() {alert("0");}

x();//输出0

var x = function() {alert("1");}

x();//输出1

</script>

通过function定义的函数，后面定义的，照旧影响前面的引用，但是不能改变通过var声明函数后的引用，反而，通过var声明的函数，改变了后来通过声明函数之后的引用。

var x = function() {alert("1");}

x();//输出1

function x() {alert("3");}

x();//输出1

</script>

function x() {alert("2")};

x();//输出3

var x = function() {alert("0");}

x();//输出0

var x = function() {alert("1");}

x();//输出1

function x() {alert("3");}

x();//输出1

</script>

10.下面的输出结果为：

typeof(NaN) //number

typeof(Infinity) //number

typeof(null) //object

typeof(undefined) //undefined

NaN == NaN //false

NaN != NaN //true

NaN >= NaN //false

null == undefined //true

null >= undefined //false

null <=undefined //false

parseInt("123abc") //123

"123abc" - 0 //NaN

Infinity > 10 //true

Infinity == NaN //false

Infinity > "abc" //false

true == 1 //true

new String("abc") == "abc" //true

new String("abc") === "abc" //false

var a = "123abc";

alert(typeof(a++)); //number

alert(a); //NaN

var a = "123abc";

a.valueOf = function(){return parseInt(a);}

a.toString = function(){return parseInt(a);}

alert(++a); //NaN

alert(a-0); //NaN

var a = new Object();

a.toString = function(){return "123abc";}

a.valueOf = function(){return parseInt(a);}

alert(++a); //124

alert(a-0); //124

String.prototype.valueOf = function()

{

return parseFloat(this);

}

alert("123abc" > 122); //false

alert(new String("123abc") > 122); //true

var s = new String("abc");

alert(typeof(s) == typeof("abc")); //false typeof(s) == object 而typeof("abc")==string

alert(s === "abc"); //false

alert(s.toString() == s); //true

阅读全文

0 0