HTML+JS+CSS面试题

specterxu

浏览: 11990 次
性别:

最近访客更多访客>>

罗正波

不奇怪吧

阿迪达斯

xh084011250

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端
面试题
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
'''

分享到：

简单搭建nodeJS服务，访问本地站点文件

2017-06-20 10:33
浏览 392
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论