前端工程师面试题汇总

1.XHTML 与 HTML 之间的差异

l  XHTML 元素必须被正确地嵌套。

l  XHTML 元素必须被关闭。

l  标签名必须用小写字母。

l  XHTML 文档必须拥有根元素。

2.谈谈你对web标准的理解与认识

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范，包含如下几点：

对于结构要求（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

l  标签字母要小写

l  标签要闭合

l  标签不允许随意嵌套

对于css和js来说，

l  尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

l  样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。

l  不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

3. 浏览器内核

l  IE浏览器内核：Trident内核，也是俗称的IE内核；

l  Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

l  Firefox浏览器内核：Gecko内核，俗称Firefox内核；

l  Safari浏览器内核：Webkit内核；

l  Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

l  360浏览器、猎豹浏览器内核：IE+Chrome双内核；

l  搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

l  百度浏览器、世界之窗内核：IE内核；

l  2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核

4. HTTP状态码

l 1** 信息，服务器收到请求，需要请求者继续执行操作

l 2** 成功，操作被成功接收并处理

l 3** 重定向，需要进一步的操作以完成请求

l 4** 客户端错误，请求包含语法错误或无法完成请求

l 5** 服务器错误，服务器在处理请求的过程中发生了错误

参考

http://www.runoob.com/http/http-status-codes.html

https://blog.csdn.net/dufufd/article/details/53112184

5. 简述你对HTML语义化的理解

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

6. Doctype作用是什么？

<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

7. 严格模式与混杂模式如何区分？它们有何意义？
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）

2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）

3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

8. 严格模式与混杂模式的语句解析不同点有哪些？

1）  盒模型的高宽包含内边距padding和边框border。

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。

2）可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:body{text-align:center};#content{text-align:left}。

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

9. 什么是JavaScript？

JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。

10. JavaScript的数据类型

JavaScript中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。