百度web前端面试题 经典分享 时间：2017-12-07     来源：百度web前端面试题汇总

大公司的web前端面试题总是具备一定的参考价值，对于我们面试来说也有一定的帮助作用，今天小编汇总了一套百度经典的web前端面试题，也是大家面试经常遇到的问题，希望对于大家日后的面试能够有所帮助。

1、简述以下常见标签的语义以及默认的display值：p, li, ul, form, b，img，这几个dispaly值的区别是什么?

p 段落 display: block;

li 列表 display: block;

ul 列表 display: block;

form 表单 display: block;

b 粗体 display: inline;

img 图片 display: inline-block;

区别：

block元素

1、如果没有设置宽度会自动填满父容器

2、可以应用margin/padding

3、如果没有设置高度会拓展高度，包含常规流子元素

4、处于常规流前后元素独占水平空间

5、忽略vertical-align

inline元素

1、水平方向从左到右依次布局

2、margin/padding 在垂直方向无效，在水平方向有效

3、不会再元素前后换行

4、浮动或绝对定位自动转换成 block

5、vertical-align属性无效

6、元素宽度由元素内容决定

inline-block 元素

1、可以设置宽高

2、其他基本同 inline元素属性

2、有哪些方法可以隐藏元素?

1、display:none;

2、visibility: hidden;

3、opacity: 0;

3、什么是跨域?都有哪些方式可以进行跨域?

跨域就是不同域名下的通信来往。

跨域方式：

1、jsonp 请求

2、 HTML5新规范的CORS功能,只要目标服务器返回请求头部**Access-Control-Allow-Origin: *** 即可

3、通过内部服务器代理，实现跨域

4、<img>,<script>,<link>,<iframe>，通过src，href属性设置为目标url,实现跨域请求

4、简述jsonp的原理

通过<script>标签没有跨域限制来进行数据交互。

就是提供一个回调函数接受json数据，在浏览器中执行并处理穿过来的数据。

5、如何设计一个轮播插件，用伪代码简述思路（初始化让所有的图片样式z-index:0,display:none默认第一个图片显示 z-index:4,display:block）

t = setInterval(move, 5000);

function move() {

num++;

if (num == imglen) {

num = 0;

};

show(num);

};

function show(index) {

给index当前元素添加活动类显示隐藏

}

鼠标放在容器时，清除t，离开继续执行 t = setInterval(move, 5000);

6、如何实现一个移动端"tap"事件

function tap(d,callback) {

var startTime = 0,

delayTime = 200,

isMove = false;

d.addEventListener("touchstart",function(){

startTime = Date.now();

},false)

d.addEventListener("touchmove",function(){

isMove = true;

},false)

d.addEventListener("touchend",function(){

if(isMove) return;

if(Date.now()-startTime>delayTime) return;

callback();

},false)

}

7、前端有哪几种本地存储方式，简述各自的特点

localStorage、 sessionStorage、 cookie、web sql

localStorage:

1、有效期永久

2、同源可以读取并修改localStorage数据

sessionStorage:

1、有效期顶层窗口关闭前

2、值允许同一窗口访问

cookie：

1、有效期可以设置

2、cookie作用域通过文档源和文档路径来确定

3、储存数据量小

web sql：

1、可以储存大量结构化数据

8、写一个js函数，实现对一个数字每3位加一个逗号，如输入100000， 输出100,000

function farmat(mun) {

if (mun === null) return;

var m = parseInt(mun).toString();

var len = m.length;

if (len <= 3) return m;

var n = len % 3;

if (n > 0) {

return m.slice(0,n)+","+m.slice(n,len).match(/\d{3}/g).join(",")

} else {

return m.slice(n,len).match(/\d{3}/g).join(",")

}

}

var a =farmat(100000)

console.log(a);

9、简述常见的http状态码

200 请求成功

404 Not Found

500 服务端错误

10、什么是事件代理，它的实现原理是什么?

通过事件冒泡，指定一个事件处理程序，就可以管理某一类型事件。

原理就是事件从深节点开始逐步向上传播事件。