前端面试题

HTML类题目

Doctype的作用

doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。

​

声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

​​

声明必须是HTML文档的第一行，位于html标签之前。 浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过doctype来区分这两种模式，doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctype，浏览器就会进入到Quirks模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而html标准和dom标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在html开头使用doctype。

​

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素有哪些？

• a - 锚点

• em - 强调

• img - 图片

• font - 字体设定 ( 不推荐 )

• i - 斜体

• input - 输入框

块级元素有哪些？

• address - 地址

• blockquote - 块引用

• center - 举中对齐块

• dir - 目录列表

• div - 常用块级容器，也是 css layout 的主要标签

• fieldset - form控制组

• p - 段落

空(void)元素有哪些？

• <br/>换行

• ​<hr/>分隔线​

• <input> //文本框等

• <img> //图片

• <link> <meta>

行内元素和块级元素有什么区别？

• 区别一：

　　　　块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

　　　　行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

• 区别二：

　　　　块级：块级元素可以设置宽高

　　　　行内：行内元素不可以设置宽高

• 区别三：

　　　　块级：块级元素可以设置margin，padding

　　　　行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

• 区别四：

　　　　块级：display:block;

　　　　行内：display:inline;

可以通过修改display属性来切换块级元素和行内元素

导入页面样式时，使用link和@import有什么区别

页面导入样式时，使用link和@import有什么区别？ 先回答区别，再扩展一下。 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载

浏览器内核

浏览器内核（理解） 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

常见的浏览器内核

浏览器的内核的种类很多，常见的浏览器内核可以分为四种：Trident、Gecko、Blink、Webkit。 国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。 代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画canvas；

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

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

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

语义化更好的元素，比如article，footer，header，nav，section；

表单控件：calender，date，time，email，url，search

新的技术：webworker，websockt，Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font，s，strike，tt，u

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：IE8、IE7，IE6支持通过doument.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后还需要添加默认的样式。

当然最好的方式是直接使用成熟的框架，使用最多的是html5shim框架

<!--[if it IE9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何区分HTML和HTML5

DOCTYPE声明，新增的结构元素，功能元素

对HTML5语义化的理解

什么是HTML语义化？ 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 语义化的HTML结构到底有什么好处？ 我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

HTML5的文件离线储存怎么使用，工作原理是什么？

使用方法: HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源 ，这些资源就会像cookie一样被存储了下来。. 之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据 进行页面展示.

原理： HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

CSS类题目

简单介绍CSS的盒子模型？与低版本的IE的盒子模型有什么不同

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)

CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样

标准的CSS的盒子模型的宽高：内容区的宽高

低版本IE的盒子模型的宽高：内容区+内边距+边框

CSS选择符有哪些？哪些属性可以继承

CSS 选择符有哪些？

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div，h1，p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[title]）

9.伪类选择器（a:hover，li:nth-child）

可继承的样式

1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust

2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color

3.元素可见性 visibility

4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout

5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style

6.生成内容属性 quotes

7.光标属性 cursor

8.页面样式属性 page，page-break-inside，windows，orphans

9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

优先级算法如何计算？

1.优先级就近原则，同权重情况下样式定义最近者为准；

2.载入样式以最后载入的定位为准；

3.!important > id > class > tag；

4.important 比 内联优先级高，但内联比id要高；

CSS3新增伪类有哪些

css3新增伪类有：:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)等等。

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

如何水平居中一个div？

1.不需要知道宽高

css:

#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute/fixed;
      top:0;bottom:0;left: 0;right: 0;margin:auto;
}

html:
    

<div id="wrap"</div>

2.知道宽高

css:

    #wrap{
    width: 200px;
    height: 200px;
    background: orange;
    position: absolute;
    top:50%;left: 50%;margin-top:-100px;margin-left: -100px;
}

html:

 <div id="wrap"</div>

3.弹性盒

css:

    *{margin:0;padding: 0;}
    html,body{
        height: 100%;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #wrap{
    width: 200px;
    height: 200px;
    background: orange;
    }

html:

       <div id="wrap"</div>

如何居中一个浮动元素？

css:

.outerbox {
    float: left;
    position: relative;
    left: 50%;
}
​
.innerbox {
    float: left;
    position: relative;
    right: 50%;
}

html:

<div class="outerbox">
    <div class="innerbox">我是浮动的</div>
</div>

​​如何让绝对定位的div居中

css:

.center{
         position: absolute; /*绝对定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0; /*此处不能省略，且为0*/
}

html:

<div class="center"></div>

​

display有哪些值？说明他们的作用

常用的有： none：此元素不显示。 block：将元素显示为块级元素，前后会带换行符。 inline:默认值，元素会被显示为内联元素，前后没有换行符。 inline-block:行内块级元素。

position的值relative和absolute定位原点是？

relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的

CSS3有哪些新特性?

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

转换:

旋转 transform: rotate（20deg）；

倾斜 transform: skew（150deg, -10deg）；

位移 transform:translate（20px, 20px）；

缩放 transform: scale（。5）；

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

• 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

• 试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

用纯CSS3创建一个三角形的原理是什么？

1.采用的是均分原理

非常有意思的是盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部

2.代码的实现

第一步 保证元素是块级元素

第二步 设置元素的边框

第三步 不需要显示的边框使用透明色

.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border:6px solid transparent;  
     border-top: 6px solid red;  
 }  

第二种写法：

.square{    
    width:0;
    height:0;       
    margin:0 auto;      
    border-width:6px;    
    border-color:red transparent transparent transparent;    
    border-style:solid dashed dashed dashed;//为了兼容IE6，把没有的边框都设置为虚线 
}

效果如下：

JavaScript类题目

JavaScript中this是如何工作的

先来看看这个题目：

var x = 0;
var foo = {
    x:1,
    bar:{
    x:2,
    baz: function () {
       console.log(this.x)
     }
    }
}
​
var a = foo.bar.baz
foo.bar.baz() // 2
a() //0

• this 永远指向函数运行时所在的对象，而不是函数创建时所在的对象

• 匿名函数和不处于任何对象中的函数，This指向window

• call, apply, with指的This是谁就是谁。

• 普通函数调用，函数被谁调用，This就指向谁

上面的例子中，baz被bar调用所以指向的指bar. a 运行时所在的对象是 window,所以指向的是window。

什么是闭包（closure），如何使用它，为什么要使用它

闭包closure就是能够读取其他函数内部变量的函数。 在JS中，只有函数内部的子函数才能读取局部的变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。 本质上，闭包就是将函数内部和外部连接起来的一座桥梁

闭包的用处： 1.可以读取函数内部的变量； 2.可以让这些变量的值始终保持在内存中。

var x = 0;
var foo = {
    x:1,
    bar:function () {
        console.log(this.x);
        var that = this;
        return function () {
           console.log(this.x)
           console.log(that.x)
        }
    }
}
foo.bar()       // 1
foo.bar()()     // this: 0, that: 1

上面的例子中ba'r里面返回了一个匿名函数，这个匿名函数可以在外部被调用即：foo.bar()() 读取到了bar的执行上下文的变量对象 that，这个函数就形成了一个闭包。

好了，我们理解了上面的套路，下面来解释闭包就好理解了。

闭包就是能够读取其它函数内部变量的函数

在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”

var x = 0;
var bar:function () {
        var n = 999;
        return function () {
           return n;
        }
    }
var outer = bar();
outer() // 999

用途：

1. 读取函数内部的变量

2. 让这些变量的值始终保持在内存中

我们修改一下上面的代码

var add;
var bar = function () {
        var n = 999;
        add = function () {
            n += 1;
        }
        return function () {
           return n;
        }
    }
var outer = bar();
outer() // 999 
add();
outer(); // 1000

说明，n一直保存在内存当中，而没有在bar()执行完成之后被销毁； 原因： bar里面的匿名函数被赋值给了outer，这个导致在outer没有被销毁的时候，该匿名函数一直存在内存当中，而匿名函数的存在依赖于bar，所以bar需要使用都在内存当中，所以bar并不会在调用结束后呗垃圾回收机制给收回。

而上面的add接受的也是一个匿名函数，该匿名函数本身也是闭包，所以也可以在外部操作里面的变量。

注意点

1. 会导致内存泄漏，慎用

2. 闭包会修改内部变量的值，所以在使用闭包作为对象的公用方法时要谨慎。 闭包的一个应用，单例模式

.call 和 .apply 的区别是什么

共同点

call（对象，param1,param2,…）和apply(对象，[param1,param2,…])的共同点：都是用来改变函数体内this的指向，函数的第一个参数代表函数体内的this的指向

如果参数为空或者为null，则this对象的作用域是全局作用域，在浏览器中则指向window对象。但在严格模式下，函数体内的this=null

不同点

call（对象，param1,param2,…）和apply(对象，[param1,param2,…])不同点

apply()接受两个参数，第二个参数是一个带下标的集合，类数组或数组；call()传入的参数数量不固定，从第二个参数开始是具体的参数

call/apply的用途

1）改变函数体内部this的指向

2）Function.prototype.bind-----指定函数体内的this指向，即bind()函数的第一个参数就是函数体内this的指向

解释 Function.prototype.bind:

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2);//f()中的this指向{x : 1}，y=2,z=3
console.log(m(3));//6
​
//2
​
function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2,3);//f()中的this指向{x : 1}，y=2,z=3
console.log(m()); //6

（3）借用其他对象的用法

借用构造函数-----实现类似继承的效果，在子函数的内部通过apply/call调用父函数的构造函数

借用其他函数实现一些特定的功能

1、将arguments类数组转成真正的数组arr = [].slice.call(arguments);
2、截去arguments的头一个函数arr = [].shift.call(arguments);
3、往arguments中添加新的元素arr = [].push.call(arguments,2);
4、改变参数Math.min().call(null,1,2,3,4)  Math.max.apply(null,[1,2,3,4])
​

javascript中宿主对象和原生对象的区别是什么

区别：原生对象是独立于宿主环境的ECMAScript实现提供的对象，即ECMA-262定义的类（引用类型）；而宿主对象是由ECMAScript实现的宿主环境提供的对象，所有非原生对象都是宿主对象。