求职 | 史上最全的web前端面试题汇总及答案

作者 | 樱桃小丸子儿

链接 |

HTML&CSS

img的alt和title的异同？

alt是图片加载失败时，显示在网页上的替代文字；

title是鼠标放上面时显示的文字,title是对图片的描述与进一步说明;

这些都是表面上的区别，alt是img必要的属性，而title不是。

对于网站seo优化来说，title与alt还有最重要的一点：

搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

html5新元素？

HTML5 中一些有趣的新特性：

①用于绘画的 canvas 元素；

②用于媒介回放的 video 和 audio 元素；

③对本地离线存储的更好的支持；

④新的特殊内容元素，比如 article、footer、header、nav、section；

⑤新的表单控件，比如 calendar、date、time、email、url、search"

以上是w3c上的原话，简单说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。

更详细请看html5新元素

CSS层叠是什么？介绍一下

CSS就是层叠式样式表（Cascading Style Sheets）的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式按照从外到内、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。

CSS实现垂直和水平居中

这是一道经典的问题，实现方法也有很多种，以下是其中一种实现：

具体方案说明：

①使用绝对定位left:50%与margin-left取宽度值一半的复数形式设置水平居中。

②使用绝对定位top:50%与margin-top取高度值一半的复数形式设置垂直居中

HTML结构：

CSS代码：

什么是CSS Hack?

针对不同的浏览器写不同的CSS,就是 CSS Hack。

详情请看以下链接

CSS hack大全&详解（什么是CSS hack）

你知道哪些CSS浏览器兼容性问题。

CSS 多浏览器兼容性问题及解决方案

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（厘米）、in（英寸）绝对单位指定是多少就是多少，计算比较容易。

em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt,则2em就是24pt。类似的还有ex,ex是当前字号高度值（通常是字体尺寸一半）的倍数。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

HTML5离线存储

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

说说你对语义化的理解

①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；

②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

③方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

④便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

描述一段语义的HTML代码

（HTML5中新增加的很多标签（如：、、和等）就是基于语义化设计原则）

如何居中div？

给div设置一个宽度，然后添加margin:0 auto属性

div{width:200px; margin:0 auto; }

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

①

block像块类型元素一样显示。

none缺省值。像行内元素类型一样显示。

inline-block像行内元素一样显示，但其内容像块类型元素一样显示。

list-item像块类型元素一样显示，并添加样式列表标记。

②

absolute

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素（浏览器窗口）定位。

fixed

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative

relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。

static

static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）

对BFC规范的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

描述CSS Reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。

最简化的CSS Reset

CSS定义的权重

CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。

理解选择器的特殊性很重要，特别是在修复bug的时候，但是要尽量避免使用。

CSS选择器的权重与优先规则

CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

• static 自动定位，自动定位就是元素在页面普通文档流中由HTML自动定位，普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。

• relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

• absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定位，可以通过z-index进行层次分级。

• fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。

CSS中margin和padding的区别

margin是外边距，属于元素之外，相邻元素的margin可以融合。

padding是内边距，在元素之内，相邻元素的padding不可融合。

使用CSS预处理器吗？喜欢哪个？

什么是css预处理器？现在阶段我们用不用,怎样用？

JavaScript

JS的基本数据类型

number,string,boolean,object,undefined

JavaScript中如何检测一个变量是一个String类型？请写出函数实现

JavaScript的DOM是什么意思?

DOM是W3C的对象模型，DOM是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容结构和样式。

如何显示/隐藏一个DOM元素

更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。

JavaScript的节点是什么意思?

根据W3C的标准，HTML中文档的所有内容都是节点 ，整个文档是一个文档节点 ，每个html元素都是元素节点， Html元素中的文本是文本节点 ，每个html属性都是属性节点 ，注释是注释节点。

javascript对象的几种创建方式

1、工厂模式

2、构造函数模式

3、原型模式

4、混合构造函数和原型模式

5、动态原型模式

6、寄生构造函数模式

7、稳妥构造函数模式

javascript继承的6种方法

1、原型链继承

2、借用构造函数继承

3、组合继承(原型+借用构造)

4、原型式继承

5、寄生式继承

6、寄生组合式继承

JavaScript继承方式详解

NaN 是什么鬼？typeof 的结果是？如果一个变量的值是 NaN，怎么确定？

NaN 是 'not a number' 的缩写，表示 "不是一个数字"，通常会在运算过程中产生：

console.log('abc' / 4); console.log(4 * 'a');

虽然它 "不是一个数字"，但是 NaN 的 typeof 结果却是 number：

console.log(typeof (4 * 'a')); // number

NaN 和任何变量都不相等，包括 NaN 自己：

console.log(NaN === NaN); // false

判断一个变量是不是 NaN 可以用 isNaN()

函数，但是这并不是一个完美的函数，有些时候用value !== value似乎更准确，幸运的是，ES6 已经有Number.isNaN()方法，将比 isNaN()准确的多。

怎样添加、移除、移动、复制、创建和查找节点？

①创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

②添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

③查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

documentload和documentready的区别

页面加载完成有两种事件

①load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行的一个函数

问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

②$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行。

在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

事件绑定的几种方法？

以button的Click事件为例：

1、直接在元素上绑定回调函数

click me

2、JS获取DOM元素对象后，对onclick属性赋值，绑定事件： document.getElementById('btn').onclick=clickBtn;

3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件：document.getElementById('btn').addEventListener('click',clickBtn);

事件冒泡？

JavaScript事件冒泡简介及应用

在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。

典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。

可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

js将伪数组转换为标准数组的多种方法

常用JS框架都有什么？

前端Js框架汇总

Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

数组方法pop() push() unshift() shift()

push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除

JavaScript中数组对象详解

为什么要用IIFE

简单来说就是为了能模块化，创建私有变量等等，很多类库（比如 jQuery）都用了这样的写法。

详解javascript立即执行函数表达式（IIFE）

严格模式下进行 Javascript 开发有啥好处？

参考阮一峰老师的Javascript 严格模式详解

Javascript 严格模式详解

Node.js的适用场景

高并发、聊天、实时消息推送

描述一下cookies

web前端面试题第五道—简述Cookie，在JS中如何操作Cookie?

事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

①我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

② 事件处理机制：IE是事件冒泡、火狐是 事件捕获；

③ ev.stopPropagation();

如何判断一个对象是否属于某个类

使用instanceof

if(a instanceof Person)

alert('yes');

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

手写数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序

快速排序（Quicksort）的Javascript实现

“快速排序”的思想很简单，整个排序过程只需要三步：

（1）在数据集之中，选择一个元素作为”基准”（pivot）。

（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。

（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

写一个function，清除字符串前后的空格。（兼容所有浏览器）

如何制作一个combo选项

combo选项就是可以手动输入值，也可以选择下拉列表值的选项。

思路：

①布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择。

②编写js，为select添加onchange事件，onchange时将input的value置成select选中的值。

这个网上有很多成品,大家可以自己试一下，下边给出一个。

实现一个combo选项

其它