1.HTML语义化的理解和作用？
理解：根据具体内容，选择合适的标签(每个标签都有自己特定的语义)进行代码的编写。便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别。（用正确的标签包含正确的内容，比如nav标签，里面就应该包含导航条的内容，而不是用做其他的用途，标签语义化的好处就是结构良好，便于阅读，方便威化，也有利于爬虫的查找，提高搜索率。）
作用：
a.有利于SEO，搜索引擎的爬虫是读不懂无语义的span和div的，因此语义化标签能使爬虫抓取更多的有效信息。
b.语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
c.方便其他设备的解析和便于团队开发和维护
2.CSS规范？
a.命名规范：
css文件命名：按照功能模块划分css文件，如reset.css；global.css；themes.css....等，这是开发阶段的规范做法，等到整站发布上线的时候，用工具将多个css文件压缩成一个。
id和class命名：使用中划线命名，命名时一般取父元素的class作为前缀。
书写规范（顺序）：影响文档流属性；自身盒模型属性；文本属性；装饰属性；其他属性。
注释规范：顶部注释（作者，说明，时间）；模块注释（...部分，开始；...部分，结束）；防压缩注释（在注释内容最前面加" ! "）。
Css reset样式：HTML标签在不同浏览器下有不同的默认样式，这是为了保证在没有样式表的情况下也能正常显示，也是HTML语义化的意义所在。例如button元素在IE，chrome，firefox等浏览器中的默认样式都不同，为了开发效率，就可以使用reset.css样式来去除浏览器的默认样式。
浏览器对css选择器的解析是从右到左的方向；
3.盒模型？
将HTML元素看成盒子，它包括：边距（margin）、边框（border）、填充（padding）和实际内容。注意：当你指定一个css元素的宽度和高度属性，你只是设置了实际内容区域的高度和宽度，而完全大小的元素，你还必须加上填充，边框和边距。盒模型的宽度和高度计算：
总宽度：宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
总高度：高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距
外边距叠加：只符合block和inline-块级元素，inline元素的margin-top和margin-bottom设置无效；水平方向永远不会叠加；垂直方向叠加之后取最大值。
负margin：margin-top和margin-left为负数时，当前元素会被拉向指定方向；
margin-bottom和margin-right为负数时，后续元素会被拉向指定方向；
技巧：a.图片和文字并列上下不对齐，可以给图片设置margin：0 3px -3px 0；
b.自适应两列布局，主体列宽度设置100%，另外一列设置固定宽度，主题列负marign另外一列的固定宽度；
4.实现三栏布局，左右定宽，中间自适应？
1.绝对定位方法；2.使用自身浮动法；3.圣杯布局（负margin值法）；4.flex布局
5.详细说说box-sizing属性取值的区别？
content-box(默认值)：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：从父元素继承 box-sizing 属性的值。
6.块级元素和行内元素的区别？
1.块元素，总是独占一行；内联元素，能和其他元素并列在一行；
2.块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；
3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。
4.行内块元素实际就是把块元素以行的形式展现,保留了块元素可以设置的对应CSS属性
7.清除浮动？
1.父级div手动定义height，就解决了父级div无法自动获取到高度的问题,只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
2.结尾处加空div标签 clear:both;添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度。
3.父级div定义伪元素:after 和 zoom；IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
4.父级div定义 overflow:hidden；必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度，不能和position配合使用，因为超出的尺寸的会被隐藏。
5.父级div定义 overflow:auto；必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度，内部宽高超过父级div时，会出现滚动条。
6.父级div 也一起浮动，所有代码一起浮动，就变成了一个整体
7.父级div定义 display:table；将div属性变成表格。
8.什么是BFC,怎么触发BFC?
块级元素格式化上下文；它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。块级元素：父级（是一个块元素；内容：子元素（是一个块元素）；其他元素：与内容同级别的兄弟元素相互作用：BFC里的元素与外面的元素不会发生影响。
触发BFC的方式（一下任意一条就可以）
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell、table-caption和inline-block之一
4.position的值不为static或则releative中的任何一个
9.伪类和伪元素的区别？
有没有创建一个文档树之外的元素。
常用伪类：:link，:visited，:hover，:active，:focus，:first-child，nth-child等；
常见伪元素：::before/:before，::after/:after
10.什么是reflow 和 repaint?
reflow（回流）指的是计算页面布局。
repiant（重绘）遍历所有的节点检测各节点的可见性、颜色、轮廓等可见的样式属性，然后根据检测的结果更新页面的响应部分。
11. 前端怎么做优化？
1、使用css sprites，可以有效的减少http请求数
2、使用缓存
3、压缩js，css文件，减小文件体积
4、使用cdn，减小服务器负担
5、懒加载图片
6、预加载css，js文件
7、避免dom结构的深层次嵌套
8、给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流
12.不同浏览器之间的兼容性问题？
a.html部分
1）h5标签低版本浏览器无法解析，htmlshim框架可以让低于IE9的浏览器支持h5标签
2）img的alt属性，在图片不存在的情况下，各浏览器的解析不一致；在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字
3）ul标签内外边距问题，ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距
b.css部分
1）css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
2）被点击过后的超链接不再具有hover和active属性，解决办法:按link，visited，hover，active的顺序书写css样式
3)在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
c.js部分
1）标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
2）事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
3）事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
4）ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
5）IE中不能操作tr的innerHtml
6）获得DOM节点的父节点、子节点的方式不同
其他浏览器：parentNode parentNode.childNodes
IE：parentElement parentElement.children
13.异步settimeout和setinterval的区别？
setTimeout：在指定的毫秒数后，将定时任务处理的函数添加到执行队列的队尾。(执行一次)。
setInterval：按照指定的周期(以毫秒数计时)，将定时任务处理函数添加到执行队列的队尾。（以指定时间为周期循环执行）
注意：setInterval根据HTML规范可知：在一个小时之内会延迟 4-5ms这么一个延迟。也就是说使用这个计时不是非常精确。
14.map和forEach区别？
1、map速度比foreach快
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
3、map因为返回数组所以可以链式操作，foreach不能。
15.DNS解析？
域名与IP地址之间是多对一的关系，一个ip地址不一定只对应一个域名，且一个域名只可以对应一个ip地址，它们之间的转换工作称为域名解析。
16.ES6的模块化是什么
ES6中的模块就是一个个独立的js文件。es6中新增了两个命令export和import,export命令用于规定es6模块的对外接口，import 命令用于输入其他es6模块化提供的功能。
17.列举出通过CSS样式隐藏元素的方法，并说明其区别？
1、opacity:0
只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。
2、visibility:hidden
对网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。
3、diaplay:none
被隐藏的元素不可见并且连盒模型也不生成，不占据任何空间，用户交互操作都不可能生效。
4、position:absolute
将元素移出可视区域，既不会影响布局，有可能让元素保持可以操作。
18.列出移动端开发中适配各种屏幕尺寸的解决方案(至少3种)？
a.固定高度，宽度自适应
视口：<meta name="viewport" content="width=device-width,initial-scale=1">
垂直方向用定值，水平方向用百分比、定值、flex都行。
b.固定宽度，viewport缩放
视口：<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。
c.rem做宽度，viewport缩放
根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位
19.图片近似垂直居中与完全垂直居中？
近似垂直居中：如果div内插入了img图片后就尽量别插入其他元素，比如文字或者其他标签，否则img可能会不是100%的垂直居中，可能会偏上或者偏下一点点距离。
垂直居中：<div><img style="vertical-align:middle" src="#" /></div>
<div><img align=absmiddle src="#" /></div>
20.介绍闭包？
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。
闭包的用处有两个：
- 可以读取函数内部的变量
- 让这些变量的值始终保持在内存中
闭包的缺点：
1.闭包使得函数中的变量都被保存在内存中，内存消耗很大，滥用闭包会造成网页性能问题，在IE中导致内存泄漏。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 - 闭包会在父函数外部，改变父函数内部变量的值。
21.数组去重？
22.数据类型有哪几种？引用和基本数据类型的区别？
基本数据类型：
undefined，null，boolean，number，string，symbol；
引用数据类型：
Object，Array，Date，RegExp，Function，Number，String，Boolean，Global，Math；
两者区别：
基本数据类型是简单的数据段，存储在栈中，可以直接进行复制和保存等访问操作；引用数据类型是有多个值构成的对象，存储在堆中，当访问引用数据类型时，需要先找到对象在内存中的地址，在按照地址去获取对象中的值，这叫做引用访问，引用数据类型进行参数传递时，传递的是内存地址。
22.Ajax原理？
Ajax是异步的JavaScript 和 XML，在不重新加载整个网页的情况下，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM来更新页面。
23.同步和异步？
由于javascript是单线程，单线程就意味着，所有任务执行需要排队，前一个任务结束，才会执行后一个任务。
同步指下一个程序的执行需要等到上一个程序执行完毕，也就是得出结果后下一个才能执行，
异步指的是上一个程序执行后，下一个程序不用等到上一个程序出结果就能执行，等上一个出结果了调用回调函数处理结果就好。
24.js的5种设计模式？
1.js工厂模式；
2.js构造函数模式；
3.js原型模式；
4.构造函数+原型的js混合模式（推荐）；
5.构造函数+原型的动态原型模式（推荐）；
25.Promise的理解？
将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，Promise对象提供统一接口，可用链式操作，使得异步操作更容易控制。缺点是：一旦执行，无法中途取消；不设置回调函数，内部发生错误；当处于pending状态时，无法得知进展到哪一个阶段。
特性：
a.立即执行属性
b.状态不可逆，链式调用
c.then() 回调异步性
用法：
26.slice、splice和split的区别？
slice：对数组进行部分截取，并返回一个新的数组，用法：array.slice(start,end)；
var arr1 = [1,2,3,4];
var arr2 = arr1.slice(1,2);
此时arr1还是[1,2,3,4],arr2是[2]
splice：一个强大的js数组操作方法，可以完成删除、插入、替换（删除+插入）功能。用法：arr.splice(index,howmany,item1,.....,itemX)，第一个参数是删除的出发点，第二个是数量，第三个和之后的是插入的内容，从第一个参数开始的位置插入。
var all = [1,2,3,4,5,6]；
all.splice(1,2,7)；
splice返回删除的内容是[2,3]，从数组标识1开始2位，此时输出all则是[1,7,4,5,6]
split：把string分割成片段来创建一个字符串数组。可选参数limit可以限制被分割的片段数量。separator参数可以是一个字符串或一个正则表达式。如果separator是一个空字符，会返回一个单字符的数组。用法：string.split(separator,limit)
var str="1-2-3-4";
var arr = str.split("-");//arr = [1,2,3,4]
var a="0123456";
var b=a.split("",3); //b=["0","1","2"]
27.对象的浅拷贝和深拷贝是什么，该怎么实现？
对于字符串类型，浅拷贝是对值得复制；对于对象来说，浅拷贝是对对象地址的复制，并没有开辟新的栈，也就是拷贝的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变；深拷贝则是开辟新的栈，两个对象对应不同的地址，修改一个对象的属性不会改变另外一个对象的属性。
深拷贝常用的两种实现办法：
a.递归调用浅拷贝
b.过JSON解析
28.原型和原型链
在JS中，万物皆对象，大致可分为函数对象和普通对象。一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。通过new 普通函数产生的对象（实例），就是普通对象。
在JS中，每当创建一个函数对象f1时，该对象中都会内置一些属性，其中包括prototype和proto，prototype即原型对象，它记录着f1的一些属性和方法。但是，prototype对f1是不可见的，也就是说，f1不会查找prototype里面的属性和方法。
prototype有什么用呢？ 其实prototype的主要作用就是继承。 通俗一点讲，prototype中定义的属性和方法都是留给自己的“后代”用的，因此，子类完全可以访问prototype中的属性和方法。
想要知道f1是如何把prototype留给“后代”，我们需要了解一下JS中的原型链，此时，JS中的 proto 入场了，它的作用就是保存父类的prototype对象，JS在通过new 表达式创建一个对象的时候，通常会把父类的prototype赋值给新对象的proto属性，这样，就形成了一代代传承…
原型链解析图
一个对象拥有这样一个原型链以后，当访问该对象的某个属性时，会先查找自身是否有该属性，但不会查找自己的prototype,当找不到该属性，该对象就沿着原型链依次去查找…
29.websocket ？
websocket是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端。
30.多个页面之间如何进行通信？
使用cookie，使用web worker（web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。所有主流浏览器均支持 web worker，除了 Internet Explorer。），使用localeStorage和sessionStorage
32.new 操作符到底做了什么?
首先，new操作符为我们创建一个新的空对象，然后this变量指向该对象，其次，空对象的原型继承函数的原型，最后，改变构造函数内部的this的指向。
33.JavaScript的作用域和作用域链？
JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了。
34.跨域的几种方式？
jsonp（利用script标签的跨域能力）跨域、
websocket（html5的新特性，是一种新协议）跨域、
设置代理服务器（由服务器替我们向不同源的服务器请求数据）、
CORS（跨源资源共享，cross origin resource sharing）、
iframe跨域、
postMessage(包含iframe的页面向iframe传递消息)
35.封装cookie的添加，删除，查询方法？
36.事件委托机制？
不在事件的发生地设立监听函数，而是在事件发生地的父元素或者祖先元素设置监听器函数，这样可以大大提高性能，因为可以减少绑定事件的元素
37.前端模块化的理解？
前端模块话就是把复杂的文件分成一个个独立的模块，比如js文件，分成独立的模块之后有利于代码的重用和维护，但是这样又会引来模块与模块之间的依赖问题，所以就有了CommonJS、AMD、CMD规范，最后出现了webpack，webpack就是前端模块化的一种解决方案。
38.HTTP服务器状态代码定义?
200 OK 正常返回信息
304 Not Modified 自从上次请求后，请求的网页未被修改
400 Bad Request 错误的请求格式，服务器无法理解请求的格式，客户端不应该尝试再次使用相同的内容发起请求
403 Forbidden 禁止访问
404 Not Found 找不到如何与URI匹配的资源
500 Internal Server Error 最常见的服务器端错误
503 Server Unavailable 服务器端暂时无法处理请求（可能是过载或维护）
39.div里面的div水平垂直居中？
①使用伪元素::after
②css3属性transform
③flex布局
④让图片水平垂直居中
⑤多个子元素等分一个不定宽度的父元素
40.三角符号？
41.css单位？
1.相对单位：px,%,em,rem
%：width,height,font-size的百分比是相对于父元素“相同属性”的值来计算的；
em：em是相对当前元素的字体大小（以px为单位的font-szie值）而言的。如果当前元素没有定义font-size，则当前元素会继承父元素的font-size,如果当前元素的所有祖先元素都没定义font-size,则当前元素会继承浏览器默认的font-size,所有浏览器默认的都是16px。使用技巧：首行缩进：text-indent：2em;设定html的font-szie:62.5%;那么1em = 10px;（建议PC端使用，或者px）
rem：指的是相对于根元素（即html元素）的字体大小。rem是css3新引入的字体，ie8及以下不支持。（建议移动端使用）
42.css选择器和优先级？
5种基本选择器：
id，class，类型（标签名），通配符（*）和属性选择符[foo='bar']
2种伪选择器？
伪类选择器：hover，active，focus，visited，link，:first-child，:nth-child；
伪元素选择器：:before，:after，:first-line，:first-letter；
和组合选择器（+, >, ~）
优先级：
ID>类或伪类或属性>类型或伪元素>通配选择器， 外部样式表和内部样式表拥有相同的优先级， HTML style属性拥有最高优先级（important除外），浏览器默认样式（UA Default）优先级最低。 对于相同优先级的规则，写在后面的会覆盖前面的。
43.移动端表单输入的时候，手机键盘挡住输入框，怎么解决？
让页面长一点，或者用脱离文档流的定位，这样键盘弹出来时，输入框会自动上滑；或者使用js让页面向上滑动一段距离。
44.Jquery处理缓存？
主要是jquery.data()方法，jquery.data为两种对象提供缓存：js对象和HtmlElement
45.使用正则清除字符串两端的空格？
46.主流浏览器内核？
IE：Trident，IE11的后继者Edge采用了新内核EdgeHTML。
FF：Gecko。
Chrome/Safari：Webkit。
360：Trident和webkit
48.在浏览器中敲入URL到完整渲染出来，经历的过程解析？
1）.输入url地址，浏览器根据域名寻找IP地址，并发送一个http请求给服务器。
2）.服务器接受请求，处理请求生成html代码（可能是压缩过的），返回给浏览器，浏览器接收服务器响应结果（有压缩则解压）。
3）.浏览器解析html页面，构建DOM树。
4）.根据css构建render树
5）.最后是布局和绘制。
