前端开发面试题（一）
一. html
1. 对html5、css3的理解，都有什么新增功能
html5和css3是对html4和css2的重大升级，增加了很多有用的新特性。
html5新特性：绘图（canvas）、离线式存储（localstorage、sessionstorage）、websocket、音视频增强标签（video、audio）。
css3新特性：css3选择器（selector）、字体（word-wrap、text-overflow、text-decoration、text-shadow）、多列布局（multi-column layout）、边框（border-radius）、变换（gradient、transform）、动画（transition、animation）
2. margin和padding的区别
margin是控件边缘相对父控件的边距。
padding是控件的内容相对控件的边缘的边距。
图：css盒子模型
3. 编写一个Html结构，三列布局的，要求适应分辨率100%高度（在任何分辨率下全屏显示）
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>三列布局，要求适应分辨率100%高度</title> <style> html,body{ margin:0; padding:0; height:100%; } .left,.right{ position:absolute; top:0; width:15%; height:100%; } .left{ left:0; background:#a0b3d6; } .right{ right:0; background:#a0b3d6; } .main{ margin:0 210px; height:100%; } </style> </head> <body> <div> <div class="left"> left </div> <div class="main"> main </div> <div class="right"> right </div> </div> </body> </html>
4. 写一个两列布局，左侧固定高度，右侧自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="gbk"> <title>两列布局，左侧固定高度，右侧自适应</title> <style> body{height:100%; overflow:hidden; margin:0px; padding:0px;} .main {height:100%; background:#9A0069; position:absolute; width:100%;} .fl{ float: left; } .center{ background: #DE5347; width: 100%; height: 100%; } .center .content{ padding: 0 200px; } .left{ width: 200px; height: 100%; margin-left: -100%; background: #009A61; } </style> </head> <body> <div class="main"> <div class="center fl"> <div class="content"> center </div> </div> <div class="left fl"> left </div> </div> </body> </html>
5. css绘制一个奥运五环图案
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>The Olympic Flag</title> <style> body { margin:20px; background-color:#efefef; } ul.flag { list-style-type:none; position: relative; margin: 20px auto; } .flag li, .flag li:before, .flag li:after { -webkit-border-radius: 6em; -moz-border-radius: 6em; border-radius: 6em; position: absolute; } .flag li { width: 12em; height: 12em; left: 0; top: 0; font-size: 1em; } .flag li:after { display: block; content: ""; top: -0.1em; left: -0.1em; right: -0.1em; bottom: -0.1em; border: solid 1.4em black; } .flag .blue { z-index: 10; left: 0; top: 0; } .flag .yellow { z-index: 20; left: 6.8em; top: 5.7em; } .flag .black { z-index: 21; left: 13.6em; top: 0; } .flag .green { z-index: 20; left: 20.4em; top: 5.7em; } .flag .red { z-index: 10; left: 27.2em; top: 0px; } .flag .blue:after { border-color: blue; } .flag .yellow:after { border-color: yellow; } .flag .black:after { border-color: black; } .flag .green:after { border-color: green; } .flag .red:after { border-color: red; } <!--蓝色压住黄色--> .flag .blue.alt { z-index: 24; } .flag .blue.alt, .flag .blue.alt:before, .flag .blue.alt:after { border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; } <!--黄色压住黑色--> .flag .yellow.alt { z-index: 23; } .flag .yellow.alt, .flag .yellow.alt:before, .flag .yellow.alt:after { border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; } <!--绿色压住黑色--> .flag .green.alt { z-index: 23; } .flag .green.alt, .flag .green.alt:before, .flag .green.alt:after { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } <!--红色压住绿色--> .flag .red.alt { z-index: 23; } .flag .red.alt, .flag .red.alt:before, .flag .red.alt:after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; } </style> </head> <body> <ul class="flag"> <li class="blue"></li> <li class="blue alt"></li> <li class="yellow"></li> <li class="yellow alt"></li> <li class="black"></li> <li class="green"></li> <li class="green alt"></li> <li class="red"></li> <li class="red alt"></li> </ul> </body> </html>
二. js
1. js类型有哪些
字符串、数字、布尔、数组、对象、Null、Undefined
2.
'1'+2+3=? //123 '5'-3=? //2
3.
var a = {name:'xiaomin',age:20} var b = a; b.age=22; a.name=? //xiaomin b.name=? //xiaomin a.age=? //22 b.age=? //22
4. 使用原生js或者jquery给一个p标签设定一个点击事件 用于获取自身的文本值
$(function(){ $("p").click(function(){ alert($(this).text()); }); })
5. 使用js遍历以下数据 var json={a:1,b:2,c:3}
var json={a:1,b:2,c:3}; for(var j in json){ document.writeln(j+":"+json[j]); }
6. 编写一个数组去重的方法
Array.prototype.unique = function() { var n = {}, r = [], len = this.length, val, type; for (var i = 0; i < this.length; i++) { val = this[i]; type = typeof val; if (!n[val]) { n[val] = [type]; r.push(val); } else if (n[val].indexOf(type) < 0) { n[val].push(type); r.push(val); } } return r; }
7. 编写一个方法，在数组中找到出现重复数字最多的元素
Array.prototype.repeatmax=function(){ var res = []; this.sort(); for(var i = 0;i<this.length;i++){ var count = 0; for(var j=i;j<this.length;j++) { if(this[i] == this[j]) { count++; } } res.push([this[i],count]); i+=count; } var max = res[0][1]; var postion = 0 ; for(var i = 0 ;i<res.length;i++){ if(res[i][1]>max){ max = res[i][1]; postion = i; } } return res[postion][0]; }
8. 请分析下面代码，给出执行结果，并分析为什么是这样的结果
var json={ name:'xiaomin', sayName:function(){ alert(this.name) } } function Foo(fn){ fn(); } json.sayName(); //xiaomin Foo(json.sayName); //空字符串
9.用原生js或者jquery写一个调用webservice(接口)的例子
a. 如何开发Web API? http://www.cnblogs.com/guwei4037/p/3603818.html
b. 如何跨域调用Web API? http://www.cnblogs.com/guwei4037/p/7193480.html
