HTML+JS+CSS面试题

1.如何消除一个数组中的重复元素?

var arr1 =[1,2,2,2,3,3,3,4,5,6],
var arr2 = [],
for( var i = 0 , len = arr1.length ; i< len ; i++ ){
    if( arr2.indexOf(arr1[i]) < 0 )
        arr2.push(arr1[i]);
}
document.write(arr2);

2.块元素、行元素、空元素

块元素又称为块级元素(block element),块级元素在浏览器显示时,通常会以新行来开始(和结束)。

常见的块元素:

address、blockquote、center、dir、div、dl、form、h1-h6、table、td、th、tr、p、ul、ol等

常见的行元素:

a、b、code、em、img、input、label、select、span、strong、textarea等

常见的空元素:

area、link、col、meta、track等

3.浏览器内核

IE浏览器 —— Trident内核

Firefox浏览器 —— Gecko内核

Safari浏览器 —— Webkit内核

Opera浏览器 —— Presto内核

Chrome浏览器 —— Blink内核

常用的DOCTYPE具体声明

1.htm5  :  <!DOCTYPE html>

2.html 4.01  : 严格模式包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);过渡模式包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);框架模式等同于过渡模式,但允许框架集内容。 


HTML 4.01 Strict :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

3.XHTML 0.1 :前三种模式同上,XHML 必须以格式正确的 XML 来编写标记。 

XHTML 1.0 Strict :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

XHTML 1.0 Transitional :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5.用纯CSS画一个三角形,底边为100px

<div id="sanjiaoxing"></div>


#sanjiaoxing{
    width: 0px;
    height: 0px;
    border-left: 50px slide transparent;
    border-right: 50px slide transparent;
    border-bottom: 100px slide transparent;
}

6.js随机生成数

Math.random();  /*结果为0-1之间的一个随机数(包括0,不包括1)*/
Math.floor(num);  /*参数num为一个数值,函数结果为num的整数部分*/
Math.round(num);  /*参数num为一个数值,函数结果为num四舍五入后的整数*/

Math.ceil(n);  /*返回大于等于n的最小整数。*/
/*用Math.ceil(Math.random()*10);时,主要获取1到10的随机整数,取0的几率极小。*/

Math.round(n);   /*返回n四舍五入后整数的值。*/
/*用Math.round(Math.random());可均衡获取0到1的随机整数。
用Math.round(Math.random()*10);时,可基本均衡获取0到10的随机整数,其中获取最小值0和最大值10的几率少一半。*/

Math.floor(n);   /*返回小于等于n的最大整数。*/
/*用Math.floor(Math.random()*10);时,可均衡获取0到9的随机整数。*/

7.请尽可能详尽的解释AJAX的工作原理

创建ajax对象(XMLHttpRequest/ActiveXobject(Microsoft.XMLHttp))

判断数据传输方式(GET/POST)

打开链接open()

发送send()

当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数

8.原生js实现ajax过程

var Ajax={
    get: function (url,fn){
        var obj=new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        obj.open('GET',url,true);
        obj.onreadystatechange=function(){
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { 
                // readyState==4说明请求已完成
                fn.call(this, obj.responseText);  //从服务器获得数据
            }
        };
        obj.send(null);
    },
    post: function (url, data, fn) {
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 发送信息至服务器时内容编码类型
        obj.onreadystatechange = function () {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}

jQuery实现ajax

$.ajax({
    type: "POST",
    url: "index.php",
    dataType: "json",
    data:{
        "val1": "abc",
        "val2": 123,
        "val3": "456"
    },
    beforeSend: function(){

    },
    success: function(msg){
        console.log(msg)
    },
    error: function(){
         console.log("error")
    }
})

  

9.js中怎么检测一个变量是string类型?请写出一个函数实现

typeof(obj) == 'string';

obj.constructor == string;

10.浏览器标准模式和怪异模式之间的区别是什么?

盒模型解释不通

11.JavaScript的typeof返回哪些数据类型?

string  number  boolean  undefined  object  function

12.统计一串字符串中字母的个数,或者出现次数最多的字母

var str = "aaaabbbccccddfgh";
var obj  = {};
for(var i=0;i<str.length;i++){
    var v = str.charAt(i);
    if(obj[v] & obj[v].value == v){
        obj[v].count = ++ obj[v].count;
    }else{
        obj[v] = {};
        obj[v].count = 1;
        obj[v].value = v;
    }
}
for(key in obj){
    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}

 13.变量提升

写出下列程序的输出结果

function test() {
    console.log(a);
    console.log(foo());
    var a = 1;
    function foo() {
        return 2;
    }
}

test();

输出结果为   undefined  2

再来看几个例子

    var scope="全局变量";
    function checkscope(){
        var scope="局部变量";
        function nested(){
            var scope = "嵌套作用域内的局部变量";
            alert(scope);//输出:嵌套作用域内的局部变量
        }
        nested();
        alert(scope);//输出:局部变量
    }
    checkscope();
    alert(scope);//输出:全局变量

从上面的例子中可以看到,局部变量的作用域仅仅在函数内部,出了函数体之后,局部变量就会被销毁。在nested()函数中,虽然又声明了一个scope,但是nested()中的scope是局部变量,只是与全局变量的名字相同,并不是全局变量,所以,虽然在该函数中把scope赋值为“嵌套作用域内的局部变量”,但这仅仅是一个与全局变量名称相同的一个变量而已,并没有改变全局变量的值。

我们通过下面的这个例子进一步理解函数作用域的问题。

    var scope="全局变量";
    function checkscope(){
        var scope="局部变量";
        function nested(){
            scope = "嵌套作用域内的局部变量";
            alert(scope);//输出:嵌套作用域内的局部变量
        }
        nested();
        alert(scope);//输出:嵌套作用域内的局部变量
    }
    checkscope();
    alert(scope);//输出:全局变量

 上面这部分代码中,在nested()函数中,我们并没有用var来声明scope,所以,在这里的scope的作用域就被提升了,即我们将checkscope中的scope的值重置了,所以在输出的时候输出的结果为“嵌套作用域内的局部变量”。

 14.JavaScript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){
    var args = Array.prototype.slice.call(arguments);
    //为了使用unshift数组方法,将argument转化为真正的数组
    args.unshift('(app)');

    console.log.apply(console, args);
};

 15.请分别写出HTML,JavaScript,CSS,Java,PHP,Python的注释代码格式。

<!--
<html>
</html>
--!>

//javascript

/*
*javascript
*/

/* css */

//java

/*
*java
*/
//PHP
#PHP
/*
*PHP
*/
#Python
'''
Python
'''

猜你喜欢

转载自specterxu.iteye.com/blog/2380266