Web前端笔试面试题整理

最新推荐文章于 2021-11-03 18:47:49 发布

freedom1993

最新推荐文章于 2021-11-03 18:47:49 发布

阅读量741

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/github_22022001/article/details/43794063

web 专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了前端开发的三大组成部分：结构层、表示层和行为层。详细解释了如何使用HTML、CSS和JavaScript来构建网页，并通过实例展示了如何根据不同浏览器版本设置宽度属性。此外，还介绍了使用正则表达式验证邮箱合法性的方法，以及如何通过JavaScript获取URL参数。最后，通过一系列示例演示了函数递归调用和特殊性选择器的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>