这是一篇前端岗位笔试题，我总结了相应的答案。如有疏漏和错误，欢迎指出。
一、HTML部分
1.Doctype作用？标准模式与兼容模式有什么区别
2.HTML5为什么只需要写？
HTML5之前是基于SGML的，需要对DTD进行引用。而HTML5并不基于SGML，所以不需要DTD进行引用，但需要doctype来规范浏览器的行为。
3.行内元素有哪些？块级元素有哪些？空元素有哪些？
（1）行内元素有：aspanimginputselectstrong等
（2）块级元素有：divulollih1p等
（3）空元素有：
4.页面导入样式时，使用link和import有什么区别？
（2）页面被加载时，link就会被加载，而@import需要网页完全载入以后才会加载。
（3）link是XHTML标签，无兼容问题；@import在低版本的浏览器不支持。
（4）link支持使用javascript控制DOM去改变样式；而@import不支持。
5.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的兼容问题？
主要是关于图像，位置，存储，多任务等功能的增加。绘画canvas；音视频元素audio和video；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；增加语义化标签，如header,footer,nav,article,section等增加了一些表单控件：calendar、date、time、email等新的技术：webworker、websocket、Geolocation
html5移除了一些纯表现的元素：big、font、s、strike等；还移除了一些会影响性能的元素：frame、frameset。noframes
6.HTML5的离线缓存有哪些？
二、CSS部分
1.介绍一下CSS的盒子模型？
盒子模型（框模型）包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个元素。
它有两种模式，标准模式和怪异模式。标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定时，再将内容装入盒子，这样盒子的大小就不会被padding所撑开。标准模式：盒子总宽度=内容区宽度+padding+border+margin怪异模式：盒子总宽度=width+margin
2.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？
css选择符有如下：1.元素选择符：*、类型选择符E、ID选择符E#id、类选择符E.class2.关系选择符：包含选择符(EF)、子选择符(E>F)、相邻选择符(E~F)3.属性选择符：E[att]、E[att='val']、E[~='val']、E[att^='val']、E[$='val']、E[*='val']、E[att|='val']4.伪类选择符：E:link、E:visited、E:hover、E:active、E:focus、E:first-child、E:nth-child(n)等5.伪对象选择符：E:first-letter、E:first-line、E:before、E:after、E::placeholder、E::selection
可以继承的样式有：font-size,font-family,color,text-indent不可以继承的样式有：border,padding,margin,width,height
优先级算法：1.就近原则，同权重情况样式定义最近者为准2.载入样式以最后载入的样式为准3.！important>id>class>tag4.!important权重最高，其次内联样式，最后样式表样式
CSS3新增伪类有：p:first-of-typep:only-of-typep:nth-child:enabled:checked等
3.如何居中div？如何居中一个浮动元素？
块级元素：水平居中：设置宽度，左右外边距为auto垂直居中：1.绝对定位法一：top:50%;margin-top:50%;2.绝对定位法二：top:50%;transform:translate(-50%,-50%);3.基于视口法：margin:50vhauto0;transform:translateY(-50%);4.弹性盒子法：父元素：display:flex;子元素：margin:auto;
浮动元素：1.计算法：啊哈，就是精确计算其外边距使其居中2.包裹法：让一个div包裹该元素，然后让div居中
4.absolute的containingblock计算方式跟正常流有什么不同？
absolute的包含快是离之最近的position属性非static的祖先元素
5.position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？
6.display:inline-block什么时候会显示间隙？
三、JS部分
1.说几条写javascript的基本规范？
2.null和undefined的区别？
null是一个表示“无”的对象，转成数值时为0；undefined是一个表示“无”的原始值，转成数值时为NaN。
3.node.js的适用场景？
node.js拥有很强的处理并发的能力，但处理计算和逻辑的能力反而很弱。所以node.js适用于需要对高并发进行高性能处理时的情景。例如实时聊天，本地化的音乐应用。
4.介绍js的基本数据类型？
js的数据类型分为基本类型和引用类型。基本类型有：number、string、boolean、null、undefined
5.['1','2','3'].map(parseInt)答案是多少？
答案是[1,NaN,NaN]。
6.什么是闭包，为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见方式是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部。
7.‘usestrict’;是什么意思？使用它的好处和坏处分别是什么？
表示使用严格模式，通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测。
使用严格模式的好处是可以提早知道代码中存在的错误。严格模式只有在js代码的第一行才会生效，多个js文件合并时可能会导致失效。
8.js延迟加载的方式有哪些？
9.如何解决跨域问题？
解决办法：1.使用跨域资源共享（CORS）2.使用jsonp3.document.domain+iframe4.使用window.name+iframe5.使用window.postMessage方法
10.json对象转成json字符，json字符转换成json对象的实现方法？
1.JSON.parse(jsonstr);//可以将json字符串转换成json对象2.JSON.stringify(jsonobj);//可以将json对象转换成json字符串3.使用eval();将字符串转换成json（慎用）