2026年Web前端工程师（HTMLCSSJS）技能考核试卷二

2026年Web前端工程师（HTMLCSSJS）技能考核试卷二考试时间：______分钟总分：______分姓名：______一、选择题（请将正确选项的字母填入括号内）1.下列哪个HTML5语义化标签表示页面主体内容？()A.`<div>`B.`<section>`C.`<article>`D.`<header>`2.CSS中，用于指定元素在外部浏览器窗口中打开链接的属性是？()A.`target`B.`href`C.`rel`D.`type`3.下列哪个CSS选择器具有最高的特异性？()A.`div.class`B.`#id`C.`div`D.`.class`4.`box-sizing:border-box;`属性的作用是？()A.将元素的padding和border包含在宽度和高度内B.将元素的padding和border排除在宽度和高度外C.增加元素的边框宽度D.减少元素的内边距5.在CSSFlexbox布局中，哪个属性用于指定容器主轴的方向？()A.`justify-content`B.`align-items`C.`flex-direction`D.`flex-wrap`6.以下哪个CSS属性用于创建响应式布局，根据不同屏幕尺寸应用不同的样式规则？()A.`position`B.`display`C.`visibility`D.`media`7.JavaScript中，声明一个只读变量的关键字是？()A.`var`B.`let`C.`const`D.`static`8.下列哪个JavaScript操作符用于判断两个值是否严格相等？()A.`==`B.`===`C.`!=`D.`!==`9.在JavaScript中，用于在网页上添加或移除HTML元素的内置对象是？()A.`window`B.`document`C.`navigator`D.`location`10.JavaScript中，事件冒泡指的是？()A.事件处理函数按特定顺序执行B.鼠标从一个元素移动到另一个元素C.事件首先在目标元素上触发，然后逐级向上传播到父元素D.事件处理函数异步执行11.下列哪个HTML属性用于指定超链接的目标打开方式？()A.`href`B.`title`C.`target`D.`rel`12.CSS中，`z-index`属性主要用于控制哪个方面的元素层级？()A.水平B.垂直C.轴向D.堆叠（前后）13.JavaScript中，`undefined`和`null`的关系是？()A.完全相等B.完全不等C.`undefined`等于`typeofnull`D.`null`等于`typeofundefined`14.下列哪个CSS布局方式最适合用于创建两列或三列的等宽布局？()A.FloatB.FlexboxC.GridD.Position15.JavaScript中，`for...of`循环主要用于遍历哪种类型的对象？()A.数组B.对象C.函数D.字符串16.CSS中，`visibility:hidden;`与`display:none;`的主要区别是？()A.`visibility:hidden;`不会影响布局，`display:none;`会B.`display:none;`不会影响布局，`visibility:hidden;`会C.两者效果完全相同D.两者都不能隐藏元素17.在JavaScript中，`function`关键字定义的函数与使用`function`表达式定义的函数有何不同？()A.前者有作用域，后者没有B.前者没有作用域，后者有C.两者定义的函数在JavaScript引擎中处理方式不同D.两者没有本质区别18.下列哪个HTTP请求方法通常用于提交表单数据？()A.GETB.POSTC.PUTD.DELETE19.CSSGrid布局中，用于定义列大小的属性是？()A.`grid-template-columns`B.`grid-template-rows`C.`grid-gap`D.`grid-area`20.JavaScript中，`setTimeout(function(){},1000);`的作用是？()A.立即执行函数B.延迟1秒后执行函数C.每1秒执行一次函数D.清除一个定时器二、多选题（请将正确选项的字母填入括号内，多选或少选均不得分）1.以下哪些属于HTML5新增的表单输入类型？()A.`email`B.`password`C.`date`D.`checkbox`2.CSSFlexbox布局中，可以用于控制项目在交叉轴上的对齐方式的属性有？()A.`justify-content`B.`align-items`C.`align-self`D.`flex-direction`3.JavaScript中，以下哪些是原始数据类型？()A.`string`B.`number`C.`object`D.`boolean`4.下列哪些CSS选择器是组合选择器？()A.`div.class`B.`#id`C.`div>p`D.`.class`5.在JavaScript中，使用`document.querySelector("selector")`可以获取到？()A.匹配指定选择器的第一个元素B.匹配指定选择器的所有元素C.一个HTMLCollection对象D.一个NodeList对象6.CSS中，`position`属性的值可以包括？()A.`static`B.`relative`C.`absolute`D.`flex`7.JavaScript中，以下哪些表达式会导致返回`true`当与`==`操作符一起使用？()A.`""==0`B.`0=="0"`C.`false==0`D.`null==undefined`8.以下哪些是CSS3支持的新属性？()A.`border-radius`B.`box-shadow`C.`transform`D.`font-family`9.JavaScript事件流包括哪些阶段？()A.鼠标按下B.事件捕获C.事件目标D.事件冒泡10.下列哪些是CSSGrid布局的常用属性？()A.`grid-template-areas`B.`grid-template-columns`C.`grid-row-gap`D.`display:flex`三、填空题（请将答案填写在横线上）1.HTML中，用于定义文档标题的标签是________。2.CSS中，`margin`和`padding`属性分别表示元素的________和________。3.JavaScript中，用于声明块级作用域的变量声明关键字有________和________。4.在JavaScript中，获取一个元素的`id`属性值，可以使用`element.__________`。5.CSS中，`flex-grow`属性用于控制子项在主轴方向上的________。6.事件监听函数通常使用`element.__________("事件名",函数名)`方法来添加。7.CSS中，`@media`规则用于实现________设计。8.JavaScript中，`==`和`===`的主要区别在于________。9.下列HTML代码`<inputtype="text"name="username"required>`中，`required`属性的作用是________。10.CSS中，`background-image`属性用于设置元素的________。四、简答题（请根据要求作答）1.请简述CSS盒模型（标准模型和IE模型）的区别，并说明`box-sizing:border-box;`的作用。2.解释JavaScript中“作用域”和“闭包”的概念，并说明闭包的主要应用场景。3.描述一下JavaScript事件处理的基本流程（例如，点击按钮触发事件的处理过程）。4.什么是响应式设计？请列举至少三种实现响应式设计的常用方法。五、编程题（请根据要求编写代码）1.假设有以下HTML结构：```html<divid="container"><divclass="item">Item1</div><divclass="item">Item2</div><divclass="item">Item3</div></div>```请编写JavaScript代码，为所有`.item`类的元素添加一个点击事件，当点击任意一个`.item`时，在控制台输出被点击元素的文本内容。2.请使用CSSGrid布局，设计一个包含两行三列的网格结构。要求：第一行所有格子宽度相等，第二行第一列格子宽度是其他列的两倍。给所有格子设置一个浅灰色背景，给边框设置统一的样式。3.实现一个简单的表单验证功能。假设有一个HTML表单如下：```html<formid="myForm"><inputtype="text"id="username"placeholder="Enterusername"required><inputtype="password"id="password"placeholder="Enterpassword"required><buttontype="submit">Submit</button></form>```请编写JavaScript代码，在表单提交时（`submit`事件），检查`username`和`password`输入框是否为空。如果任一为空，则阻止表单提交，并在该输入框下方显示一条错误信息“此项不能为空”。（提示：可以使用`event.preventDefault()`方法阻止默认行为，使用`document.querySelector()`获取元素，使用`textContent`设置文本内容）。试卷答案一、选择题1.B解析：`<section>`标签表示文档中的一个区段或章节，具有语义化意义。`<div>`是通用容器，`<header>`表示页面或区块的页眉。2.A解析：`target`属性指定链接打开方式，如`_blank`在新窗口打开，`_self`在当前窗口打开。`href`是链接地址，`rel`是关系属性，`type`是MIME类型。3.B解析：选择器特异性计算规则中，ID选择器（#id）的特异性最高，其次是类选择器（.class），然后是标签选择器（div），属性选择器和伪类/伪元素特异性最低。4.A解析：`box-sizing:border-box;`规定元素的`padding`和`border`包含在宽度和高度内，使得元素的最终宽度和高度只取决于`width`和`height`属性值。5.C解析：`flex-direction`属性定义了Flex容器的主轴（mainaxis）方向，可以是`row`（默认，水平方向向右）、`column`（垂直方向向下）、`row-reverse`或`column-reverse`。6.D解析：`media`查询是CSS3的一部分，允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的CSS样式规则，实现响应式设计。7.C解析：`const`关键字用于声明一个常量，其值在初始化后不能被重新赋值。`var`和`let`声明的是变量，可以重新赋值。8.B解析：`===`是严格相等运算符，它比较两个值是否相等且类型相同。`==`是相等运算符，会进行类型转换后再比较。9.B解析：`document`对象是JavaScript中与HTML页面交互的核心，提供了访问和操作网页元素的方法和属性。10.C解析：事件冒泡是HTML事件流的一个阶段，事件从触发它的最具体元素（目标元素）开始，然后逐级向上传播到包含元素，直至到达`document`对象。11.C解析：`target`属性用于指定链接（`<a>`标签）在何处打开，如`_blank`在新窗口，`_self`在当前窗口。12.D解析：`z-index`属性仅适用于具有定位属性（`position`为`absolute`,`relative`,`fixed`或`sticky`）的元素，用于控制它们在垂直方向（堆叠上下文）上的前后顺序。13.C解析：在JavaScript中，`typeofnull`返回字符串`"object"`，而`undefined`的类型是`"undefined"`。虽然值不同，但历史原因导致在严格相等（`===`）比较时，`undefined`和`null`被视为相等（`==`）。14.C解析：CSSGrid布局是专门为二维布局设计的，其强大的列和行控制能力非常适合创建复杂、灵活的等宽或多列布局。15.A解析：`for...of`循环用于遍历具有迭代器的对象，最常用的是数组、字符串、Map、Set等。它可以直接获取每个元素的值。16.A解析：`visibility:hidden;`只改变元素的可见性，使其不可见，但元素仍然占据布局空间。`display:none;`则完全从布局中移除元素，不占用任何空间。17.C解析：使用`function`关键字定义的函数（函数声明）会提升（hoist），其函数体在执行前被处理。而使用`function`表达式定义的函数（如`varmyFunc=function(){}`）不会提升，其函数体在遇到该表达式时才被创建。18.B解析：`POST`方法用于提交表单数据到服务器，数据通常在HTTP请求体中发送，比较安全。`GET`方法将数据附加在URL中。19.A解析：`grid-template-columns`属性定义了Grid容器中列的尺寸和数量。20.B解析：`setTimeout`函数用于在指定的毫秒数（这里是1000毫秒，即1秒）后异步执行一次提供的函数。二、多选题1.A,C解析：HTML5新增了多种表单输入类型，如`email`（邮箱）、`password`（密码）、`date`（日期）、`range`（范围滑块）、`color`（颜色）等。`checkbox`是标准的复选框输入类型，不是新增的。2.B,C解析：`justify-content`控制主轴（横轴）上的对齐方式。`align-items`控制交叉轴（纵轴）上的对齐方式。`align-self`可以覆盖父容器的`align-items`设置，单独控制某个子项在交叉轴上的对齐。`flex-direction`定义主轴方向。3.A,B,D解析：JavaScript的原始数据类型（非对象类型）包括：`string`（字符串）、`number`（数字）、`boolean`（布尔值）、`null`（空值）、`undefined`（未定义）、`symbol`（符号，ES6新增）、`BigInt`（大整数，ES2020新增）。`object`是引用类型。4.A,C解析：组合选择器由基本选择器组合而成，用于更精确地选择元素。`div.class`是类选择器与标签选择器的组合。`div>p`是后代选择器（用空格分隔）和子元素选择器（用`>`分隔）的组合。`#id`和`.class`都是基本选择器。5.A,D解析：`document.querySelector("selector")`返回匹配指定选择器的第一个元素，结果是一个`Element`对象，属于`NodeList`类型的特殊情况（只包含一个节点）。它不返回`HTMLCollection`（返回`HTMLCollection`的方法是`querySelectorAll`）。6.A,B,C解析：`position`属性的值有：`static`（默认定位）、`relative`（相对定位）、`absolute`（绝对定位）、`fixed`（固定定位）、`sticky`（粘性定位）。`flex`是`display`属性的值。7.A,B,C解析：在`==`比较中，JavaScript会进行类型转换。`""==0`，空字符串转换为`0`。`0=="0"`，数字`0`转换为字符串`"0"`。`false==0`，`false`转换为`0`。`null==undefined`在`==`比较中相等，但在`===`比较中不相等。8.A,B,C解析：这些都是CSS3引入的新属性或功能。`border-radius`（边框圆角）、`box-shadow`（盒子阴影）、`transform`（变换）、`transition`（过渡）、`animation`（动画）、`flexbox`（弹性盒模型）、`grid`（网格布局）等都是CSS3的代表性新特性。`font-family`是早期CSS就有的属性。9.B,C,D解析：JavaScript事件流分为三个阶段：事件捕获阶段（事件从顶层向下传递至目标元素）、事件目标阶段（事件到达目标元素并在此阶段被处理）、事件冒泡阶段（事件从目标元素向上冒泡至顶层）。鼠标按下是事件触发的初始动作，不是事件流阶段。10.A,B,C解析：这些都是CSSGrid布局常用的属性。`grid-template-areas`用于定义网格区域及其名称。`grid-template-columns`和`grid-template-rows`定义网格的列和行尺寸。`grid-row-gap`和`grid-column-gap`（或`grid-gap`）定义网格行和列之间的间隔。`display:flex`是Flexbox布局的属性。三、填空题1.`<title>`2.外边距，内边距3.`let`,`const`4.`id`5.占据空间6.`addEventListener`7.响应式8.类型转换9.确保表单字段在提交前不为空10.背景图像四、简答题1.解析：CSS标准盒模型中，一个元素的宽度和高度只包括其内容区域（`content`），不包括内边距（`padding`）、边框（`border`）和外边距（`margin`）。计算公式为：`实际宽=width`；`实际高=height`。IE盒模型（或称为怪异模型）将内边距和边框也包含在宽度和高度内。计算公式为：`实际宽=width+padding-left+padding-right+border-left-width+border-right-width`；`实际高=height+padding-top+padding-bottom+border-top-width+border-bottom-width`。`box-sizing:border-box;`的作用是修改盒模型的计算方式，使得元素的`width`和`height`属性值包含了内容、内边距和边框，只不包含外边距，使得元素的最终尺寸更容易控制。2.解析：作用域（Scope）是指变量或函数的可访问范围或生命周期。在JavaScript中，函数内部可以访问其外部函数的作用域中的变量（称为“闭包”或“词法作用域”），但外部函数无法访问其内部函数的作用域中的变量。闭包是指一个函数可以访问并操作其外部函数作用域中的变量，即使外部函数已经执行完毕。创建闭包的常见方式是在一个函数内部定义另一个函数。主要应用场景包括：1）模块化，封装变量避免全局污染；2）创建私有变量和方法；3）实现函数柯里化（Currying）；4）延迟执行或实现回调函数。3.解析：JavaScript事件处理的基本流程如下：首先，用户执行某个操作（如点击按钮），浏览器会创建一个事件对象（如`click`事件）。然后，浏览器开始事件传播（事件流），首先进入事件捕获阶段，事件从顶层向下传递，直到到达目标元素。到达目标元素后，进入事件目标阶段，此时事件处理程序被触发执行（如果已绑定）。最后，进入事件冒泡阶段，事件从目标元素向上冒泡传递到父元素，直到到达`document`对象。在事件传播过程中，可以通过在元素上调用`event.stopPropagation()`方法来阻止事件继续传播。事件处理函数通常接收一个`event`参数，可以通过该参数获取事件的相关信息（如`target`目标元素、`type`事件类型、`preventDefault()`阻止默认行为等）。4.解析：响应式设计（ResponsiveWebDesign,RWD）是一种网页设计方法，旨在使网页能够根据用户设备的屏幕尺寸、分辨率或方向（通常是宽度）进行自适应调整，从而提供最佳的浏览和交互体验。它不仅仅是使用不同尺寸的设备查看网页，而是确保网页在所有设备上都能良好地工作。实现响应式设计的主要方法包括：1）使用流式网格布局（LiquidGridLayout），基于百分比而非固定像素定义布局尺寸；2）使用媒体查询（MediaQueries），根据不同的屏幕条件应用不同的CSS样式规则；3）使用弹性图片和媒体（FlexibleImagesandMedia），通过CSS确保图片、视频等媒体内容能够缩放以适应容器大小（如使用`max-width:100%`和`height:auto`）；4）使用相对单位（如`em`,`rem`,`vw`,`vh`）代替绝对单位（如`px`）。五、编程题1.```javascriptdocument.querySelectorAll('.item').forEach(function(item){item.addEventListener('click',function(){console.log(this.textContent);});});//或者使用匿名函数//document.querySelectorAll('.item').forEach(function(item){//item.onclick=function(){//console.log(this.textContent);//};//});```解析：`document.querySelectorAll('.item')`获取所有具有`.item`类的元素，返回一个`NodeList`对象。`forEach`方法遍历`NodeList`。对于每个`.item`元素，使用`addEventListener`方法为其绑定一个`click`事件监听器。当点击事件发生时，事件处理函数被调用，`this`关键字指向被点击的`.item`元素，`this.textContent`获取该元素的文本内容，并使用`console.log`输出到控制台。使用匿名函数或为元素直接设置`onclick`属性都可以实现相同功能，但`addEventListener`提供了更好的事件管理（可以添加多个监听器，不覆盖已有监听器）。2.```css#container{display:grid;grid-template-columns:1fr1fr1fr;/*三列等宽*/grid-template-rows:autoauto;/*行高自适应内容*/grid-gap:10px;/*网格间距*/background-color:#f0f0f0;border:1pxsolid#ccc;}.item{background-color:#e0e0e0;border:1pxsolid#aaa;padding:20px;text-align:center;}#container.item:nth-child(2){grid-column:span2;/*第二行第一列占两列*/}```解析：首先为容器`#container`设置`display:grid;`以启用Grid布局。使用`grid-template-columns:1fr1fr1fr;`定义三列，每列使用`fr`单位分配可用空间，实现等宽。`grid-template-rows:autoauto;`定义两行，高度自适应内容。`grid-gap:10px;`设置网格间距。为所有`.item`设置统一的背景、边框和内边距样式。为了实现第二行第一列宽度是其他列的两倍，使用`nth-child(2)`伪类选择器选中第二个`.item`元素，并对其应用`grid-column:span2;`属性，使其跨越两列。第一行三个`.item`默认占据一列，第二行三个`.item`中，第一个跨越两列，后两个各占据一列。3.```javascriptdocument.getElementById('myForm').addEventListener('submit',function(event){event.preventDefault();//阻止表单默认提交行为varusername=document.getElementById('username');varpassword=document.getElementById('password');varerrorMessage='';if(!username.value.trim()){errorMessage+='Usernamecannotbeempty.<br>';}if(!password.value.trim()){errorMessage+='Passwordcannotbeempty.<br>';}if(errorMessage){//假设每个输入框下方都