web前端面试题及答案汇总

序

前端开发面试知识点大纲：

HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应

JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。

---

本人总结出的题库：

---

一、选择题
1.下列标签可以不成对出现的是（B）
A.
B.

C.
D.

2.关于Document对象，下列叙述正确的是(AC )
A.Document对象表示浏览器中显示的HTML文档
B.Document对象的常用属性bgcolor用来设置文档的背景图片
C.Document对象的常用方法getElementById()用于访问唯一的一个元素
D.Document对象的常用方法getElementByNames()

3.下面哪一个是html5新增的类型（）
A.
B.
C.
D.
解析：【HTML5 新的 Input 输入类型type 值有
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
】

4.与html4比较，html5废弃了哪些元素？（ABD）
A. frame
B. applet
C. i
D.big

5.CSS样式表根据所在网页的位置，可分为（B）
A.行内样式表、内嵌样式表、混合样式表
B.行内样式表、内嵌样式表、外部样式表
C.外部样式表、内嵌样式表、导入样式表
D.外部样式表、混合样式表、导入样式表
【外部样式表分为两种：导入样式表和链接样式表】

6.在CSS中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线?( B )
A. A:link{TEXT-DECORATION: underline }
B. A:hover {TEXT-DECORATION: none}　
C. A:active {TEXT-DECORATION: blink }
D. A:visited {TEXT-DECORATION: overline }

7 .下面代码片段，说法正确的是:(B )
　　.DIV1 { position:absolute;
　　line-height:22px;
　　height:58px;
　　background-color: #FF0000; }
A. Line-height:22px;修饰文本字体大小
B. position:absolute;表示绝对定位，被定位的元素位置固定
C. height:58px; 表示被修饰的元素距离别的元素的距离
D. background-color: #FF0000; 表示被修饰的元素的背景图像

8.用css设置div的左边为红色实现，下面设置正确的是（C）
A.style=”border-top: #ff0000 1 solid”
B.style=”border-left:1,#ff0000,solid”
C.style=”border-left:1 #ff0000 solid”
D.style=”border-right:1,#ff0000,solid”

9.在css的三种选择符中，哪个优先级最高？（C）
A.标签选择符
B.类选择符
C.ID选择符
Id>class>标签选择

10.在jQuery中，下面（D）写法是错误的.
A、$(“div p”)
B、$(“div.containner”)
C、$(“table a”,content)
D、$(#divID)
因为divID没有被”“包含, 于是变成了一个变量名,正确的写法是 $(“#divID”).

11.点击页面的按钮，使之打开一个新窗口，加载一个网页，以下javascrip代码中可行的是（A）
A.
B.
C.
D.

12.在javascript中，以下哪个变量名是非法的(B )
　　A.Name
　　B.9name
　　C.Name_a
　　D.Name9
13. 在javascript中，( B )变量在函数外声明，并可从脚本的任意位置访问
　　A.局部
　　B.全局
　　C.typeOf
　　D.New
14. 关于javascript说法正确的是(B )。
　　a)它是面向对象的
　　b)它是基于对象的
　　c)它是面向过程的
　　d)以上说法都不正确
15. 以下哪条语句会产生运行错误(A，D )
　　A、varobj = ()
　　B、varobj = []
　　C、varobj = {}
　　D、varobj = //
16.在javascript中，String 对象的方法不包括(D )。
　　A.charAt()
　　B.substring()
　　C.toUpperCase()
　　D.Length //这个是属性不是方法
17.下拉菜单中，用户更改表单元素Select中的值时，就会调用(A )事件处理程序。
　　a)onChange
　　b)onFocus
　　c)onMouseOver
　　d)onClick
18.目前支持HTML5和css3的主流浏览器有（BCDE）
A.ie8-10
B.chrome
C.firefox
D.360浏览器
E.Opera
答案：http://www.360doc.com/content/16/0315/11/16915_542344782.shtml

19.在Ajax技术中，关于HTTP 协议向服务器传送数据的方式描述正确的是(A)。
A、包括Post、Get方式
B、如果传输数据包含机密信息，建议采用MD5数据提交方式
C、GET执行效率和POST方法一样
D、Post传送的数据量较小，不能大于1B

20.有关会话跟踪技术描述正确的是（ABC）
A.Cookie是Web服务器发送给客户端的一小段信息，客户端请求时，可以读取该信息发送到服务器端
B.关闭浏览器意味着会话ID丢失，但所有与原会话关联的会话数据仍保留在服务器上，直至会话过期
C.在禁用Cookie时可以使用URL重写技术跟踪会话
D.隐藏表单域将字段添加到HTML表单并在客户端浏览器中显示

【会话跟踪常用的4种方法：

URL重写：URL重写技术就是在URL结尾添加一个附加数据以标识该会话，把会话ID通过URL的信息传递过去，以便在服务端进行识别不同的用户。

隐藏表单域：将会话ID添加到HTML表单元素中提交到服务器，此表单不再客户端显示。

Cookie：Cookie是Web服务器发送给客户端的一小段信息，客户端请求时可以读取该信息发送到服务器端，进而进行用户的识别。对于客户端的每次请求，服务器都会将Cookie发送到客户端，在客户端可以进行保存,以便下次使用。

session: 在服务器端会创建一个session对象，产生一个sessionID来标识这个session对象，然后将这个sessionID放入到Cookie中发送到客户端，下一次访问时，sessionID会发送到服务器，在服务器端进行识别不同的用户 , Session是依赖Cookie的，如果Cookie被禁用，那么session也将失效 】

二.简答题

1.简单介绍javascript的同源策略。

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。
所谓同源是指：域名，协议，端口相同。
在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。同源策略是客户端脚本(尤其是JavaScript)的重要安全度量标准。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
其目的是防止某个文档或脚本从多个不同源装载。同源策略是一种安全协议。
具体表现在JS中：一段脚本自能读取来自同一来源的窗口的文档和属性。(iframe.contentDocument 等访问错误)

2.引入样式表的方式。

在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。

1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<div style="color:red">div>

2.嵌入式
嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，