1. 描述下渐进增强和优雅降级的区别
渐进增强： 一开始就基于低版本的浏览器进行页面的构建，完成基本的功能，然后再针对高级浏览器进行性能，交互，以及效果上的优化； 渐进增强也可以说是 向上兼容；
优雅降级： 一开始就构建站点的完整的功能，然后针对浏览器测试和修复。举个例子，我们在高级浏览器上使用css3的属性，但是在低版本的浏览器上存在兼容的问题，这个就需要我们针对不同的浏览器进行hack； 优雅降级同样也可以说是向下兼容；
2. Doctype的作用？严格模式和混杂模式的区分，如何触发这两种模式
Doctype声明那个位于文档的最前面，在html标签的前面，告知浏览器，用什么文档类型来解析这个文档
Doctype不存在或者格式不正确会导致文档以混杂模式呈现
3. 写出几个html5的标签
article aside audio canvas datalist command details embed figcaption footer header hgroup keygen mark nav section time video summery meter output progress source
4. 语义化的理解
- html语义化就是让页面的内容结构化，便于浏览器，搜索引擎解析
- 没有样式css的时候也会以一定的文档的格式显示，容易阅读
- 搜索引擎的爬虫根据标记来确定上下文和关键字的权重，利于网站的SEO
- 便于开发人员的阅读理解和维护
- 我们在js中同样要遵守语义化，在对变量和函数进行命名的时候同样应该按照一定的含义进行
5. 谈谈对html5的理解
- 良好的移动性，以移动设备为主
- 响应式设计，以适应自动变化的屏幕尺寸
- 支持离线缓存技术
- 新增许多新标签
- 地理定位
- 新增websocket/webwork技术
6. 如何对网站的文件和资源进行优化
- 文件合并（减少http请求）
- 文件压缩（减少文件的体积）
- 使用cdn托管资源
- 使用缓存
- 图片使用精灵图（减少请求的次数）
7. 什么是盒模型
- 在我们的元素中，一个元素占有空间的大小由几个部分组成，其中包括的内容（content）填充(padding)边框（border）以及边界（margin）这个是我们正常的盒模型
- 通常我们在做移动端的项目的时候，会用另外的一种盒子模型，IE盒模型，也叫怪异盒模型，怪异盒模型和我们正常的盒模型的计算的方式是有区别的，下面是两种盒模型的计算的方式
- 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
- 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
8. 行内元素块级元素空元素有哪些？
- 常见的行内元素： a、b、span、img、input、strong、select、label、em、button、textarea
- 常见的块级元素： div、ul、li、dl、dt、dd、p、h1-h6、blockquote
- 空元素（没有内容的元素）： br、meta、hr、link、input、img
9. css实现垂直水平居中的方式
//html 结构
<div class="wrapper">
<div class="content"></div>
</div>
//css的部分
//第一种
.wrapper {
position: relative;
}
.content {
position: absolute;
width: 50%;
height: 50%;
overflow: auto; //防止内容越界溢出
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
//第二种（添加一个类名）
.is-Negative {
position: absolute;
width: 100px;
height: 200px;
padding: 10px;
top: 50%; left: 50%;
margin-left: -60px; //(width + padding)/2
margin-top: -110px; //(height + padding)/2
}
//使用弹性盒的方式
//因为使用的是css3的属性所以存在兼容的问题，一般应用于移动端
.wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 300px;
}
.content {
width: 200px;
height: 200px;
}
10. 简述下src和href的区别
- href：是指向网络资源的位置，建立和当前的元素（锚点）或者当前文档之间的链接，一般用于超链接
- src： 指向外部文件的位置，指向的内容会嵌入到当前的文档的当前的位置，但是这个引用的话会阻塞浏览器的运行，所以一般我们js文件之类的会放在文档的最底部；
11. 简述同步异步的区别
同步是阻塞模式，而异步是非阻塞模式
- 同步： 指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回我们需要的信息，那么这个进程会持续进行等待，知道获取需要的信息
- 异步： 与同步不同，进程不会持续等待，而是进行下面的操作，，不管其他进程的状态，当收到返回的消息的时候才会进行处理，我们现在使用的请求数据的方式一般就是异步的；
12. px、em、rem的区别
- px： 我们最常用的一个长度的单位，一个px指的就是一个像素
- em： 现在在所有的浏览器默认的字体的大小都是16px，而此时我们的em默认的大小就是16px，但是em这个单位是相对于它的父元素来说的，如果他的父元素的大小事10px，此时的1em就为10px
- rem: 相比于em的针对父元素进行计算，rem是相对于文档的html或者body进行计算的，同样的rem也是存在默认的值的，在不设置html或者body的font-size的属性的时候，默认的rem的大小是16px
13. 各大主流浏览器的内核
- IE浏览器内核：Trident内核，也是俗称的IE内核；
- Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核
- Firefox浏览器内核：Gecko内核，俗称Firefox内核
- Safari浏览器内核：Webkit内核；
- Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
- 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
- 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
- 百度浏览器、世界之窗内核：IE内核；
- 2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了
- UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。
14. sessionStorage 、localStorage 和 cookie 之间的异同
共同点：都是保存在浏览器端，且同源的。
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
- 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
15. Ajax的优缺点及工作原理
定义： AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面
优点：
- 无刷新更新数据（Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信）
- 异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）
- 前端与后端负载均衡（将一些后端的工作移到前端，减少服务器与带宽的负担）
- 基于规范被广泛支持（不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。）
- 界面与应用分离（Ajax使得界面与应用分离，也就是数据与呈现分离）
缺点：
- Ajax干掉了Back与History功能，即对浏览器机制的破坏（在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面）
- 安全问题（AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。）
- 对搜索引擎支持较弱
- 破坏程序的异常处理机制
- 违背URL与资源定位的初衷
- 不能很好地支持移动设备
- 客户端肥大，太多客户段代码造成开发上的成本
Ajax的原理：
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面