前端面试题（HTML/CSS/JS）

HTML相关面试题：

1、HTML5的新特性（常问）：

(1) 绘画canvas

(2) 用于媒介回放的video和audio元素

(3) 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失

(4) sessionStorage的数据在浏览器关闭后自动删除

(5) 语义化更好的内容元素，比如article,footer,header,nav,section

(6) 表单控件，calendar,date,time,email,url等

(7) 新的技术webworker,websockt,Geolocation

(8) 移出的元素

a.纯表现的元素：basefont,big,center,font等

b.产生负面影响的元素：frame frameset等

(9) ie8 7 6 支持通过document.createElemet 方法产生新的标签，可以利用这 一特性让这些浏览器支持html5新标签

2、语义化的理解

*HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

*在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；

*搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。

*使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3、块级标签和行内标签的区别：

行内标签（内联标签）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式
常见的行内标签a,strong,b,em,i,del,s,ins,u,span其中span标签是最典型的行内标签。

特点：

• 和相邻行内标签在一行上
• 高、宽无效，但水平方向的padding，margin可以设置，垂直方向的无效
• 行内标签只能容纳文本或者其他行内标签(a特殊 ，a标签里面可以放块级元素)

块级标签：每个块标签通常都会独自占据一行或多整行，可以对其设置宽度，高度，对齐等属性，常用于网页布局和网页结构的搭建

常见的快标签有h1~h6 ，p,div,ul,ol,li其中div标签是最典型的块标签

特点：

• 总是从新行开始
• 高度、行高、外边距以及内边距都可以控制
• 宽度默认是容器的100%
• 可以容纳内联标签和其他标签

行内块标签：在行内标签中有几个特殊的标签 img,input,td 可以对它们设置宽高和对齐属性

特点:

• 和相邻行内标签（或者行内块）在一行上，但是之间有空白缝隙
• 默认宽度就是它本身内容的宽度
• 块、行内标签转换为行内块：display:inline-block;

4、form中的input设置为readonly和disable的区别

readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台

5、什么是WebSocket

这个自行百度，解释起来比较长

6、localstorage sessionstorage和cookie的区别（常问）

基本概念

cookie：是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如登陆某个网站市场可以看到’记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。

sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。

localStorage：是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。

三者区别

1）存储大小

cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）

sessionStorage：5M或者更大

localStorage：5M或者更大

2）数据有效期

cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效

sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据

3）作用域

cookie：在所有同源窗口中都是共享的

sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）

localStorage：在所有同源窗口中都是共享的

4）通信

ccokie：始终携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使用cookie保存过多数据会造成性能问题

sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

5）易用性

cookie：需要自己进行封装，原生的cookie接口不够友好

sessionStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持

localStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持
6）应用场景

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等

sessionStorage：敏感账号一次性登录；单页面用的较多（sessionStorage 可以保证打开页面时 sessionStorage 的数据为空）

localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据

CSS相关面试题：

1、浅谈css中一个元素如何在其父元素居中显示（常问）

方法有很多种：
1、水平居中（margin:0 auto;）
2、水平居中（text-align：center;）　
3、水平垂直居中 子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半
4、水平垂直居中 子元素相对于父元素绝对定位，并且margin值位auto
5、水平垂直居中 diplay：table-cell
6、水平垂直居中 绝对定位和transfrom
7、水平垂直居中 css3中的flex属性

具体可自行百度，此处不添加代码演示

2、清除浮动的方法（常问，最常用的4种）

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.使用after伪元素清除浮动（推荐使用）
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

4.使用before和after双伪元素清除浮动（推荐使用）
优点：代码更简洁
缺点：用zoom:1触发hasLayout.

5、网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局
静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

6、css哪些样式属性可以继承

不可继承的：

display

margin

padding

border

background

height min-height max-height

width min-width max-width

overflow

position left right top bottom z-index

float

vertical-align

所有元素可继承：

visibility

cursor

内联元素可继承：

line-height

color

font font-family font-size font-style font-weight

块状元素可继承：

text-indent

text-align

列表元素可继承：

list-style

7、定位属性（相对定位、绝对定位、固定定位）

相对定位：
让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
绝对定位：
定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
固定定位：
就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
如果不是很理解的小伙伴需要自行百度深入认识一下喔。

8、CSS选择器有哪些？选择器的优先级如何排序？

CSS选择器分类：

CSS的选择器分类可以分为三大类：id选择器，类选择器，标签选择器。

用法如下：

选择器		e.g.	说明
id选择器	#id	#header	选择id="header"的所有元素
类选择器	.class	.message	选择class="message"的所有元素
标签选择器	el	div	选择所有的div元素

优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
权 重： !important：10000
　　　　　内联： 1000
　　　　　id选择器：100
　　　　　类、伪类、属性选择器：10
　　　　　标签、伪元素选择器：1
　　　　　通用选择器（*）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）权重值为0

JS相关面试题：

1、JS的执行机制（重点）：

这里推荐个人觉得很好的一篇文章，耐心看完一定会有收获的
点击此处跳转文章

2、深拷贝 vs 浅拷贝：

因为有些内容比较长，这里同样推个人学习的链接：
点击此处跳转文章

3、“= =” 和 “===”的区别

• = =是判断等于的意思，返回的是一个布尔值，如：alert(1= =1);将返回true，因为1等于1，如果 alert(1==‘1’);也返回true，虽说后面的1是字符串类型，但是= =是不判断类型的，所以还是true，如果：alert(1==‘2’)就是false了，因为1不等于2;
• “= = =”也是判断的，但是它要比= =判断的严谨一点，它的判断必须什么都相等，比如说类型，值;如： alert(1== =1);将返回true，因为它们都是1，而且都是数字类型，如果：alert(1===‘1’);将返回false，因为前面的1是数字类型，后面的1是字符串类型。

4、闭包（常问）

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

var n=999;

function f1(){
　　　　alert(n);
　　}

f1(); // 999

另一方面，在函数外部自然无法读取函数内的局部变量。

function f1(){
　　　　var n=999;
　　}

alert(n); // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

function f1(){
　　　　n=999;
　　}

f1();

alert(n); // 999

如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。

function f1(){

var n=999;

function f2(){
　　　　　　alert(n); // 999
　　　　}

}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

function f1(){

var n=999;

function f2(){
　　　　　　alert(n);
　　　　}

return f2;

}

var result=f1();

result(); // 999

闭包的概念
上一节代码中的f2函数，就是闭包。
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。

function f1(){

var n=999;

nAdd=function(){n+=1}

function f2(){
　　　　　　alert(n);
　　　　}

return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

5、同步与异步的区别

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。

所以，要我请你吃饭就用同步的方法，要请我吃饭就用异步的方法，这样你可以省钱。

6、Javascript的事件流模型都有什么

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

7、javaScript中的最顶层的对象Object

1.Object()函数
Object本身是一个函数，可以当作工具方法使用，将任意值转为对象。这个方法常用于保证某个值一定是对象。
Object()函数还可以传一个参数，如果参数为空（或者为undefined和null），Object()返回一个空对象；如果参数是一个原始类型值，则转化为包装对象；如果参数是一个对象，则返回对象本身。

2.Object 构造函数
Object不仅可以当作工具函数使用，还可以当作构造函数使用，即前面可以使用new命令。
Object构造函数的首要用途，是直接通过它来生成新对象。

var obj = new Object();//等价于 var obj = {}

8、js继承方式及其优缺点

原型链继承的缺点
一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
借用构造函数（类式继承）
借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承
组合式继承
组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

9、new操作符具体干了什么呢

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

10、split与join的区别

（1）split()用于分割字符串，返回一个数组，

例如

var string=“hello world?name=xiaobai”;

var splitString = string.split("?");

console.log(splitString);//[“hello world”,“name=xiaobai”]

split()只有一个参数时：分割的字符串或正则表达式；两个参数时，第二个参数是指返回的数组中元素的个数；

（2）join()用于连接多个字符或字符串，返回值为一个字符串；

例如

var arr= new Array();

arr[0]=“hello”;

arr[1]=“xiao”;

arr[2]= “bai”;

arr.join("&");//“hello&xiao&bai”

join();//默认分割符为逗号；

以上内容均为楼主学习过程中整理的笔记，知识点非原创