web前端面试题及答案汇总

本文整理了前端面试中常见的HTML、CSS、JavaScript题目,涵盖了从基础到深入的各类问题,包括同源策略、样式表的引入方式、闭包的概念与影响、Ajax请求的差异、JSON解析、浏览器内核、事件机制、前端性能优化、跨域处理、模块化开发等多个方面。此外,还讨论了不同浏览器的兼容性问题、JavaScript的面向对象特性、DOM操作以及前端安全等主题。文章最后给出了部分热门框架的理解与应用场景,帮助前端开发者全面复习面试必备知识点。
摘要由CSDN通过智能技术生成

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

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. <html></html>
B.<p></p>
C.<title></title>
D.<body></body>

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

3.下面哪一个是html5新增的类型()
A.<input type="text">
B.<input type="reset">
C.<input type="search">
D.<input type="hidden">
解析:【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.<input type="button" value="new" onlick="open('new.html','_blank')">
B.<input type="button" value="new" onlick="window.location='new.html';"/>
C.<input type="button" value="new" onlick="loaction.assign('new,html');"/>
D.<from target="_blank" action="new.html><input type="submit" value="new"/></from>

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样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

      <head>
        <style type="text/css">

               ...此处写CSS样式

       </style>
      </head>

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

3.导入式
将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:

        <style type="text/css">
          @import"mystyle.css"; 此处要注意.css文件的路径
        </style>

导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

4.链接式
也是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用语法如下:

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

总结:一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

3.闭包是什么,有什么特性,对页面有什么影响?

闭包就是能够读取其他函数内部变量的函数。
闭包的实质是一个函数,是一个用于返回局部变量值的函数,因为在全局中,受JavaScript链式作用域结构的影响,父级变量中无法访问到子级的变量值,为了解决这个问题,才使用闭包这个概念。
它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
由于闭包时,变量的值都保存到内存中,会导致页面加载时内存消耗很大,IE会导致内在泄露,因此尽量少用或用时要及时删除变量。
例子:

function say667() {
   
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() {
    alert(num); }
    num++;
    return sayAlert;
}
 var sayAlert = say667();
 sayAlert()//执行结果应该弹出的667  

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源,因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述。

http://blog.csdn.net/gaoshanwudi/article/details/7355794
http://www.cnblogs.com/dolphinX/archive/2012/09/29/2708763.html

4.ajax请求时,get和post方式的区别?怎么实现跨域请求?

Q1:
一个在url后面 一个放在请求体里面
有大小限制
安全问题
应用不同
GET:一般用于信息获取。
使用url传递参数
对所发送信息的数量也有限制,一般在2000个字符左右。
该方法发送的信息对任何人都是可见的。所有的变量名和值都显示在url中。也就是说get请求是用url来传递参数的。
GET请求是幂等的。get请求一次和请求一万次的效果是一样的。不会因为查询次数的多少而改变数据信息。

POST:一般用于修改服务器上的资源。
对所发送信息的数量无限制。
一般用来从表单进行发送数据。数据不再url中显示。所有的变量和值对别人不可见,而是嵌入到请求体中。

Q2:
处理跨域方法一:代理
通过同域名的web服务器端创建一个代理:
处理跨域方法二——JSONP
JSONP可用于解决主流浏览器的跨域数据get请求访问的问题。
jQuery中的ajax方法是支持jsonp的处理方式。
前端只需要修改dataType:”jsonp”
同时在其下一行添加jsonp:”callback”

5.请简单说明怎么样实现与后台交互?

6.什么是HTTP协议?

HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。
HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。
HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信。
HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。

http://www.runoob.com/http/http-tutorial.html

JS是面向对象还是面向过程?
JS如何面向对象?

2021年的Web前端面试题汇总内容广泛,既包含基础知识点,也涉及到最新的前端技术和趋势。以下是一些可能会在2021年的Web前端面试遇到的问题: 1. HTML、CSS和JavaScript是Web前端的三大基础技术,对于这三个技术的理解和应用灵活性有了更高的要求。 2. ES6和TypeScript是目前前端开发常用的语言,考察对它们的掌握程度和用法。 3. 关于前端框架,React、Vue和Angular是最常用的三个框架,要求掌握框架的基本原理以及常见的使用场景。 4. CSS预处理器(如Sass、Less)和CSS模块化(如CSS Modules)也是被提及的重要话题。 5. 前端性能优化,包括代码压缩、图片优化、懒加载等,是面试常见的问题。 6. 移动端开发和响应式设计是近年来前端发展的重点,了解相关技术和适配方案也是必备的知识。 7. 前端工程化方面的知识,如自动化构建工具的使用、模块化开发和代码规范等问题也会涉及。 8. 前端安全性和网络安全的相关问题,如跨站脚本攻击(XSS)和跨站请求伪造(CSRF)等,也是热门考点。 另外,根据个人工作经验和项目经历,还可能会有针对具体技术栈和框架的问题。针对这些问题,应当事先准备好,深入了解和熟悉相关内容,以便在面试时能够清楚、流利地回答和展示自己的能力。同时,也要注重实际项目经验,可以准备一些有关自己在项目遇到的具体问题及解决方案的案例,以证明自己的经验和能力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值