前端面试题系列（二）

第二弹

一

1.

①行内元素：占位不能充满正行的元素，不能设置宽高，宽高由内容撑开，只能容纳行内元素。

例如：
     span - 常用内联容器，定义文本内区块 
     em - 强调 
     strong - 粗体强调
     img - 图片   
     input - 输入框 
     ...    

②块级元素：占位充满正行的元素，可以设置宽高，可以容纳任何元素

例如：
     span - 常用内联容器，定义文本内区块 
     em - 强调 
     strong - 粗体强调
     img - 图片   
     input - 输入框 
     ...    

③空元素：没有内容的元素，即单标签，

例如：
     br - 换行
     hr - 水平分割线
     ...    

补充④行内块元素：占位没有充满正一行，宽高可以设置，可以容纳任意元素标签

例如：
     img - 图片
     input - 输入框
     ...    

2.

CSS 引入方式差异看这里，看这里

3.

常用浏览器内核看这里

4.

cookie、sessionStorage和localStorage区别看这里

5.

①title和h1区别：
title标题是给搜索引擎看的，h1标签的内容是给用户看的。
一个页面也可以拥有多个h1，但会稀释主题，不利于搜索引擎搜索，所以通常一个好的网站的一个页面只有一个h1，同时拥有一个title，网站的所有单页都可以拥有一个title，这样有利于SEO优化，另外title的权重高于h1，其适用性要比h1广

②b和strong的区别
b代表bold(粗体)，strong代表强调，强调的默认表现形式就是加粗字体，所以两者在表现形式上一样，有文章说strong有利于SEO优化，实际上两者并没有什么显著的差异。

③i和em区别
em 强调文本，通常以斜体渲染，i 指定文本应以斜体渲染，若可用的话。两者的区别和上面的一样，表现形式一样，但是意义不同。

二

1.

2.

3.

CSS初始化是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

4.

方法：1利用viewport适应屏幕宽高

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

通过@media 控制字体，单位用rem

方法2：通过切换CSS 样式表

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 400px) and (max-device-width: 600px)” href=”smallScreen.css” />

5.

兼容不同屏幕大小终端的网页设计，即可以在不同终端都有完美的网页展示。响应式设计的基本原理即：通过@media媒体查询，动态的改变网页内个元素的样式。

三

1.

js中有5种数据类型：

//基本的数据类型
"boolean"---布尔值
"string" ---字符串
"number"----数值
"undefine"--未定义
"null"------空
//复杂的数据类型
"object" ---对象

2.

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同

function.apply(thisObj,argArray)
function.call(thisObj,arg1,arg2,…)
第一个参数： 应用或者调用的对象，两者没差别
第二个参数：apply接收的是数组 argArray，而call接收的是一个一个的参数

3.

4.

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。IE6,7,8,9均不支持严格模式。它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。

为什么使用严格模式:
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; 消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

5.

Cookie在访问对应域名下的资源的时候都会通过Http请求发送到服务器，但是在访问一些资源（例如js脚本，css和图片）的时候，大多数情况下这些Cookie是多余的，所以我们可以通过使用不同的主机来存储一些静态资源，例如用专门的主机来存储图片，这样访问这些资源的时候就不会发送多余的Cookie，从而提高响应速度。

四

1.

var arr = [98,87,85,53,67,99,90];
var max = Math.max.apply(null,arr);
var index = 0;
for (var i = 0; i < arr.length; i++) {
    if(max === arr[i]){
        index = i
    }
};
document.write(index);

2.

二分法只用于有序数组，如果进行了排序，这样查找出来的下标又不是题目要的答案，所以不懂此题意义何在。

//排序后获取的下标，不知是否为所需的
var arr = [98,87,85,53,67,99,90]; 
for(var i=0;i<arr.length;i++){
    for(var j = i + 1;j<arr.length;j++){
        if(arr[i]>arr[j]){
            var tmp = arr[i];
            arr[i] = arr[j];
            arr[j] = tmp;
        }
    }
}
function binarySearch(data,item,start,end){
    var end=end || data.length-1;
    var start=start || 0;
    var m=Math.floor((start+end)/2);
    if(item==data[m]){
        return m;
    }else if(item<data[m]){
        return binarySearch(data,item,start,m-1) //递归调用
    }else{
        return binarySearch(data,item,m+1,end);
    }
    return false;
}

    console.log(binarySearch(arr,67));

五

hapi是一个简单易用的配置中心框架，内置支持输入验证，缓存身份验证以及用于构建Web和服务应用程序的其他必要设施。 hapi使开发人员能够专注于以高度模块化和规范性方法编写可重用应用程序逻辑