初级web工程师面试题和答案

初级web工程师面试题和答案

一、选择题（本题型共15题，每题2分，共30分）

1.HTML5中新增的语义化标签不包括以下哪一个？A.headerB.navC.sectionD.div

2.以下哪个HTML标签用于定义页面的头部区域？A.headB.headerC.titleD.meta

3.CSS中，哪个属性用于设置元素的外边距？A.paddingB.marginC.borderD.background

4.以下CSS选择器中，优先级最高的是？A.类选择器（如.class）B.ID选择器（如#id）C.标签选择器（如div）D.后代选择器（如div p）

5.JavaScript中，以下哪个数据类型属于基本数据类型？A.对象（Object）第1页共13页B.数组（Array）C.字符串（String）D.函数（Function）

6.执行var a=10;var b=20;console.loga+b;后，控制台输出的结果是？A.30B.1020C.报错D.

10207.HTML中，哪个标签用于在页面中插入图片？A.imgB.imageC.pictureD.photo

8.CSS中，哪个属性可以让元素脱离文档流并相对于最近的非静态定位祖先元素定位？A.position:staticB.position:relativeC.position:absoluteD.position:fixed

9.JavaScript中，以下哪个方法用于向数组末尾添加元素？A.shiftB.popC.pushD.unshift第2页共13页

10.以下哪个不是HTML5的新特性？A.本地存储（Local Storage）B.语义化标签C.Canvas绘图D.表格（table）

11.CSS中，哪个单位表示相对于父元素字体大小的倍数？A.emB.remC.pxD.%

12.JavaScript中，undefined和null的区别是？A.两者完全相同B.undefined表示变量未初始化，null表示空对象引用C.undefined用于对象，null用于基本数据类型D.都表示“没有值”，无区别

13.HTML中，哪个标签用于定义页面的主体内容？A.mainB.bodyC.contentD.section

14.CSS中，哪个属性可以设置元素的内边距？A.marginB.paddingC.borderD.spacing第3页共13页

15.JavaScript中，以下哪个方法用于将字符串转换为数字？A.parseIntB.toStringC.NumberD.以上都是

二、判断题（本题型共10题，每题1分，共10分）

1.HTML5的article标签用于定义独立的内容块，与页面其他内容无关（）

2.CSS中，!important可以覆盖所有其他样式规则的优先级（）

3.JavaScript中，let和const声明的变量存在变量提升现象（）

4.HTML的a标签中，target=_blank表示链接在当前窗口打开（）

5.CSS的flex-direction属性默认值是row（）

6.JavaScript中，typeof[]的返回结果是array（）

7.HTML5的video标签支持的视频格式包括MP

4、WebM和Ogg（）

8.CSS中，border-radius属性用于设置元素的边框圆角（）

9.JavaScript中，for...in循环适用于遍历数组的索引（）

10.HTML的form标签中，method=get会将表单数据以POST方式提交到服务器（）

三、填空题（本题型共15题，每题2分，共30分）

1.HTML5中，用于存储临时数据的Web存储对象是______

2.CSS中，box-sizing:______可以让元素的内边距和边框不增加元素的总宽度和高度第4页共13页

3.JavaScript中，______方法用于检测字符串是否以指定子串开头

4.HTML的meta标签中，______属性用于定义页面的字符编码

5.CSS的Flexbox布局中，justify-content用于控制______方向的对齐方式

6.JavaScript中，______是一个全局对象，提供了对文档对象模型（DOM）的访问

7.HTML5的新语义化标签中，用于定义导航链接的是______

8.CSS中，______选择器用于选择所有具有相同类名的元素

9.JavaScript中，______是一种特殊对象，用于实现对象继承

10.HTML的input标签中，type=______用于创建一个多行文本输入框

11.CSS中，______属性可以设置元素的背景图片

12.JavaScript中，______方法用于删除数组的第一个元素并返回该元素

13.HTML5中，用于定义页面底部区域的标签是______

14.CSS中，______媒体查询可以匹配最小宽度为768px的设备

15.JavaScript中，______是一个函数，用于创建新的函数实例

四、简答题（本题型共10题，每题4分，共40分）

1.简述HTML语义化标签的作用

2.解释CSS中“盒模型”的概念，说明标准盒模型和IE盒模型的区别

3.什么是JavaScript的原型链？它在继承中起到什么作用？

4.简述浏览器的渲染过程第5页共13页

5.解释HTML5中的“本地存储”（Local Storage和SessionStorage）及其区别

6.CSS中Flexbox布局的核心属性有哪些？请列举3个

7.JavaScript中，“事件冒泡”和“事件捕获”的概念是什么？

8.什么是响应式Web设计？实现响应式设计的常用方法有哪些？

9.简述JavaScript中的“变量作用域”（全局作用域和局部作用域）

10.CSS中，“浮动”（float）和“定位”（position）的区别是什么？

五、代码题（本题型共10题，每题5分，共50分）

1.请写出一个包含导航栏、主内容区（标题+段落）和页脚的HTML基础结构，要求使用HTML5语义化标签

2.用CSS设置一个宽300px、高200px的div元素，背景色为蓝色，内边距15px，边框2px实线黑色，且不影响元素总尺寸

3.写一个JavaScript函数greetUsername，当传入用户名时，返回“Hello,[用户名]!”

4.用CSS Flexbox布局实现一个三栏式页面，左侧栏宽200px，右侧栏宽200px，中间栏自适应宽度，背景色分别为浅灰、浅蓝、浅绿

5.写一段HTML代码，包含一个表单，表单中有姓名输入框（type=text）、邮箱输入框（type=email）和提交按钮（type=submit），要求邮箱输入框有验证功能

6.用JavaScript实现一个函数sumArrayarr，计算数组中所有元素的总和，数组元素均为数字

7.用CSS实现一个响应式导航栏，在屏幕宽度小于768px时，导航项垂直排列，否则水平排列第6页共13页

8.写一个JavaScript函数findMaxarr，找出数组中的最大值，数组元素均为数字

9.用HTML和CSS实现一个简单的卡片组件，包含图片（使用占位图）、标题和描述文字，要求卡片有阴影效果，图片占满卡片顶部

10.用JavaScript实现一个函数reverseStringstr，将输入的字符串反转并返回，例如输入“hello”，返回“olleh”答案汇总

一、选择题答案

1.D

2.B

3.B

4.B

5.C

6.B

7.A

8.C

9.C

10.D

11.A

12.B

13.B

14.B

15.D

二、判断题答案

1.√

2.√

3.×

4.×

5.√

6.×

7.√

8.√

9.×

10.×

三、填空题答案

1.sessionStorage或localStorage

2.border-box

3.startsWith

4.charset

5.主轴

6.window

7.nav

8..（点号）

9.原型（prototype）

10.textarea

11.background-image

12.shift

13.footer

14.@media min-width:768px

15.new Function

四、简答题答案

1.作用提升代码可读性和可维护性；便于SEO优化，帮助搜索引擎理解页面结构；有利于无障碍访问，方便屏幕阅读器识别内容；便于团队协作和代码规范

2.盒模型元素在页面中占据的矩形区域，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成标准盒第7页共13页模型总尺寸=content+padding+border+margin；IE盒模型总尺寸=margin+border+padding+content（padding和border包含在content内）

3.原型链每个JavaScript对象都有一个内部属性[[Prototype]]，指向另一个对象（原型对象），原型对象也有自己的原型，形成链式结构作用实现继承，使子对象可以访问父对象原型链上的属性和方法，实现代码复用

4.渲染过程解析HTML生成DOM树→解析CSS生成CSSOM树→合并DOM和CSSOM生成渲染树（Render Tree）→布局（Layout）计算元素位置和尺寸→绘制（Paint）将渲染树像素化→合成（Composite）将图层合成最终页面

5.Local Storage持久化存储，数据不随会话结束删除，除非手动清除，容量约5MB；Session Storage会话级存储，会话结束（关闭浏览器）后数据自动删除，容量约5MB，两者均仅存储在客户端，不发送到服务器

6.核心属性flex-direction（定义主轴方向）、justify-content（主轴对齐方式）、align-items（交叉轴对齐方式）、flex-wrap（是否换行）、flex-flow（flex-direction和flex-wrap的简写）

7.事件冒泡事件从触发元素向上传播到父元素、祖父元素……直至document；事件捕获事件从document向下传播到触发元素现代浏览器通常先捕获后冒泡，顺序为document→父元素→子元素（捕获阶段），触发元素→子元素→父元素→document（冒泡阶段）

8.响应式Web设计让页面在不同设备（手机、平板、电脑）上均能良好显示和交互的设计理念常用方法媒体查询（@media）、流式第8页共13页布局（百分比、rem/em单位）、弹性盒模型（Flexbox）、网格布局（Grid）、响应式图片（srcset属性）

9.变量作用域全局作用域在函数外部声明的变量，可在所有地方访问；局部作用域在函数内部声明的变量，仅在函数内部访问使用let/const声明的变量具有块级作用域，仅在所在代码块内有效

10.浮动（float）使元素脱离文档流，向左或向右浮动，周围元素环绕它，常用于文字环绕图片；定位（position）通过top、right、bottom（或left）属性精确定位元素，可脱离文档流（absolute/fixed/relative）或相对自身位置定位，常用于元素精确布局

五、代码题答案headerh1网站标题/h1navullia href=#首页/a/lilia href=#关于/a/lilia href=#联系/a/li/ul/nav/headermainsectionh2主内容标题/h2p这是页面的主要内容段落.../p第9页共13页/section/mainfooterp©2025网站名称.保留所有权利./p/footerdiv{width:300px;height:200px;background-color:blue;padding:15px;border:2px solidblack;box-sizing:border-box;}function greetUsername{return Hello,+name+!;}.container{display:flex;width:100%;}.left-sidebar{width:200px;background-color:#f0f0f0;}.main-content{第10页共13页flex:1;background-color:#add8e6;}.right-sidebar{width:200px;background-color:#90ee90;}formlabel for=name姓名/labelinput type=text id=name requiredbrlabelfor=email邮箱/labelinput type=email id=email requiredbrinputtype=submit value=提交/formfunction sumArrayarr{let sum=0;for leti=0;iarr.length;i++{sum+=arr[i];//或使用arr.reducetotal,num=total+num,0}return sum;}.navbar{第11页共13页display:flex;justify-content:space-around;background-color:#333;}.nav-item{color:white;text-decoration:none;padding:10px;}@media max-width:768px{.navbar{flex-direction:column;}}function findMaxarr{let max=arr

[0];for leti=1;iarr.length;i++{if arr[i]max{max=arr[i];}}return max;}div class=card第12页共13页img src=https://via.placeholder.com/300x150alt=卡片图片h3卡片标题/h3p这是卡片的描述文字.../p/divstyle.card{width:300px;box-shadow:04px8px rgba0,0,0,

0.2;}.card img{width:100%;}/stylefunction reverseStringstr{return str.split.reverse.join;}第13页共13页。