web前端工程师面试问题

初级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)一般为 严格

Web 前端中高级工程师工作职责

工作职责

1. 负责移动端H5 开发、维护和优化工作。

2. 负责第三方平台小程序开发、维护和优化工作

职位要求

1. 三年以上前端开发经验。

2. 熟练使用HTML5/CSS3 开发响应式网页布局。

3. 精通JavaScript、Ajax 、DOM/BOM 等前端交互技术。

4. 掌握前端一种构建工具( Grunt/Gulp/Webpack)

5. 在项目开发中，熟练使用Vue或React框架，并结合开源UI快速构建Web应用。

6. 熟练掌握ES5/ES6语法，熟悉Node.js等服务端技术开发优先。

7. 熟悉Http 等工作原理。

8. 对Web前端的性能优化以及Web常见漏洞有一定的理解和相关实践

9. 善于技术总结，较强的自主学习能力，通过技术文档参考，能独立解决疑难技术点。

10. 主动性强，有敬业精神，勇于面对困难和接受挑战，有良好的团队协作能力和沟通能力。

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; i4 下列声明数组的语句中，错误的选项是（ C ）。 a)Var arry= new Array() b)Var arry=new Array(3) c)Var arry[]=new Array(3)(4) d)Var arry=new Array(?3?,?4?)

5. 下列哪一个选项不属于document对象的方法?（D ） a)focus()

b)getElementById() c)getElementsByName() d)bgColor()

6. 、 display属性值的常用取值不包括(C ) a)inl

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; i4 下列声明数组的语句中，错误的选项是（ C ）。 a)Var arry= new Array() b)Var arry=new Array(3) c)Var arry[]=new Array(3)(4) d)Var arry=new Array(?3?,?4?)

5. 下列哪一个选项不属于document对象的方法?（D ） a)focus()

b)getElementById() c)getElementsByName() d)bgColor()

6. 、 display属性值的常用取值不包括(C ) a)inl

HTML+CSS+JAVASCRIPT+JQUERY

(1) 行内元素有哪些？块级元素有哪些？CSS的盒模型？

(2) CSS引入的方式有哪些? link和@import的区别是?

(3) CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪

个优先级高？

(4) 写出CSS选择器种类

(5) 前端页面有哪三层构成，分别是什么？作用是什么？

(6) 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

(7) 标签上title与alt属性的区别是什么？

(8) 描述css reset的作用和用途。

(9) 如何居中div,如何居中一个浮动元素?

(10)

请缩写以下代码：

.box {

background-position: 10px 20px; background-repeat: no-repeat; background-attachment: fixed;

background-color: red;

background-image: url(box.png); } (11)

正确使用 HTML 和 CSS 实现以下效果（中间方框部分表示图片，右侧为文字列

表。尽量不要使用 float 属

ACAA前端工程师试题参考：

选择题部分:

HTML+CSS基础知识

1、在html中，样式表按照应用方式可以分为三种类型，其中不包括（d）。

a.内嵌样式表

b.行内样式表

c.外部样式表文件

d.类样式表

2、在制作HTML页面时，页面的布局技术主要是（d）。

a.框架布局

b.表格布局

c.DIV层布局

d.以上全部选项

3、如果在catalog.htm中包含如下代码，则该HTML文档IE浏览器中打开后，用户单击此链接将(c)。

<a href="#novel">小说</a>

a.使页面跳转到同一文件夹下名为“novel.html”的HTML文档

b.使页面跳转到同一文件夹下名为“小说.html”的HTML文档

c.使页面跳转到catalog.htm包含名为“novel”的锚记处

d.使页面跳转到同一文件夹下名为“小说.html”的HTML文档中名为“novel”的锚记处

4、以下说法正确的是（ d ）。

a.<a>标签是页面链接标签，只能用来链接到其他页面

b.<a>标签是页面链接标签,只能用来链接到本页面的其他位置

c.<a>标签的src属性用于指定要链接的地址

d.标签的href属性用

1、CSS+DIV开发Web页面的优势有哪些？

优点：

1）div+css，这个网页设计模式中，div承担了网页的内容，css承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。

2）有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在table中一层层的查找）

3）有助于页面的重构(换皮肤如blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。) 缺点：开发效率比较低

2、HTML引用css样式有几种方式？ 内部样式 外部样式 内联样式

3、在HTML页面布局中，position的值有哪几种？默认值又是什么？ Position:static Position:relative; Position:absolute; Position:fixed;

4、Html里一些标签里面不能放区块元素，解决方法是什么？

5、Doctype作用？标准模式与兼容模式各有什么区别?

6、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

7、浏览器的内核分别是什么?

8、语义化的理解？

9、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

10、如何居中div？如何居中一个浮动元素？

11列出

最近陆陆续续面试了一些公司的培训专员职位，现将常见提问总结如下，给自己一些启示，也给目前在投这方面工作的朋友一些参考。 常见提问：

一、个人素养类 1、用一分钟的时间做自我介绍（貌似简单，实则考验培训师临场应变能力及自我推销能力，有点貌似TTT培训的现场演练）。

2、介绍从小到大你最好的一位朋友（物以类聚、人以群分，间接了解你是什么样的人，价值观怎样）。

3、一件印象最深刻的事情（你最关注什么、追求什么） 4、从小到大家人朋友给你最大的忠告是什么（间接了解你的缺点） 5、介绍你应聘这个职位的优势和不足 6、你的直接上司经常对你说的话是什么 7、领导怎样考评你的工作

二、专业技能类（不分先后） 1、你以前的工作经历和公司简介

2、你组织主讲过哪些培训课程，一整套培训进行下来流程是什么 3、介绍培训部架构、各自职能

4、人力资源部架构、人数、各自职能，你熟悉其他模块工作内容吗 5、公司培训体系是什么，目前进展到什么程度

6、培

Windchill工程师面试

Windchill Foundation是Windchill的基本包，故大家如果对Windchill技术了解，就不用太担心对Foundation技术的掌握。两者的技术差异在于里面一些开发手段的差异。

1.有没有做过Foundation

没有，但看过Foundation的系统，Founation与Windchill本质上没有差异，技术上只是部分实现手段不一样。比如之前大部分用Template做页面，9.0目前用JSP或JCA来做。

2. 有没有做过Template

Template技术是在8.0的PDMLink中广泛使用的界面开发技术，主要是通过在URL中输入action，然后系统在properties文件中去查找对应的html文件和html文件的处理类

然后把界面显示给用户，在这里面使用了Windchill自己开发的一些类似javascript技术的Windchill script技术。Windchill script技术可以在html页面上写一些函数，当处理类对html页面进行处理的时候就会在处理类中调用在html页面上写的那些windchill script函数。

或-按自己情况回答。Template技

MySQL、Java web、试卷预览 试卷编号:(829) 试题总分：150

? 单项选择题

1. 题干：以下有关JSTL的说法不正确的是（ ）。

分数：2分

知识点：了解什么是JSTL(11010001) 答案：D

选项：A:JSTL就是一个JSP标签库 B:核心标签库为日常任务提供通用支持 C:国际化标签库支持多语种的应用程序 D:函数标签库提供了许多用于XML处理的标准EL函数

2. 题干：以下（ ）标签用于格式化日期和时间并按照设定的格式给予输出。

分数：2分

知识点：掌握常用格式化/国际化标签及其使用方法(11010004) 答案：A

选项：A: B: C: D: 3. 题干：在HTML中超链接标记为（ ）。

分数：2分

知识点：了解超文本、HTML、XML及Web工作机制(01010002) 答案：A

选项：A:和 B: C:和 D:和 4. 题干：以下URL中语法不正确的是（ ）。

分数：2