1. Doctype作用？标准模式与兼容模式各有什么区别？
Doctype是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。文档类型有3种：Strict（严格）、Transitional（过渡）以及Frameset（基于框架）。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。简单的说，就是尽可能的能显示东西给用户看。
具体的说二者的不同在于：
- width不同
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在兼容模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)
- 兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
- 用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left}
- 兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
HTML5 为什么只需要<!DOCTYPE HTML>呢？
DTD的是W3C所发布的一个文档类型定义，简单的说，就是告诉浏览器你的这个HTML，是根据那个标准写的，解析的时候用哪个标准解析。
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2. 页面导入样式时，使用link和@import有什么区别？
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别
- 根源性的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
- 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
3. css实现垂直水平居中
4. 对浏览器内核的理解？常见的浏览器内核有哪些？浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto：
Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等。
Gecko内核：NETSCAPE6及以上版本，FF，MozillaSuite / SeaMonkey的等
Presto内核：Opera7及以上。
Webkit内核：Safari，Chrome等。
5. html语义化是什么？为什么要进行语义化？
语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
方便其他设备的解析
便于团队开发和维护
易混淆的HTML标签详解：
i标签：i标签通常表示因为某种原因和正常文本不同的文本，例如专业术语、外语短语或排版用的文字。通常表现为斜体。
em标签：em表示强调的文本。视觉上也是斜体的效果。
strong标签：以加粗的形式展现。表示这个文本的重要性，html4中表示特别强调。html5中表示加强强调。
b标签：不同于正常文本，没有表达任何特殊的重要性和相关性。通常用于相关性回顾。另一个例子是标志每一个段落的lead sentence。
mark标签：高亮文本。
6. div+css的布局较table布局有什么优点？
- 改版的时候更方便 只要改css文件。
- 页面加载速度更快、结构化清晰、页面显示简洁。
- 表现与结构相分离。
- 易于优化（seo）搜索引擎更友好，排名更容易靠前。
7. cookies，sessionStorage和localStorage的区别
localStorage : html5新加入的技术。本地存储。目前被大多数浏览器支持。
sessionStorage ： 与localStorage的接口类似，但是保存数据的生命周期不同。它是一个前端的概念，可以将一部分数据在当前绘画中保存下来，刷新页面数据依然存在，当页面关闭后，sessionStorage中的数据就会被清空。
三者的异同：
cookie一般由服务器生成，可以设置失效时间。如果在浏览器端生成cookie默认是关闭浏览器后失效，存放数据大小一般是4k左右，二localStorage和sessionStorage大小在5M左右，在客户端生成，localStorage除非被清除否则会永久保存，sessionStorage尽在当前对话下有效，关闭页面或浏览器后被清除，cookie在与服务器端通信每次都会携带在http头中，如果使用cookie保存过多数据将会带来性能问题，二localStorage和sessionStorage仅在客户端中保存，不参与和服务器的通信。
(1). cookie由服务端生成，用于标识用户身份，而两个storage用于浏览器缓存数据
(2). 三者都是键值对的集合
(3). 一般情况下浏览器不会修改cookie，但会频繁操作两个storage
(4). 如果保存了cookie的话，http请求中一定会带上，而两个storage可以由脚本选择性的提交
(5). 会话的storage会在会话结束后销毁，local的会永久保存直到覆盖，cookie会在过期后销毁
(6). 安全性，cookie中最好不放任何明文的东西，两个storage的数据提交后在服务器端一定要校验。
8. css的盒模型
(1). W3C盒模型：属性width，height只包含内容content，不包含border和padding
(2). IE盒模型： 属性width，height包含border，padding，即content+padding+border
我们在编写页面代码时应尽量使用标准的W3C模型(需在页面中声明DOCTYPE类型)，这样可以避免多个浏览器对同一页面的不兼容。
9. 关于强调的<em><strong>:
如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
其他
1、一次完整的HTTP事务是怎样的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
2、对前端工程师这个职位你是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
参考：
https://www.jianshu.com/p/846c033c0cc8