Web前端笔试面试题整理

1.前端页面有哪三层构成，分别是什么？作用是什么？

　　1）、结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。

　　2）、表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。

　　3）、行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

2.用CSS分别单独定义IE6、7、8的width属性

   IE6识别 * 、_

    IE7识别 * 、+

    IE8识别 * 、\9,\0

    只有IE8识别  \0/   

    ie9只识别：\9

    FF什么都不识别

width:8px\0;    /*ie8*/
+width:7px;        /*ie7*/
_width:6px;       /*ie6*/

3.正则表达式验证邮箱合法性

<script type="text/javascript">
	function isEmail(str){
		var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
		return reg.test(str);
	}
	var str = 'test@hotmail.com';
	document.write(isEmail(str)+'<br />');
	var str2 = 'test@sima.vip.com';
	document.write(isEmail(str2)+'<br />');
	var str3 = 'te-st@qq.com.cn';
	document.write(isEmail(str3)+'<br />');
	var str4 = 'te_st@sima.vip.com';
	document.write(isEmail(str4)+'<br />');
	var str5 = 'te.._st@sima.vip.com';
	document.write(isEmail(str5)+'<br />');
	</script> 

4.alert出URL带的参数值（可以考虑正则表达式）

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>test</title>
	<Script language="javascript">
	//字符串截取
	function getURLParam() {
	   var url = location.search; //获取url中"?"符后的字串
	   var theRequest = new Object();
	   if (url.indexOf("?") != -1) {
		  var str = url.substr(1);
		  strs = str.split("&");
		  for(var i = 0; i < strs.length; i ++) {
			 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
		  }
	   }
	   return theRequest;
	}

	var Request = new Object();
	Request = getURLParam();
	var email,urls;
	email = Request['email'];
	urls = Request['urls'];
	alert(email+urls);
	
	//正则式方式
	function getURLParam2(name) {
		var value = location.search.match(new RegExp("[?&]" + name + "=([^&]*)(&?)","i"));
		return value ? decodeURIComponent(value[1]) : value;
	}	

	alert(getURLParam2('email'));
	alert(getURLParam2('urls'));

</Script>
	</head>
	<body>
	<form>
	
		<input name="email" type="text" value="test@test.com"/>
        <input name="urls" type="text" value="http://www.baidu.com/"/>
        <input type="submit" value="提交"/>
	</form>
	</body>
	
</html>

5.add(2)(3)(4)

<script type="text/javascript">
	function add(n){
		return function(x){
			n = n + x;
			alert(n);
			return arguments.callee;
		}
	}
	add(2)(3)(4); 
	</script>

6.选择器的特殊性

1000：Style=""行内样式

0100：ID选择器

0010：类选择器、属性选择器。伪类选择器等

0001：标签名选择器

7.alert出ul下li的链接，并阻止链接跳转

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="test">
<li><a href="http://www.baidu.com" >test1</a></li>
<li><a href="http://www.google.com" >test2</a></li>
<li><a href="http://www.sohu.com" >test3</a></li>
</ul>
</body>
<script src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
 
  $("ul").click(function(){
  var arr1 = $("ul").find("a");
  $.each(arr1, function(i,val){      
      //alert(i);   
      alert(val);
      
  });
    return false;
  });
});
</script>
</html>

8.编码实现以下布局

<html>
<head>
<style>
.top{
width:100%;
height:10%;
background:none repeat scroll 0 0 red;
}
.main{
width:100%;
height:80%;
}
.main-left{
width:10%;
height:100%;
background:none repeat scroll 0 0 yellow;
float:left;
}
.main-center{
width:80%;
height:100%;
background:none repeat scroll 0 0 gray;
float:left;
}
.main-right {
    height: 100%;
    width: 10%;
    background: none repeat scroll 0 0 yellow;
	float:right;
}
.foot{
width:100%;
height:10%;
background:none repeat scroll 0 0 pink;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="main-left"></div>
<div class="main-center"></div>
<div class="main-right"></div>
</div>
<div class="foot"></div>
</body>
</html>

9.编码实现以下布局，让图片永远保持垂直居中，并且4列图片都在同一水平线

<html>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"/>
<head>
<style>
.service1{
width:33.3333%;
height:100%;
float:left;
}
.service2{
width:33.3333%;
height:100%;
float:left;
float:left;
}
.service3{
width:33.3333%;
height:100%;
float:left;
}
h2{
height:10%;
position:relative;
text-align: center;
}
img{
width:100%;
}
.img{
position:relative;
}
p{
height:25%;
position:relative;
bottom:0;
}
</style>
</head>
<body>
<div class="service1">
<h2>标题1标题1标题1标题1标题1题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1</h2>
<div class="img"><img src="a.png"/></div>
<p>描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
</div>
<div class="service2">
<h2>标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1</h2>
<div class="img"><img src="a.png"/></div>
<p>描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
</div>
<div class="service3">
<h2>题1标题1</h2>
<div class="img"><img src="a.png"/></div>
<p>描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
</div>
</body>
</html>