前端工程师面试题汇总
本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。
HTML
• Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
1、声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
2、严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
1)、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 2)、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 3)、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式） 4)、HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
• HTML5 为什么只需要写 <!DOCTYPE HTML>？
html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来 规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
• 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素;img默认display属性值为“inline-block”，是“内联块状”元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联块状元素有：
<img>、<input>
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
知名的空元素： <br/> <hr/> <img/> <input/> <link/> <meta/>
鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
• 页面导入样式时，使用link和@import有什么区别？
-
页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：
XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
两者都是外部引用CSS的方式，但是存在一定的区别：
-
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
-
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
-
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
-
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
• 介绍一下你对浏览器内核的理解？
-
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
-
渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 2.JS引擎则：解析和执行javascript来实现网页的动态效果。
-
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
• 常见的浏览器内核有哪些？
-
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
-
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
-
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
-
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink(WebKit的分支)]
• html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
-
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
-
绘画 canvas;
-
用于媒介回放的 video 和 audio 元素;
-
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
-
sessionStorage 的数据在浏览器关闭后自动删除;
-
语意化更好的内容元素，比如 article、footer、header、nav、section;
-
表单控件，calendar、date、time、email、url、search;
-
新的技术webworker, websockt, Geolocation;
-
移除的元素：
-
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
-
对可用性产生负面影响的元素：frame，frameset，noframes;
-
支持HTML5新标签：
-
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
-
可以利用这一特性让这些浏览器支持HTML5新标签，
-
浏览器支持新标签后，还需要添加标签默认的样式。
-
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
-
如何区分： DOCTYPE声明\新增的结构元素\功能元素