前端面试题总结
1、html5的新特性？
canvas绘画
用于媒介回放的video和audio元素
本地离线存储localStorage可以长期存储，并且在浏览器关闭之后可以保存很长一段时间，sesstionStorage在浏览器关闭之后会丢失
语义化更好的标签，如article、nav、section、footer、header
表单控件calendar、date、time、email
新的技术websock、websocket
2、html标签语义化的理解？
用正确的标签做正确的事
html标签语义化可以让页面的内容结构化，让结构更加清晰，便于对浏览器、搜索引擎解析
即使在没有css样式的情况下，也以一种文档格式显示，易于阅读，易于SEO,易于阅读和维护
3、html5离线存储
在用户没有网络连接的时候，可以正常访问站点或应用，在用户有网络连接时，更新用户机器上的缓存文件
原理：html5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
3.1、页面头部像下面一样加入一个manifest的属性；
3.2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3.3、在离线状态时，操作window.applicationCache进行需求实现。
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
4、css居中
水平居中
div{
width: 200px;
margin: 0 auto;
}
让绝对定位的div居中
div{
position: absolute;
width: 500px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0
}
水平垂直居中显示
1、 div{ position: absolute; width: 500px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; } 2、 未知容器的宽高 div{ position:absolute; width: 500px; heigth:300px; top: 50%; left: 50%; transform: translate(-50%,-50%) }
3、利用flex布局
.container{
display: flex;
align-items:center;//垂直居中
justify-content: center;//水平居中
}
.container div{
width: 100px;
height: 100px;
}
5、ie盒模型和标准盒模型
IE盒模型
box-sizing: border-box;
width: 400px;
盒子width=padding+border+content = 400px
标准盒模型
box-siziing: content-box
width: 400px;
盒子width = padding + border + 400px(content)
6、css优先级确定
每个选择器都有权值，权值越大越优先，
继承的样式优先级低于自身指定样式
！important优先级最高，js也无法修改
权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）
7、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
8、BFC
block formatting context 块级格式化上下文，它是页面中的一个独立的渲染区域。只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
BFC应用
解决margin叠加。两个div的margin会叠加。比如上下两个div，上面的div设置margin-bottom：10px，下面的div设置margin-top:10px，这个时候两个div的间距是10px，而不是想象中的20px；如果想要两个div的间距为20px，可以对其中一个div通过display:inline-block来触发BFC，这样两个div就不会发生margin重叠了。
用于布局；
用于清除浮动，对父元素设置overflow:hidden
9、如何让chrome支持小于12px的字体
我们都知道，chrome浏览器支持的最小字体就是12px，无论你对字体设置10px还是8px，页面中显示的还是12px，但是我们可以使用transform:scale()来对字体进行缩放从而达到目的
10、flex布局的优势？又称圣杯布局
圣杯布局是一种左中右布局，左右两栏固定宽度，中间内容栏自适应宽度，当pc端屏幕够宽时，会呈现水平三栏布局，当在移动端时，屏幕较小，会呈现垂直的三栏布局；圣杯布局的优势在于只需要写一套代码，就可以同时兼容pc端和移动端。父div display: flex; flex-low: row nowrap;子div flex: 1 6 20%;order:1; 最大放大一倍，最小可以缩小6倍，占据父div的20%，order是子div的顺序
11、div+css布局较table布局的优缺点？
div+css布局的符合w3c的标准，代码结构清晰明了，结构、样式和行为分离，带来了足够的维护性，布局精准，网站版面布局修改简单，加快了页面的加载速度，节约站点所占的空间和站点的流量。用只包含结构化内容的html代替嵌套的标签，提高搜索引擎对网页的搜索效率。
table布局容易上手，可以形成复杂的变化，简单快速，在不同浏览器中有很好的兼容。
12、img图片标签的alt和title属性的区别
alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读
13、渐进增强和优雅降级之间的不同？
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强是一个非常基础，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
14、cookie和session的区别？
- cookie数据存放在客户端的浏览器上，session数据放在服务器上
- cookie不是很安全，别人可以分析存放在本地的cookie进行cookie欺骗
- session会在一定时间内保存在服务器上，当访问增多，会比较占用服务器的性能，考虑减轻服务器性能方面，应当使用cookie
- 单个cookie保存的数据不能超过4k，很多浏览器现在一个站点最多保存20个cookie
- 将登录信息等重要信息存储在session，其他信息若要保留，放在cookie中
15、浏览器的cookies、sessionStorage、localStorage的区别？
共同点：都是保存在浏览器端，并且使同源的 （协议、端口、主机名相同）
不同点：
-
- cookie数据始终在http请求中携带，即在客户端和服务器端间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存
- 存储大小限制不同。cookie数据不能超过4k，同时每次http请求都会携带cookie，所以cookie只适合保存很小的数据，sessionStorage和localStorage虽然也有储存大小的限制，但是比cookie大的多，可以达到5M或更大
- 数据有效期不同。sessionStorage仅在当前浏览器关闭之前有效；localStorage始终有效。窗口或者浏览器关闭之后也一直保存，因此作用持久数据。cookie只在设置过期时间之前有效，即使关闭窗口或者浏览器。
- 作用域不同。sessionStorage在不同的浏览器窗口中不共享，即使同一个页面。localStorage在所有的同源窗口中是共享的，cookie也是。
16、href和src的区别？
href表示超文本引用，用在link和a等元素上，用来建立当前元素和文档之间的链接
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src指向的内容会嵌入到文档中当前标签所在的位置
17、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存、cdn缓存、浏览器缓存 、服务器缓存
18、css中可以让文字在垂直和水平方向重叠的属性是什么？
垂直方向：line-height
水平方向：letter-spacing
19、normalize.css和reset的css文件的异同？
相同点：重置样式；保持跨浏览器一致性
不同点：reset通过为几乎所有的元素施加默认样式，强行是的元素有相同的视觉效果，而normalize.css保持了许多浏览器的默认样式，它会力求这些样式保持一致并尽可能与现代标准符合
20、html5中的link和@import引入外部css文件的区别？
- link属于html标签，而@import是css提供的一种方式
- @import有引入次数的限制，只能引入31次
- 当页面加载时，link引用的css会同时被加载，而@import引入的css文件会在等待主页面全部加载完成后才会被加载，所有网速较慢时，可能只有页面而没有样式，需要过一段时间才会被加载出来
- @import只能在IE5以上才能使用识别，而link则没有浏览器版本限制
- 当使用javascript控制dom去改变样式表里面的样式时，只能用link，dom不能控制@import
21、doctype的作用？严格模式和混杂模式的区别？
doctype声明文档的类型，告诉浏览器该文档的类型，让浏览器知道应该用哪个规范来解析文档。
严格模式又称标准模式，是指浏览器按照w3c标准解析代码
混杂模式又称怪异模式或兼容模式，是指浏览器按自己的规范解析代码
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
22、html和xhtml的区别
-
XHTML 元素必须被正确地嵌套 -
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br /> -
XHTML 标签名必须用小写字母
-
XHTML 文档必须拥有根元素 -
XHTML 文档要求给所有属性赋一个值 -
XHTML 要求所有的属性必须用引号""括起来 -
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示 -
XHTML 图片必须有说明文字 -
XHTML 文档中用id属性代替name属性
22、前端页面由哪三层构成？作用分别是什么？
结构层、表示层、行为层
html实现页面结构，css完成页面的表现与风格，javascript实现客户端的功能与业务
23、javascript的typeof返回哪些数据类型？
undefined、string、number、object、Function、boolean、symbol
24、强制类型转换和隐式转换
通过String()、Number()、Boolean()函数强制转换
JavaScript的数据类型分为六种，分别为null,undefined,boolean,string,number,object。object是引用类型，其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型，叫做类型转换，类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等。。 console.log(10+'5')//105；console.log(10-'2')//8 number
25、javascript中spilt()和join()的区别？
共同点：两个函数通常都是对字符或者字符串的操作
区别：split()用于分割字符串，返回一个数组
join()用于连接多个字符或字符串，返回值为一个字符串，默认连接符为逗号
26、javascript中的pop() push() shift() unshift()？
push()方法可以在数组的末尾添加一个或多个元素
pop()方法把数组中的最后一个元素删除
shift()方法把数组中的第一个元素删除
unshift()方法在数组的前端添加一个或多个元素
27、javascript中事件绑定和普通事件的区别？
普通事件中的onclick是DOM0级事件只支持单个事件，会被其他onclick事件覆盖；而事件绑定中的addEventListener是DOM2级事件，可以添加多个事件而不会被覆盖。
未完待续...........
