2016-06-24

好长时间都没有更新博客了，最近时间确实挺紧的。这几天特意总结了下前端的一些面试题，希望能帮助到大家，如有错误请提出，鄙人会诚信去改正。我也是刚接触这一行。

2016年最新前端面试题总结

<一>、HTML及HTML5

1.Doctype是什么？有什么作用？如何触发严格模式和混杂模式？区别它们分别有什么意义？

解答：Doctype是document type(文档模型)的简写，用来说明所用的xml或html是什么版本的。其作用是告诉浏览器的解析器该文件用什么类型来解析；如果没有对Doctype进行声明或声明不正确，浏览器将会用”怪异模式”对网页进行渲染。定义成下面的声明可以触发相应的模式。XHTML1.0提供了三种DTD声明可选择，分别是：

A.过渡的（transitional,也叫混杂模式）,要求比较宽松，允许继续使用HTML4.01的标识，完整声明为：

<!Doctype html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional’’EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>

B.严格的（strict）：要求严格的，不能使用任何表现层的标识和属性；

C.框架的（Frameset）:专门针对框架页面设计使用的DTD，如果页面中包含有框架，可以采用DTD

意义：达到数据与表现相分离的目的。

2.谈谈对WEB标准的理解，以及对W3C组织的认识？

解答：

WEB标准不是某一个标准，而是一系列标准的集合；

网页主要有三个部分分成：

结构层(straucture) 结构化标准语言主要包括XHTML和HTML;
表现层(presentation) 表现标准语言主要是CSS;
行为层(behavior) 主要包括对象模型(W3C DOM) 、ECMAScript;

WEB标准规范要求，书写标签必须闭合、小写、不乱嵌套，可以提高搜索机器人对浏览器内容的搜索率----SEO;
建议使用外链的CSS和JS脚本，从而实现结构与行为、结构与表现的分离，提高页面的渲染速度，能更快的显示内容。
样式与标签的完全分离，更合理的语义标签，使内容被更多的用户浏览和使用，内容被更多的设备所访问，从而大幅度的降低维护成本；
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；

3.什么是quirks mode(怪异模式)?

解答：指在计算机领域中，一些网页浏览器为了维护比较旧的网页设计的向后兼容性而采用的技术，这里的怪异模式又区别于万维网联盟与网页工程组所设计的”标准模式”。

4.HTML与XHTML的区别?

解答：HTML是一种基本的WEB网页设计语言，而XHTML是基于XML的标志语言。主要的区别有以下几点：

功能性：XHTML可以兼容各大浏览器、手机以及PDA,并且浏览器也能正确的编辑网页；
结构上：XHTML的语法要求更为严格。XHTML所有的标签必须小写；XHTML标签必须成对成双成对；XHTML顺序必须正确；XHTML所有属性必须使用双引号；不允许使用target=’_blank’(example: false:{<a href=”#” target=”_blank”>} true:{<a href=”#” rel=”external”>})

5.http状态码有哪些? 分别代表什么意思？

解答：主要分为五大类：

A. 100-199 用于指定客户端应响应的某些动作；

B. 200-299 用于表示请求成功；

C. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息

D. 400-499 用于指出客户端的错误

E. 500-599 用于支持服务器错误

常用的http状态码：

200、204、304、400、404、500

6.平常用哪些浏览器来测试代码？分别说说它们的内核？

解答：目前流行的浏览器有IE、Opera、Mozilla Firefox、Chrome以及Safari;它们的内核分别是：IE浏览器的内核是Trident, Mozilla Firefox 的浏览器内核是Gecko(火狐内核), Chrome浏览器内核是Chromium(其实Chromium就是Webkit内核，是从Webkit里分支出来的), Safari浏览器内核是Webkit；Opera浏览器内核为Presto。基于Linux平台的浏览器Konqueror的内核是KHTML（Konqueror不常用，是KDE开发的，速度快，容错率低）

7.行内有素有哪些？块级元素有哪些？空元素有哪些？请举例说明？并指出它们(行内元素与块级元素)之间的区别？

解答：

行内元素：<span> <strong> <em> <input> <img>(较特殊,具有块级元素的属性,可以设置其宽高) <label> <select> <textarea> <cite> <br>;

块级元素：<div> <ul> <li> <p> <hn>(n表示1~6) <filedset> <form> <hr> <iframe> <ol> <di> <table> <tr> <td>;

空元素(单标签)：<hr/> <img/> <br/> <meta/> <input/> <link/>等等；

块级元素与行内元素的区别：

1.块级元素独占一行，其宽度自动填满其父容器；相反，行内元素不会独占一行，相邻行内元素会排成一行，一行排不下，会自动排到下一行，其宽度随内容的宽高自动变换；

2.块级元素可以设置width和height,而行级元素设置width和height无效；

3.块级元素可以设置margin和padding，行内元素水平设置margin和padding有效，垂直设置margin和padding无效；

块级元素与行级元素的转换可以通过：display:block(inline-block/inline)来转换；

8.link与@import的区别？

解答：1. Link属于XHTML标签，而@import是CSS提供的；

2. 页面加载时，link引用的外部文件会被同时加载，而@import引用的CSS会等到页面加载完后再加载；

3. Import只在IE5以上才能被识别，而link属于XHTML标签，无兼容性；

4. link方式的央视的权重高于@import的权重；

9.HTML文件中如何引用其他文件？有几种方式？

解答：此处以引用CSS文件为例：

内联方式; (给特定的元素添加CSS样式,如：<p style=”width:100px; height:100px”>hello world!</p>)
使用style标签(添加在head部分), 如：<style>.box{background:red;}</style>
采用外部链接方式(引用外部文件), 如：<link rel=”stylesheet” hreg=”style.css”>
使用@import方式引用;

10.对标签语义化的理解？

解答：

1.html语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析；

2.在没有样式CSS情况下也以一种文档格式显示，并且容易阅读；

3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO;

4.便于代码的阅读和维护;

11.HTML中title与Alt属性的区别?

解答：

首先来看下title，在HTML中title有两个作用。Title使用在<head>中起到网页主题的含义；另一处使用在<img/>标签中，其作用是当鼠标悬停在图片上时，起到提示作用。对于Alt属性，当图片加载不出来时所显示的图片信息，它是直接显示在图片加载的地方。

12.列举HTML中至少4个实体?

解答： & < > ×(小三角)

13.”get”和”post”的区别?

解答：这里的get和post 的区别在面试的过程中往往指的是WEB中的get和post。(需要注意的是web中的get和post只是http中get/post的子集) web中的get和post都是往服务器上发送数据，get是将数据拼接在URL上(有必要时需要encode),而post是将数据封装在request body中，发送过去；get请求是安全和幂等的(如何解释？也就是无论你请求多少次，服务器端的数据是不会发生改变的，”幂等的”就是无论get多少次，其服务器上的资源状态都是不变的)；post相对于get是”安全的”；get请求发送数据更小(http协议中的get和post并没有对发送数据大小限制,对发送数据大小产生限制的是浏览器以及操作系统、服务器)；

Get能被缓存，post不能被缓存。想更深入的了解请查看

get: RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1
RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1

回答面试官：1. Get使用URL或Cookies传参，而post将数据放在body中；

Get的URL会有长度上的限制(IE8- URL长度限制为2083字节)，post的数据可以非常大；
Post比get安全，因为数据在地址栏上不可见；

14.HTML5和HTML4相比有什么区别? 如何区分它们? HTML5添加了哪些特性? 删除了哪些元素? 如何处理HTML5浏览器的兼容性问题?

解答：HTML5与HTML4的区别：

1. HTML5任然是一个定制中的标准;

2.简单的语法(<!Doctype html> HTML5兼容HTML4和XHTML1,但不兼容SGML);

3.新的canvas取代flash;

4.新的<header>和<footer>标记;

5.新的<section>和<article>标记;

6.新的<menu>和<figure>标记;

7.新的<audio>和<video>标记;

8.全新的表单属性;

9.不再使用<b>和<font>;

10.不再使用<frame><center><big>;

HTML5新特性：

1.用于绘画的canvas元素;

2.用于媒介回放的video和audio元素;

3.对本地离线存储更好的支持;

4.新增结构元素：header article aside footer nav section;

5.新增表单控件：date time number tel email url search等;

删除元素：

<big> <b> <frame> <frameset>等;

HTML5的兼容性问题处理：

网站提供 can I use? 查相关的HTML5新功能对浏览器的支持度；

15.请谈一下cookies,sessionStorage和localstorage的区别?

解答：相同点：都保存在浏览器端，且都是同源的；

不同点：1.cookies在浏览器与服务器间来回传递，而sessionStorage和localStorage 不会把数据自动上传到服务器上，仅在本地储存；

2.存储大小限制不同，cookies带宽不超过4k（每次http请求都会携带 cookies）,所以只能存储小的数据，如会话标识。相反后两者虽然也有限制，但可以达到5M或者更大；

3.数据有效期不同。sessionStorage：仅在当前浏览器关闭之前有效； localStorage：永久有效，无论是否关闭浏览器；cookies：只有在设置cookies 时间过期之前才有效，无论浏览器是否关闭。

4.web storage 的API接口更加方便；

16.简述一下src与href的区别?

解答：src是引入文件（替换当前元素），用在link、iframe、script上；

Href是链接跳转（在当前元素与引用资源之间建立联系），用在link、a上。

17.网页制作的过程中用到的图片格式有哪些?

解答：

1.png-8 体积会更小支持全透明

2.Png-24 相对于png-8来说保存格式质量更高

3.Jpeg/jpg 显示的颜色更多压缩/修改图片会失真

4.Svg 可伸缩不失真

5.Gif 支持半透明支持动画

6.Webp 新的图像(有损)压缩格式相对于jpeg体积缩小40%

18.strong与em的区别?

解答：都有强调的意思在里面，前者语气更甚；

19.datalist的用法

解答：<input id=”mycar” list=”cars” />

</datalist>

注意：<datalist>是HTML5新标签，除了IE和Safari不支持外其他的浏览器均支持。

<二>CSS和CSS3

1.CSS选择器有哪几种? 哪些属性可以继承? 优先级算法如何计算? CSS3新增伪类有哪些?

解答：CSS及CSS3新增选择器种类：

1.ID选择器；

2.标签选择器；

3.CLASS选择器；

4.属性选择器；

5.CSS3新增属性选择器：[selector *= value] [selector ^= value] [selector $= value]

6.结构为类选择器：伪类选择器(first-line; first-letter; before; after; not; empty; target)；

伪元素选择器(first-child; last-child; nth-child;nth-of-type;only-child)；

7.UI元素状态伪类选择器：CSS3常用的总共有17中，example, E:hover E:active E:focus E:disabled E:read-only

可以继承的(父类设置了某种属性,子类继承了它的属性)属性有：

1.所有元素可继承：visibility和cursor

2.内联元素可继承：letter-spacing word-spacing white-space line-height color font

Text-decoration text-transform

3.块状元素可继承：text-indent text-align

4.列表元素可继承：list-style list-type-position list-style-type list-style-image

5.表格元素可继承：border-collaspase

优先级算法：

!important(最高)---->ID选择器---->class类选择器---->属性选择器---->*通配符选择器

CSS3新增伪类：

答案见第一问！！！

2.CSS盒模型?

解答：CSS盒模型大致可以分为两种：IE盒模型和标准W3C盒模型

IE盒模型：

IE盒模型的范围包含：margin border padding content，不同于标准W3C盒模型的是：IE盒模型的content包含了border和padding；

最新前端面试题总结

外盒模型

元素空间宽度 = content width + margin的宽度

元素空间高度 = content height + margin的高度

内盒模型

　　元素宽度 = content width

　元素高度 = content height

注意：1.当IE6~8处于怪异模式下就会使用IE盒子模型，否则将使用W3C标准盒子模型；

2.box-sizing:content-box;/border-box;/inherit;

标准W3C盒模型：

标准W3C盒模型的范围包括：margin border padding content，并且content的部分不包含其他部分。