web前端面试题

web前端面试题
web前端面试题

拦截器与过滤器的区别以及他们的执行顺序?

过滤器,是在java web中,你传入的request,response提前过滤掉一些信息,或者提前设置一些参数,然后再传入servlet或者struts的 action进行业务逻辑,比如过滤掉非法url(不是login.do的地址请求,如果用户没有登陆都过滤掉),或者在传入servlet或者 struts的action前统一设置字符集,或者去除掉一些非法字符。

拦截器,是在面向切面编程的,就是在你的service或者一个方法,前调用一个方法,或者在方法后调用一个方法比如动态代理就是拦截器的简单实现,在你调用方法前打印出字符串(或者做其它业务逻辑的操作),也可以在你调用方法后打印出字符串,甚至在你抛出异常的时候做业务逻辑的操作。

拦截器与过滤器的区别:

拦截器是基于java的反射机制的,而过滤器是基于函数回调。

拦截器不依赖与servlet容器,过滤器依赖与servlet容器。

拦截器只能对action请求起作用,而过滤器则可以对几乎所有的请求起作用。拦截器可以访问action上下文、值栈里的对象,而过滤器不能访问。

在action的生命周期中,拦截器可以多次被调用,而过滤器只能在容器初始化时被调用一次

执行顺序:过滤前–拦截前– Action处理–拦截后–过滤后。个人认为过滤是一个横向的过程,首先把客户端提交的内容进行过滤(例如未登录用户不能访问内部页面的处理);过滤通过后,拦截器将检查用户提交数据的验证,做一些前期的数据处理,接着把处理后的数据发给对应的Action;Action处理完成返回后,拦截器还可以做其他过程(还没想到要做啥),再向上返回到过滤器的后续操作。

浅谈HTTP中Get与Post的区别

Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE。URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP中的GET,POST,PUT,DELETE就对应着对这个资源的查,改,增,删4个操作。到这里,大家应该有个大概的了解了,GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。

1.GET请求的数据会附在URL之后(就是把数据放置在HTTP协议头中),以?分割URL和传输数据,参数之间以&相连;POST把提交的数据则放置在是HTTP包的包体中。

2.GET方式提交的数据有数量限制,不同浏览器设置有差别,理论上POST 没有限制,可传较大量的数据。

HTTP状态码(HTTP Status Code)

HTTP状态码摘要说明

成功2××成功处理了请求的状态码。

200 服务器已成功处理了请求并提供了请求的网页。

204 服务器成功处理了请求,但没有返回任何内容。

重定向3××每次请求中使用重定向不要超过 5 次。

301 请求的网页已永久移动到新位置。当URLs发生变化时,使用301代码。搜索引擎索引中保存新的URL。

客户端错误4××表示请求可能出错,妨碍了服务器的处理。

400 服务器不理解请求的语法。

403 服务器拒绝请求。

404 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。

服务器错误5××表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。

500 服务器遇到错误,无法完成请求。

503 服务器目前无法使用(由于超载或停机维护)。通常,

这只是暂时状态。

一些常见的状态码为:

200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用

session实现原理是什么?

Session的实现方式有两种,一个是通过cookie,另一个是通过url重写。

1. 通过cookie

Cookie是保存在客户端的一小段信息,服务器在响应请求时可以将一些数据以“键-值”对的形式通过响应信息保存在客户端。当浏览器再次访问相同的应用时,会将原先的Cookie通过请求信息带到服务器端。

在MyEclipse环境下新建一个Web Project,命名为Test,在WebRoot下新建一个名为cookie的jsp页面,代码如下:

Java代码

<%@ page language=”java” import=”java.util.*” pageEncoding=”gb2312″%>

session实现原理

<%

Cookie [] c = request.getCookies();

if(c==null){

out.println(“sorry,cookie is null…”);

}else{

for(int m =0;m

out.println(c

.getName()+” “+c

.getValue()+”
”);

}

}

%>

打开浏览器,在地址栏中输入http://localhost:8080/Test/cookie.jsp,会输出”sorry,cookie is null…”,表明在此次请求信息中没有cookie信息,但在这一过程中,服务器会自动生成一个session(因为session是jsp中的内置对象,如果在servlet中必须显示请求session,才会生成,即HttpSession session = request.getSession();)用以表示此次“会话”,同时将与该session相对应的sessionID以cookie的方式发送给客户端。当客户端再次请求该页面(应用程序)时,会自动将此cookie通过请求信息带到服务器端。因此,当你刷新上一次的请求时,页面会输出一个名为JSESSIONID的cookie,后面就是相应的cookie值,也就是本次“会话”的sessionID,

,当你再次刷新此页面时会得到相同的输出,因为在一次“会话”中,请求信息携带的sessionID与上一次响应的sessionID相一致。存放在客户端的用于保存sessionID的cookie会在浏览器关闭时清除,因此当你重新打开一个浏览器时,第一次的输出依然会是”sorry,cookie is null…”因为服务器认为这是一次新的“会话”,同样当你刷新此页面时,页面会输出一个名为JSESSIONID的cookie,但注意此时后面的cookie值与上一次肯定不相同,因为这是一次新的“会话”。

2. url重写

通过cookie可以很好地实现session,但是如果客户端由于某些原因(比如出于安全考虑)而禁用cookie,在这种情况之下,为了使session能够继续生效,可以采用url重写。url重写很简单,比如我要从1.jsp页面跳转到2.jsp,采用超链接的方式,可以用两种方式:一种如下所示:

2.jsp

另一种是”>2.jsp

其中第二种方式就是采用了url重写,在cookie没有被禁用的情况下,它与第一种情况没有什么区别,但在cookie禁用是,它会将SessionID的信息作为请求地址的一部分传到了服务器端,这就是URL重写的意义所在。

如何设置一个严格30分钟过期的Session

当然, 面试不是为了难道你, 而是为了考察思考的周密性. 在这个过程中我会提示出这些陷阱, 所以一般来说, 标准的做法是:

1. 设置Cookie过期时间30.

2. 自己为每一个Session值增加Time stamp.

3. 每次访问之前, 判断时间戳.

Web应用中如何防止用户多次登录?

1. 在用户登录时,判断此用户是否已经在Application中存在,如果存在就报错,不存在的话就加到Application中(Application是所有Session共有的,整个web应用程序唯一的一个对象)

cookie是什么意思

Cookie又称HTTP Cookie, Web Cookie和浏览器Cookie, 是服务器用来向浏览器客户端发送状态信息的,这些状态信息被保存到浏览器客户端,服务器可以在客户端访问时读取这些状态信息。这些状态信息可以用作浏览器和服务器之间对话的授权和识别,也可用来保存用户信息、购物车内容和其他一些可以用文本保存的信息。例如通过在浏览器端保存Cookie, 服务器可以判断当前用户是否登录过网站。

列举Window对象的方法?

alert([Message]) 显示带有警告信息Message的窗口,并有“确定”按钮close() 关闭当前窗口

confirm([message]) 显示带有确认信息message的窗口,有“确定”和“取消”按钮

open() 打开新窗口,显示指定的页面

prompt([message][,defaultValue]) 显示提示对话框,

setInterval(code,ms) 每经过ms毫秒后执行代码code

clearInterval(iIntervalID) 取消先前用setInterval方法开始的标识为iIntervalID的间隔事件

setTimeout(code,ms) 经过ms毫秒后执行代码code

clearTimeout(iTimeoutID) 取消先前用setTimeout方法开始的标识为iTimeoutID的超时事件

介绍一下Session对象,如何使用?何时使用

session对象是一个十分重要的对象,在我们项目的实际开发当中经常用到,它是在一个会话期间保存该用户的所有信息。这样我们就可以很容易的区分开每个用户。该对象与我们稍后就要讲的application对象有点不同,application对象是对整个应用程序之间信息的共享,而session对象是对应于每个用户不同的对象。比如,当一个用户登录一个网站(web)之后,系统会对她生成一个独一无二的session对象来记录该用户的个人信息,而此时我们就可以设置与该用户相关联的相关数据信息,一旦用户退出网站,那以该session对象就会被注销。

所谓一个会话,就是当用户访问我们项目主页开始,就有了该session对象,同时我们可以人为的为它设置一个会话时间,以及设置相关信息(稍后就讲到)。当用户退出网站或关闭所有IE窗口时,此时该用户的会话就被注销。最常用的方法如下:

setAttribute(String name,Object object);

getAttribute(String name)

setMaxInactiveInterval(Int int)

invalidate()

setAttribute()、getAttribute()这两个方法在我们实际项目开发当中是经常用到的,当用户登录系统时,验证正确时,我们这时通过该方法设置用户的相关信息,整个项目在有效会话期间,每个用户都拥用各自不同的信息,此时,通过设置之后。以后我们在整个项目当中,如要对不同用户的相关控制,我们就可以用通过getAttribute()方法获得我们原先给他设置过的相关信息,这时就能很好的控制起来。比如:权限,实时获得用户名等等。

setMaxInactiveIntervl()是设置会话时间。

Invalidate()方法是使该会话对象失效。用的比较经典的是当一个系统退出时,我们就用该方法将其会话失效,使之所有的相关信息都不起作用。

基本HTTP协议流程是什么?

1.打开HTTP连接。一定要记住HTTP是一种无状态协议。正因为如此,对于每一个请求你都要建立一个新的连接。

2.初始化方法请求。这里面将包含一些类型的方法指示符用来描述调用什么方法和方法所需要的参数。

3.设置HTTP请求头。这里面包含要传送的数据类型(二进制)和数据的总长。

4.发送请求。将二进制流写到服务器。

5.读取请求。目标servlet程序将被调用并接受HTTP请求数据。servlet程序就调用所有必要的参数选择相应的方法。注意,如果这是这个客户端的第一次请求,一个服务器对象的新的实例就会被创建。

6.调用方法。方法将会被服务器端的对象调用。

7.初始化方法响应。如果调用的方法抛出一个异常,客户将接收到出错信息。否则,返回的类型(如果有)将会被发送。

8.设置HTTP响应头。在响应头中,一定会设置待发送数据的类型和长度。

9.发送响应。二进制数据流将从Web服务器发送并返回给客户端。

10.关闭连接。

请总结一下WEB开发中的会话跟踪实现技术都有哪几种?

1、session,也是最常用的一种

2、Cookie

3、地址重写

4、隐藏域

什么是HTTP(Hyper Text Transfer Protocol、超文本传输协议)?

HTTP(Hyper Text Transfer Protocol、超文本传输协议)是用来在互连网上传输文档的协议,它是Web上最常用也是最重要的协议,也是Web服务器和Web 客户(如浏览器)之间传输Web页面的基础。HTTP是建立在TCP/IP之上的应用协议,但并不是面向连接的,而是一种请求/应答(Request/Response)式协议。浏览器通常通过HTTP向Web服务器发送一个HTTP请求,其中包括一个方法、可能的几个头、一个体。常用的方法类型包括:GET(请求一个网页)、POST(传送一个表单中的信息)、PUT(存入这个信息、类似于FTP中的PUT)和DELETE(删除这个信息)。Web服务器接受到HTTP请求之后,执行客户所请求的服务,生成一个HTTP应答返回给客户。

HTTP应答有一个状态行、可能的几个头、一个体。在头中可以定义返回文档的内容类型(MIME类型)、Cache控制、失效时间。MIME类型包括:“text/html”(HTML文本)、“image/jpeg”(JPEG图)、“audio/ra”(RealAudio文件)。HTTP 本身也在不断完善和发展,目前,常用的是HTTP1.1,它更好地利用TCP的特性,对HTTP1.0作了改进。

请写出一个JavaScript 对象并初始化几个属性

代码如下:

var obj = {

name: “IT公司面试手册”,

address: “https://www.360docs.net/doc/6116992147.html,”,

outfit: {

top: “naked”,

bottom: “jeans”,

shoes: “hiking sho”

}

}

如何创建一个Javascript Object?

可以有两种方式创建一个Javascript Object, 代码如下:

第一种方法:var obj = new Object();

第二种方法:var ob = {};

介绍一下Session及Session与Cookie的区别

Session是相当于Server端的Cookie, Cookie是在客户端保存数据,Session 是在Server端保存数据。

Session状态是保存在Server端的文件或者数据库中,每个Session是由Session Id来识别,为了使客户端能够识别它自己,Session ID必须有Server 端来创建然后发送到客户端,当客户端向Server端发送请求时,也需要发送Session ID.

如果Cookie没有用来保存Session ID, 那么Session会在浏览器关闭的时候失效,或者用户通过连接到其他URL来打断POST或者query string传递,也就是说,session在用户离开这个站点的时候就会失效。

AJAX都有哪些有点和缺点?

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于 XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web 应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像 DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为[4]。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。不过开发者已想出了种种办法来解决这个问题,当中大多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面上的变更。

进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 [5],没有恰当的预读数据 [6],或者对XMLHttpRequest的不恰当处理[7],都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的[8]。通常的解决方案是,使用一个可视化的组件来

告诉用户系统正在进行后台操作并且正在读取数据和内容。

Ajax主要包含了哪些技术?

Ajax(Asynchronous JavaScript + XML)的定义

基于web标准(standards-based presentation)XHTML+CSS的表示;

使用 DOM(Document Object Model)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用 XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。

AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer。

DOM的优缺点都有什么?

DOM的优势主要表现在:易用性强,使用DOM时,将把所有的XML文档信息都存于内存中,并且遍历简单,支持XPath,增强了易用性。

DOM的缺点主要表现在:效率低,解析速度慢,内存占用量过高,对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间,因为使用DOM进行解析时,将为文档的每个element、attribute、processing- instrUCtion和comment都创建一个对象,这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

介绍一下DOM 文档对象模型

DOM(Document Object Model)

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM 是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构,然

后才能做任何工作。由于它是基于信息层次的,因而 DOM 被认为是基于树或基于对象的。

对于特别大的文档,解析和加载整个文档可能很慢且很耗资源,因此使用其他手段来处理这样的数据会更好。这些基于事件的模型,比如 Simple API for XML (SAX),适用于处理数据流,即随着数据的流动而依次处理数据。基于事件的 API 消除了在内存中构造树的需要,但是却不允许开发人员实际更改原始文档中的数据。

SAX等模型会从头至尾的顺序解析整个XML文档,当遇到一个节点的开始或或者结束时,会产生一个时间,程序员可以注册事件处理函数以对各个节点进行处理。另一方面,DOM 还提供了一个 API,允许开发人员添加、编辑、移动或删除树中任意位置的节点,从而创建一个引用程序。这个模型就是基于树型数据结构的,他在使用之前必须加载整个文档或者至少是结构良好的文档片段

解析器是一个软件应用程序,设计用于分析文档(这里是指 XML 文件),以及做一些特定于该信息的事情。在诸如 SAX 这样基于事件的 API 中,解析器将向某种监听器发送事件。在诸如 DOM 这样基于树的 API 中,解析器将在内存中构造一颗数据树。

AJAX的优缺点都有什么?

1、最大的一点是页面无刷新,用户的体验非常好。

2、使用异步方式与服务器通信,具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:

* 动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。

* 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。

* 消除了每次用户输入时的页面刷新。

* 直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done 之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

什么是WebService?

WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络应用间的交互。

WebService实现不同语言间的调用,是依托于一个标准,webservice是需要遵守WSDL(web服务定义语言)/SOAP(简单请求协议)规范的。

WebService=WSDL+SOAP+UDDI(webservice的注册)

Soap是由Soap的part和0个或多个附件组成,一般只有part,在part中有

Envelope和Body。

Web Service是通过提供标准的协议和接口,可以让不同的程序集成的一种SOA 架构。

Web Service的优点

(1) 可以让异构的程序相互访问(跨平台)

(2) 松耦合

(3) 基于标准协议(通用语言,允许其他程序访问)

Web Service的基本原理

(1) Service Provider采用WSDL描述服务

(2) Service Provider 采用UDDI将服务的描述文件发布到UDDI服务器(Register server)

(3) Service Requestor在UDDI服务器上查询并获取WSDL文件

(4) Service requestor将请求绑定到SOAP,并访问相应的服务。

xml的解析方式

常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM 对象供程序使用,优点是操作方便,但是比较耗内存。Sax是按事件驱动的方式解析的,占用内存少,但是编程复杂

什么是XML

XML(eXtensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用。

介绍一下XMLHttpRequest对象的常用方法和属性

open(“method”,”URL”) 建立对服务器的调用,第一个参数是HTTP请求方

式可以为GET,POST或任何服务器所支持的您想调用的方式。

第二个参数是请求页面的URL。

send()方法,发送具体请求

abort()方法,停止当前请求

readyState属性请求的状态有5个可取值 0=未初始化,1=正在加载

2=以加载,3=交互中,4=完成

responseText 属性服务器的响应,表示为一个串

reponseXML 属性服务器的响应,表示为XML

status 服务器的HTTP状态码,200对应ok 400对应not found

在 Ajax应用中信息是如何在浏览器和服务器之间传递的

Ajax与服务端是通过字符串或者xml进行交互的

谈一下Javascript中的对象

JavaScript中的Object是一组数据的key-value的集合, 有点类似于Java中的HashMap, 所有这些数据都是Object里的property. 通常情况下, JavaScript中建立一个对象用”new”加上constructor function来实现. 如new Date(), new Object()等.

var book = new Object();

https://www.360docs.net/doc/6116992147.html, = “JavaScript is Cool”;

book.author = “tom”;

book.pages = 514;

上面例子中的name和page就是名为book的对象中的property. 我们可以用delete来删除Object中的property: “delete https://www.360docs.net/doc/6116992147.html,;”. 除了Object, Date等buildin的对象外, 我们可以写自己的constructor function, 然后使用new就可以建立自己的对象. 如上面的book可以写成:

function Book (name, author, page) {

https://www.360docs.net/doc/6116992147.html, = name;

this.author = author;

this.page = page;

}

var abook = new Book(“JavaScript is Cool”, “tom”, 514);

javascript 的优缺点和内置对象

1)优点:简单易用,与Java 有类似的语法,可以使用任何文本编辑工具编写,只需要浏览器就可执行程序,并且事先不用编译,逐行执行,无需进行严格的变量声明,而且内置大量现成对象,编写少量程序可以完成目标;

2)缺点:不适合开发大型应用程序;

3)Javascript 有11 种内置对象:

Array、String、Date、Math、Boolean、Number、

Function、Global、Error、RegExp、Object。

简述HttpSession 的作用、使用方法,可用代码说明

HttpSession 中可以跟踪并储存用户信息,把值设置到属性中,有2 个方法:setAttribute(),getAttrribute();

例如:在一个方法中用session.setAttribute(“student”,student);在session 中设置一个属性名为student,值为一个名为student 的对象。而后可在

同一session 范围内用getAttribute(“student”)取出该属性,得到student 对象。

forward 和redirect的区别

forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服务器发送的内容是从哪儿来的,所以它的地址栏中还是原来的地址。

redirect就是服务端根据逻辑,发送一个状态码,告诉浏览器重新去请求那个地址,一般来说浏览器会用刚才请求的所有参数重新请求,所以session,request

参数都可以获取。

什么情况下调用doGet()和doPost()?

Jsp页面中的form标签里的method属性为get时调用doGet(),为post时调用doPost()。

Web前端开发笔试题集锦(已读)

Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2,截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3,判断一个字符串中出现次数最多的字符,统计这个次数 //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table,获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4,IE与FF脚本兼容性问题 (1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源

最新web前端面试题(及答案)

1、常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性:display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式?比较好的方式是哪一种? 答: (Q1) (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式,好多网站都这么用。 4、box-sizing常用的属性有哪些?分别有什么作用? 答: (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用?标准模式与兼容模式各有什么区别? 答: (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写?

web前端开发面试题汇总模板

web前端开发面试题汇总 1天前653浏览2评论 前端面试题汇总 HTML&CSS 1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用? (IE8 以下) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 兼容性:display:inline-block;display:inline;zoom:1; 3. 清除浮动有哪些方式?比较好的方式是哪一种? (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。

(8)结尾处加br标签clear:both。 总结:比较好的是第3种方式,简洁方便。 4. box-sizing常用的属性有哪些?分别有什么作用? 常用的属性:box-sizing: content-box border-box inherit; 作用:content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 5. Doctype作用?标准模式与兼容模式各有什么区别? (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 6. HTML5 为什么只需要写< Doctype html>? HTML5不基于SGML,因此不需要对DTD进行引用;但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 7. 页面导入样式时,使用link和@import有什么区别? (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面

WEB前端面笔试题总结

1. 如何显示/隐藏一个DOM元素? 更改元素的css style,设为display: none。此外还可以将visibility设为hidden,透明度设为0,或长、宽设为0。 2. 一个定宽网页在浏览器(IE6,IE7,Firefox,IE5)中横向居中对齐的布局, 请写出主要的HTML标签及CSS。 1. 2. 3. 4. 5.居中 6. 11. 12. 13.

居中
14.

15. 3. CSS中margin和padding的区别 margin是外边距,属于元素之外,相邻元素的margin可以融合。 padding是内边距,在元素之内,相邻元素的padding不可融合。 4. JavaScript中如何检测一个变量是一个String类型?请写出函数实现 function(obj) { returntypeof(obj) == ”string”; } 5. 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态 显示“××年还剩××天××时××分××秒” 这个看我论坛右上角的就知道了… 6. 如何控制网页在网络传输过程中的数据量 题目貌似有问题,应该是减少数据量吧。 最显著的方法是启用GZIP压缩。此外保持好的编码习惯,避免重复和css、 JavaScript代码,多余的HTML标签和属性。 7. 补充代码,是鼠标单击后Button1到Button2的后面

var parent =this.parentNode; parent.removeChild(this); parent.appendChild(this); 8. Linux中,将a、b打包为back.tar,命令是() 不知道=。= 9. Flash、Ajax各自的优缺点,在使用中如何取舍? Flash的缺点是需要客户端安装Flash插件,比较大,且更改了默认的HTML页面行为;但可以方便地实现很多特效及动画,且具有较高权限。 Ajax的缺点是编程较为复杂,需要服务器端的支持,能实现的效果只能是DOM API 提供的,权限很低,较难跨域;但可以显著加快页面的载入速度和用户体验。 此外,二者都不能被搜索引擎索引(Google已支持Flash文本的索引),不利于SEO。 建议:重要和关键部分直接用HTML,交互部分可以使用Ajax,复杂的动画可采用Flash。 百度2010 1、JS主要数据类型?5分

Web前端开发工程师面试题

一、CSS (1) 二、HTML (3) 三、jquery (3) 四、综合 (4) 一、C SS 1.CSS样式表根据所在网页的位置,可分为?(B ) A.行内样式表、内嵌样式表、混合样式表 B.行内样式表、内嵌样式表、外部样式表 C.外部样式表、内嵌样式表、导入样式表 D.外部样式表、混合样式表、导入样式表 2.对于标签,其中*代表(C ) A. 注释的时候才用上 B. 没有这个标签 C. 通配符,意思是所有的标签 3.在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 } 4.下面代码片段,说法正确的是:(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; 表示被修饰的元素的背景图像 5.用CSS设置DIV的左边为红色实线,下面设置正确的是(C ) A.style=”border-top: #ff0000 1 solid;”

前端工程师面试题题及答案(全面综合)

1. 要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 在javascript里,下列选项中不属于数组方法的是(B); a)sort() b)length() c)concat() d)reverse() 3 、var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: (选择一项)。(D ) A for(var i =0; i

c)getElementsByName() d)bgColor() 6. 、display属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D ) a)都是Location对象的属性 b)使用时返回值都是字符串 c)都是返回以像素为单位的数值 d)以上都不对 8. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗 口,下列选项正确的是__D__ a)open("x.html","HI","toolbas=1,scrollbars=1,status=1"); b)open("HI","scrollbars=1,location=1,status=1"); c)open("x.html","status=yes,menubar=1,location=1"); d)open("x.html","HI","toolbas=yes,menubar=1,location=1"); 9. 、javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C) a)8+8 b)88 c)16 d)“8”+’8 10. 关于setTimeout(“check”,10)中说法正确的是( D)

web前端研发工程师笔试题选择题带答案

1. 要动态改变层中内容可以使用的方法有( AB ) a) i nn erHTML b) i nn erText c) 通过设置层的隐藏和显示来实现 d) 通过设置层的样式属性的 display 属性 2. 当按键盘 A 时,使用onKeyDown 事件打印event.keyCode 的结果是(A ) a) 65 b) 13 c) 97 d) 37 3.在javascript 里,下列选项中不属于数组方法的是( B ); a) sort() b) l e ngth() c)con cat() d) r everse( ) 4.下列哪一个选项可以用来检索被选定的选项的索引号 ?(B) a)disabled b) selectedl ndex c) opti on d) multiple 5.希望图片具有”提交”按钮同样的功能,该如何编写表单提交?(A ) 6. 使div 层和文本框处在冋一行的代码正确的是 (D ); a) b) c) d) 7. 下列选项中,描述正确的是(选择两项)。(AD ) a)options.add(new Option(,a?,'A?))可以动态添加一个下拉列表选项 b)option.add(new Option(,a?,'A?))可以动态添加一个下拉列表选项 c) n ew Optio n(,a?,'A?)中?a 表示列表选项的值,?A 用于在页面中显示 d) n ew Option(,a?,'A?)中?A 表示列表选项的值,?a 用于在页面中显示 8. 、 var emp = new Array(3); for(var i in emp) 以下答案中能与for 循环代码互换的是:(选择一项)。(D ) A for(var i =0; i

前端开发的面试题

前端开发的面试题 web前端面试题 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识。 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面 内容、提供打印版本而不需要复制内容、提高网站易用性; 2.xhtml和html有什么区别 HTML是一种基本的WEB语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档 加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容,border ,margin,padding 5.CSS引入的方式有哪些? link和@import的区别是?

内联内嵌外链导入 区别:同时加载 前者无兼容性,后者CSS2.1以下浏览器不支持 Link 支持使用script改变样式,后者不可 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符类选择符 id选择符 继承不如指定 Id>class>标签选择 后者优先级高 7.前端页面有哪三层构成,分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js 8.css的基本语句构成是? 选择器{属性1:值1;属性2:值2;……} 9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto) 10.写出几种IE6 BUG的解决方法 1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active 4.Ie z-index问题给父级添加position:relative 5.Png 透明使用js代码改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖使用iframe嵌套

WEB前端开发面试题集锦

1、列举你工作中遇到的IE6 BUG,谈谈解决方案。 3、如何用CSS分别单独定义IE6、7、8的width属性。 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 4、CSS中哪些属性可以同父元素继承。 继承:(X)HTML元素可以从其父元素那里继承部分CSS属性,即使当前元素并没有定义该属性 Color;font-size; 5、你如何理解HTML结构的语意化。 1.去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如

是粗体,字体大小2em,加粗;是加粗的,不要认为这是html 这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML 点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和HTML结构是不可分割的。 2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音. 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱). 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况(包括现有的或者将来新的设备一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的

前端面试题含答案

前端面试题含答案 The latest revision on November 22, 2020

前端开发面试知识点大纲: HTML&CSS : 对Web 标准的理解、浏览器内核差异、兼容性、hack 、CSS 基本功:布 局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript : 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块 化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs 、 JSON 、ajax 等。 其他: HTTP 、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO 、UED 、架构、职业生涯 作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点: 1、DOM 结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 产品部-前端面试题-答案 产品部 Beijing

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

Web前端开发工程师笔试题.doc

Web前端开发工程师笔试题 Web前端开发工程师笔试题篇1 1. 在一个框架的属性面板中,不能设置下面哪一项。( C ) A.源文件; B.边框颜色; C.边框宽度 D.滚动条 2. CSS样式表根据所在网页的位置,可分为?(B ) A.行内样式表、内嵌样式表、混合样式表 B.行内样式表、内嵌样式表、外部样式表 C.外部样式表、内嵌样式表、导入样式表 D.外部样式表、混合样式表、导入样式表 3.对于标签,其中*代表GET或( C ) A. SET B. PUT C. POST D. INPUT 4. HTML代码 表示?(D ) A. 创建表格 B. 创建一个滚动菜单 C. 设置每个表单项的内容

D. 创建一个下拉菜单 5. 在表单中包含性别选项,且默认状态为男被选中,下列正确的是( A ) 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. 在Dreamweaver 中, 在设置各个框架属性时, 参数Scroll 是用来设置( B )属性的。 A. 是否进行颜色设置 B. 是否出现滚动条 C. 是否设置边框宽度 D. 是否使用默认边框宽度 9. 以下链接到电子邮件的正确格式是(B ) A. 邮箱 B. 邮箱 C. 邮箱 D. 邮箱 10. 若将Dreamweaver中2个横向相邻的单元格合并,则两单元格中文字会( A ) A.文字合并 B.左单元格文字丢失 C.右单元格文字丢失 D.系统出错

web前端开发工程师笔试题及答案

web前端开发工程师笔试题 1.html的含义是什么,其主体部分由什么标记构成? Html是一种标准,一种规范,它通过标记符号来标记要显示在网页中的各个部分,被称为超文本标记语言。 标记和之间的内容构成了html的主体部分。网页中所有内容,包括文字,图片,连接都包含在此标记符内。 2.说明在网页设计xxDIV标签的作用 Div中文名被称为“层次”可以把文档分割成独立的,不同的部分。 它可以用作严格的组织工具,并且不适用任何格式与其他关联。 3.css指的是什么?在网页设计中为什么要用到css技术? css是级联样式表,用来进行网页风格设计。使用样式表可以统一的控制html中各标志的显示属性。精确的确定元素的位置,扩充网页外观和特殊效果的显示能力。 4.css中id和class怎么定义,哪个定义的优先级别高?如果class定义一个html元素没边框,而id定义这个元素有边框,结果呢?

先听id的。 5.IE6下为什么不能第一1PX左右高度的容器? IE6默认的行高造成的。 6.怎样才能让层显示在FLASH之上? 给FLASH设置透明,param value=transparent。 7.怎样使一个层垂直剧中于浏览器中? 8. firefox嵌套div标签的剧中问题假定有如下情况:

如果要实现b在a中剧中放置该如何实现? 解决办法就是除了需要在a中设置text-align属性为center之后,还需要设置b的横向margin为auto。例如设置b的CSS样式为: margin:0 auto; 所以,设置如下就可以实现居中:

下载浏览速度快。被更多的用户访问。推广时被更多的机器访问。更少的代码,易于维护,宽带要求降低,降低成本,更容易被搜索引擎搜索到。改版方便,不需要改变内容。提供打印页面不用复制。 10.怎样解决超链接访问过后hover样式就不出现的问题。 改变CSS属性排列的顺序L-V-H-A(link ,visted,hover,active.)

前端面试题含答案

前端开发面试知识点大纲: 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 —— 作用、用途、设计结构。 产品部-前端面试题-答案 产品部 Beijing

HTML 一、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。 (2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 二、行内元素有哪些?块级元素有哪些?空(void)元素有那些? (1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。 (2)行内元素有:a b span img input select strong(强调的语气)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p (3)知名的空元素:


鲜为人知的是: 三、link 和@import 的区别是? (1)link属于XHTML标签,而@import是CSS提供的; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; (3)import只在IE5以上才能识别,而link是XHTML标签,无兼容问题; (4)link方式的样式的权重高于@import的权重. 四、浏览器的内核分别是什么? * IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;

Web前端笔试115道题(带答案及解析)

Web前端笔试115道题(带答案及解析) 1、html5为什么只需要写<!doctype html>? 答:html5不是基于sgml(标准通用标记语言),不需要对dtd 文件进行引用,但是需要doctype来规范浏览器的行为, 否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型 2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p 知名的空元素: <br> <hr> <img> <input> <link>

<meta> 鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 3、页面导入样式时,使用link和@import有什么区别? 两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载; @import需要页面网页完全载入以后加载。 区别3:link是XHTML标签,无兼容问题;@import 是在CSS2.1提出的,低版本的浏览器不支持。 区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。 补充:@import最优写法 @import的写法一般有下列几种:

web前端开发面试题汇总

1天前653浏览 前端面试题汇总 HTML&CSS 1.常用那几种浏览器测试有哪些内核(LayoutEngine) (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2)内核:Trident,Gecko,Presto,Webkit。 2.说下行内元素和块级元素的区别行内块元素的兼容性使用 (IE8以下) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置 line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 兼容性:display:inline-block;display:inline;zoom:1; 3.清除浮动有哪些方式比较好的方式是哪一种 (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 总结:比较好的是第3种方式,简洁方便。 常用的属性有哪些分别有什么作用 常用的属性:box-sizing:content-boxborder-boxinherit; 作用:content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和

边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 作用标准模式与兼容模式各有什么区别 (Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 为什么只需要写 HTML5不基于SGML,因此不需要对DTD进行引用;但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。而基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 7.页面导入样式时,使用link和@import有什么区别 (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; (3)import是提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。 总之,link要优于@import。 8.介绍一下你对浏览器内核的理解 IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto ,现为Blink; 内核主要分成两部分: 渲染引擎(layoutengineer或RenderingEngine)和JS引擎 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

初级Web前端工程师面试必看面试题(HTML+CSS+JavaScript)

初级Web前端工程师面试必看面试题 (HTML+CSS+JavaScript) 作者:来源于网络发布时间:07月20日 很多初级前端工程师去面试的时候可能不知道考官会问些什么,提前做好准备会为你的面试加分,极客学院整理出了一些必看的初级工程师面试考题,希望会大家有所帮助。 1.对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css 和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性; 2.XHTML和HTML有什么区别? HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

用于声明文档使用那种规范(HTML/XHTML)一般为严格过度基于框架的html文档 加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容,border ,margin,padding 5.CSS引入的方式有哪些? link和@import的区别是? 内联内嵌外链导入 区别:同时加载 前者无兼容性,后者CSS2.1以下浏览器不支持 Link 支持使用javascript改变样式,后者不可 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符类选择符id选择符 继承不如指定Id>class>标签选择 后者优先级高

web前端面试题大全

1Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些?空(void)元素有那些? 页面导入样式时,使用link和@import有什么区别? 介绍一下你对浏览器内核的理解? 常见的浏览器内核有哪些? html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 简述一下你对HTML语义化的理解? HTML5的离线储存怎么使用,工作原理能不能解释一下? 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢? 请描述一下 cookies,sessionStorage 和 localStorage 的区别? iframe有那些缺点? Label的作用是什么?是怎么用的?(加 for 或包裹) HTML5的form如何关闭自动完成功能? 如何实现浏览器内多个标签页之间的通信? (阿里) webSocket如何兼容低浏览器?(阿里) 页面可见性(Page Visibility)API 可以有哪些用途? 如何在页面上实现一个圆形的可点击区域? 实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。 网页验证码是干嘛的,是为了解决什么安全问题? tite与h1的区别、b与strong的区别、i与em的区别? 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS选择符有哪些?哪些属性可以继承? CSS优先级算法如何计算? CSS3新增伪类有那些? 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? display有哪些值?说明他们的作用。 position的值relative和absolute定位原点是? CSS3有哪些新特性? 请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景? 用纯CSS创建一个三角形的原理是什么? 一个满屏品字布局如何设计? 常见兼容性问题? li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法? 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧? 为什么要初始化CSS样式。 absolute的containing block计算方式跟正常流有什么不同? CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?

相关文档
最新文档