前端开发面试题集锦

2025-01-23

前端开发面试题集锦（精选10篇）

1.前端开发面试题集锦篇一

1、什么是web标准?

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

2、XHTML与HTML有什么区别?你觉得应该使用哪一个，并说出理由。

XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定。

标签不能重叠,可以嵌套

标签与属性都要小写

标签都要有始有终,要么以

形式结束,要么以

形式结束

每个属性都要有属性值,并且属性值要在双引号中

别用name用id

3、请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别?

DOCTYPE声明是指HTML文档开头处的一行或两行代码，它描述使用哪个DTD。DTD(文档类型定义)是一组机器可读的规则，它们定义XML或HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。

DOCTYPE当前有两种风格，严格(strict)和过渡(transitional)。过渡的目的是帮助开发人员从老版本迁移到新版本，仍然允许使用已经废弃的元素。严格版本禁止使用废弃的元素，从而把内容和表现分隔开。

2.前端开发面试题集锦篇二

一、耐心填一填!(每空4分，共24分)

1. 为span设置类a与b,应编写HTML代码_________，

2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。

3. ____li________标签必须直接嵌套于ul、ol中。

4. CSS属性_____margin_______可为元素设置外补丁。

5. 设置CSS属性float的值为___none_________时可取消元素的`浮动。

6. 文字居中的CSS代码是____text-align:center________。

二、精心选一选!(每题4分，共16分)

1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 选出你认为最合理的定义标题的方法( C )

A. 文章标题

文章标题

D. 文章标题

3. br标签在XHTML中语义为( A )

A.换行 B.强调 C.段落 D.标题

4. 不换行必须设置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判断对或错!(每题4分，共24分)

1. CSS属性font-style 用于设置字体的粗细，

( × )

2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )

3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )

4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )

5. display:inline兼容所有的浏览器。 ( √ )

3.今日头条前端工程师笔试题篇三

A.datalist

B.optgroup

C.output

D.legend

2.[单选题]在HTML中，( )可以在网页上通过链接直接打开邮件客户端发送邮件。

A.发送邮件

B.发送邮件

C.发送邮件

D.发送邮件

3.[不定项选择题]请选出所有的置换元素

A.img

B.input

B.textarea

D.select

4.[单选题]下面哪条声明能固定背景图片

A.background-attachment:fixed;

B.background-attachment:scroll;

C.background-origin: initial;

D.background-clip: initial;

5.[不定项选择题]下列说法正确的是

A.display: none;不为被隐藏的对象保留其物理空间;

B.visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;

C.visibility:hidden;产生reflow和repaint(回流与重绘);

D.visibility:hidden;与display: none;两者没有本质上的区别;

6.[单选题]以下关于盒子模型描述正确的是：

A.标准盒子模型中：盒子的总宽度 = 左右margin + 左右border + 左右padding + width

B.IE盒子模型中：盒子总宽度 = 左右margin + 左右border + width

C.标准盒子模型中：盒子的总宽度 = 左右margin + 左右border + width

D.IE盒子模型中：盒子总宽度 = width

7.[单选题]下面哪个属性不会让 div 脱离文档流(normal flow)?

A.position: absolute;

B.position: fixed;

C.position: relative;

D.float: left;

8.[单选题]英文字母全部转为大写正确的是

A.text-transform: capitalize;

B.text-transform: lowercase;

C.text-transform: uppercase;

D.font-weight: bold;

9.[单选题]假设在今日头条里面,有很多工作人员检查新闻是不是属于虚假新闻,所有新闻真实率到达了98%,工作人员在检验一个真实的新闻把它检验为一个虚假的新闻的概率为2%,而一个虚假的新闻被检验为真实的新闻的概率为5%.那么,一个被检验为真实的新闻确实是真实的新闻的概率是多大?

A.0.9991

B.0.9989

C.0.9855

D.0.96

10.[单选题]现在有两堆石子,小今与小条玩游戏,2个人都足够聪明,两个人规定:每次每人只能从其中一堆中取走1个或2个或3个石子,最后将石子全部取完的人胜利.现在两堆石子的个数为8和9,请问如何安排才能让小今必胜?

A.让小今先取

B.让小条先取

C.没有策略能够让小今必胜

4.WEB前端开发经验总结篇四

通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。WEB标准是什么？

说是WEB标准，不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。

采用WEB标准开发的好处

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？

1、节约运营成本

看看我们的WEB标准制作方法是如何做到的？

采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。

而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。

2、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问我们网站的人）；第二类：搜索引擎；

采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。

而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。

一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习WEB标准啊。合理的布局

前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。

也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。

在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：

不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。

这是此次实验中customer（前端的一项）部分的完整代码：

<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>

<%=Titlep %>

” name=“description”/> ” name=“keywords” />

5.web项目前端开发经验总结篇五

最近这一个月完成了自己的第一个java web项目，是给某杂志社做的在线投稿系统，虽然进度很慢，但是中间确实学到了不少东西，深刻体会到了自己看几个月书都不如做一个项目来的实在。这个项目自己主要负责的是JSP页面、JS脚本、CSS样式表的编写，虽然主要做的是前端，但是在设计前端后台交互功能时，对MVC架构和数据库又多了一分了解，这一个月的时间，自己在技术上也确实成长了不少。下面分成几块总结一下自己的这个项目中的心得吧：

1.项目开发流程：从确认需求开始，到原型设计，再到原型测试，这些都没什么说的了，主要是刚开始开发前端JSP页面时，自己走了很多弯路，想到有什么页面就写什么页面，GET和POST的路径也是随心所欲，想到什么名字就起什么名字，结果发现这样做严重影响了项目开发的进度，后来经过主管的提点后，我幡然醒悟，其实，面向对象的思想就贯穿在整个项目当中，在前面的原型设计的过程中，除了页面的设计还有数据库的设计，数据库的每个表就对应着Java中的每个实体类，这个类封装了数据库中的列作为属性，封装了数据库的增删改查作为方法，就拿这个投稿系统为例，实体主要有用户、稿件等等，实体间还有着一对一映射或者一对多映射等对应关系。其实，整个系统的开发就是围绕着这些个实体进行的，甚至于我们可以把实体名字做为二级目录，把实体的增删改查作为GET或POST的路径，譬如account/add、paper/delete等等，有了这些路径，那么与之对应的GET和POST的Controller也就有了，接下来我们要做的就是，定义Controller中返回的视图，写完Controller后再把与实体相关的增删改查方法写到服务层中，再把项目的整个骨架搭起来，再去处理细节，很快的，这个项目就成型了。这里前端和后台的配合尤为重要，数据交互是整个系统的核心。

2.JSP页面设计：提到JSP页面，在这里我想说的一点是，其实JSP页面是在服务器生成的，那么传给JSP页面的变量、参数都会在服务器转化为它们具体的值，然后再传给客户端。JSP页面可以实现很多服务器端的功能，因为可以直接在页面嵌入JAVA代码，但是我们必须明确的一点是，JSP页面主要是用来呈现视图的，不要再其中套入大量的代码，要明确前端与后台的分工。

3.JSTL标签：JSTL标签就是JSP standard taglib，即JSP标准标签库，首先，EL表达式可以非常方便的取出Controller返回的View包含的Model，甚至都无需声明EL表达式。其次，JSTL标签可以实现很多的逻辑控制功能，比如最基本的c:if判断、c:forEach循环，甚至有更强大的c:choose，有了这些，我们可以大大简化代码量，JSP页面中用几十行java写的代码，有时用几句JSTL标签组合就实现了，此外，像fmt:parseDate和fmt:formatDate也是很好用的标签，用于日期的解析和格式化，此外JSTL更有强大的函数标签库fn:，项目中我也只用到了fn:length取后台传的list的长度。要善用JSTL标签，但是又不要完全依赖于它，JSTL标签很方便、快捷，但是切记，JSTL功能有限，不要完全依赖于它。

4.shiro框架：shiro框架是apache的一款面向java web项目的权限控制框架，这个框架无论前端、后台都十分好用，在前端，我们可以使用shiro强大的标签库，通过用户角色赋予用户不同的访问权限。譬如，如果一个系统的用户有访客、用户、管理员三种角色，我们就可以通过shiro标签来控制游客不能访问哪些内容，页面向用户和管理员呈现的不同内容，这就是shiro标签的神奇之处。

5.sitemesh框架：这个主要是用来将所有页面套用固定格式，用以页面的复用，其实有些时候标签更为方便，而且sitemesh框架的内存开销是的二倍，还会导致拦截器出现一些莫名的bug，所以并不推荐使用。

6.jquery：在这个项目中写了很多的jquery代码，发现jquery确实是个神奇的东西，jquery的神奇之处就在于jquery强大的选择器可以方便的取到页面的DOM元素，并且给这些元素绑定不同的事件，提到绑定事件，说一下on、live和bind的区别：bind是jquery最早的绑定事件方法，on是jquery 1.7.0以后才有的方法，bind和on都不能将事件绑定给DOM加载完毕后后添加到页面的DOM元素，这时就需要live了。还有一个经常使用的就是jquery的ajax了，其实在做这个项目之前自己一直不理解ajax的作用机理，只是心里又个概念而已，但是，在真正使用的ajax之后，才发现ajax的强大之处，确实如AJAX自身描述一样，异步加载javascript，这就允许我们在不打开新页面的情况POST一些参数给后台，后台得到并处理这些参数后将JSON返回给前端，这个JSON的处理function就写在ajax的success处理function中。在这个项目JSON和AJAX最主要的应用就是翻页，加载一个页面，把页面传给后台然后把得到的JSON呈现给用户，翻页时重新POST参数，然后在用js重新处理一下翻页区域即可。

7.jquery.validate.js：这是一个轻量的jquery框架，主要用于表单的验证，非常方便。

8.twitter bootstrap.js：bootstrap自带的js框架，里面定义了许多与bootstrap样式相关联的函数，使用起来也很方便。

9.正则表达式：正则表达式的模式匹配是很强大的，灵活运用正则表达式，也会简化代码，甚至我们在查找替换时都可以使用正则表达式。

6.Web前端开发个人简历篇六

姓名：YJBYS

性别：男

出生日期：1992-4

婚姻状况：未婚

联系电话：×××××××××××

电子邮箱：的开发如何结合?

2. 怎样添加、移除、移动、复制、创建和查找节点

3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别

4. 面向对象编程:b怎么继承a

5. 看看下面alert的结果是什么

view sourceprint?1.function b(x, y, a) {

.arguments[2] = 10;

.alert(a);

}

b(1, 2, 3);

如果函数体改成下面，结果又会是什么?

a = 10;

alert(arguments[2] );

6. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

var obj = parseQueryString(url);

alert(obj.key0) // 输出0

7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

8. 什么是闭包?下面这个ul，如何点击每一列的时候alert其index?

这是第一条

这是第二条

这是第三条

9. 最近看的一篇Javascript的文章是?

10. 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

11.说说YSlow(可以详细一点)

7.Web前端开发个人简历篇七

姓名：YJBYS

性别：男

出生日期：1992-4

婚姻状况：未婚

联系电话：×××××××××××

电子邮箱：的开发如何结合?

2. 怎样添加、移除、移动、复制、创建和查找节点

3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别

4. 面向对象编程:b怎么继承a

5. 看看下面alert的结果是什么

view sourceprint?1.function b(x, y, a) {

.arguments[2] = 10;

.alert(a);

}

b(1, 2, 3);

如果函数体改成下面，结果又会是什么?

a = 10;

alert(arguments[2] );

6. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

var obj = parseQueryString(url);

alert(obj.key0) // 输出0

7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

8. 什么是闭包?下面这个ul，如何点击每一列的时候alert其index?

这是第一条

这是第二条

这是第三条

9. 最近看的一篇Javascript的文章是?

10. 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

11.说说YSlow(可以详细一点)

8.前端开发面试题集锦篇八

5. 不知道你们有没有留意，经常会用到那个清楚浏览器缓存的操作，这里说道的缓存是指代哪些数据，且描述这写数据的名字及其常用的作用?

6. 手机浏览器输入：“www.baidu.com”时候会出现一段空白时间，俗称“白屏”，请写处至少五种解决这个问题的解决方案。

7. 我们在进行组建开发的时候，精彩会需要用到大量颜色。有两种方法。方法1：预先定义好大量的颜色;方法2：自定义函数，采用随机生成颜色的方式。请采用方法2实现随机颜色汲取。

附加题：描述你认为影象最深刻的项目，从一下几个方面来描述：

1. 用到了什么新技术?

2. 遇到了什么挑战?

9.Java前端开发工程师的职责篇九

1、负责实现web系统架构设计和搭建。

2、项目的总体规划和总体设计、概要设计、软件架构和数据库设计。

3、负责解决项目中的关键问题和技术难题。

4、负责项目的具体技术实现和编码。

5、能够带领团队，负责公司相关产品的web开发。

任职资格：

1、计算机或相关专业、3年以上WEB开发经验

2、精通Java语言和JavaEE体系结构，熟悉多线程技术，熟悉Java网络编程

3、熟练使用主流框架如SpringMVC、SpringBoot、Mybatis,RabbitMQ等，能够搭建web框架，熟悉使用Tomcat或Weblogic

4、熟悉使用基于Maven、Gradle等项目构建工具

4、熟悉常用数据库Oracle/MySQL，掌握SQL优化

5、熟练使用IntelliJ IDEA等开发工具

10.web前端开发实习日志篇十

通过3天的实训，虽然实训的时间不长，但是总体上收获是很大的，我们的java课程学到的只是java和皮毛，[java web实习报告]一开始我还没有信心完成。我仔细看了书上的代码之后。对计事本有了一个大体的了解，在初训的实候知道自己应该做一个什么样的计事本了，在实训的过程中也遇到了不少困难，通过查API文档和看书，解决了问题，在写到字符的查找的替换时后，用到了上课时学到的知识，对字体的风格的保存里面的颜色分离和还原方法，是通过查API文档获得的,现在我所写的计事本只实现在一些基本功能。简单的复制粘贴，字体风格的设置，还有就是查找和替换功能以及一些字体风格的保存.对文件的操作基本都用到了。

在实现记事本的功能过程中，也不是很顺利，基本的文件读写和保存文档的复制、粘贴、删除等功能还比较容易实现，但如何改变字体、字体颜色和背景颜色，就比较麻烦了，要实现字体颜色和背景颜色，首先要调用系统的调色板，再进行设置。但如何调用系统调色板我是通过查阅帮助文档来找到其调用方法的。像自动换行、设置字体等都是通过方法来调用，给相关事件加上监听，在进行响应事件。整个程序中方法才是最关键的，也是最困难的。所以像查找、替换、转到几个功能我都不知道用什么方法，也由于时间有限，没有完成其功能。总体的感觉是对java有了一个全新的认识，现在感觉用java做小的图形用户程序有些缺陷，但是在其的应用方面。尤其是有网络方面的应用，在整个实训我也尝试过做一个小的画图软件。但是由于时间关系还有一个是自身的知识的欠缺，最终这个事情被搁浅下来了。最后还是进行计事本的编写。由于在做画图软件时花了不了时间，所以现在的计事本的功能不是很全，如果有更多的时间，我会把这个记事体再完善一下，再把画图软件也做出来。实训的时间不长，但是我会在课外把它们的功能完善。然后再学习一下java和网络的编程，体验java的前沿技术。在学习的过程中也体会到，遇到问题也要请教。不然的话自己一个人去做的话会花很多的时间，我在做这个记事本的时间，其中也问到过许多问题，通过同学的帮助下解决了，提高了程序的开发进程。其他的同学有问题的话我也是给他们尽量解决。我认为学习知识的过程当中就应该是相互学习相互进步的。Java是面在的主流技术我会努力将它学好，现在我缺乏的是坚持不懈的精神，我会向他学习。虽然学习java的路还很找，但我会继续走下去。

【前端开发面试题集锦】推荐阅读：

前端面试笔试题12-15

前端开发的工作职责09-21

web项目前端开发经验总结09-29

2022前端项目组开发人员的工作总结01-08

百度校园招聘web前端广州站笔试题09-25