Web前端笔试面试题整理

本文深入探讨了前端开发的三大组成部分:结构层、表示层和行为层。详细解释了如何使用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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值