前端开发面试题（一）

一. 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>

View Code

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>

View Code

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>

View Code

二. js

1. js类型有哪些

字符串、数字、布尔、数组、对象、Null、Undefined

'1'+2+3=?  //123
'5'-3=?  //2

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

相关阅读:
numpy之数组属性与方法
 numpy之数组创建
 matplotlib之直方图
 matplotlib之条形图
 matplotlib之散点图
 matplotlib之折线图
 Kettle使用教程之数据同步
 Kettle使用教程之Job使用
 Kettle使用教程之安装与资源库的创建
 Ubuntu16.04配置单机版Zookeeper和Kafka
原文地址：https://www.cnblogs.com/guwei4037/p/5607088.html

热门文章
深拷贝浅拷贝
 windows线程时间打印
 Cmake
Git命令
 C/C++文件读取
 多线程与信号量
 windows的共享内存
 面试题
 Base64
numpy之数组计算