2026年Web前端工程師HTMLCSSJS技能測(cè)試卷

2026年Web前端工程師HTMLCSSJS技能測(cè)試卷考試時(shí)間：______分鐘總分：______分姓名：______一、選擇題（請(qǐng)選擇最符合題意的選項(xiàng)）1.以下哪個(gè)HTML5語(yǔ)義化標(biāo)簽表示頁(yè)面內(nèi)容中的側(cè)邊欄信息？A.`<section>`B.`<article>`C.`<aside>`D.`<nav>`2.在HTML中，為元素設(shè)置`id="myId"`后，在CSS中如何最精確地選中該元素？A.#myIdB..myIdC.element#myIdD.#myIdelement3.CSS盒模型中，哪個(gè)屬性用于控制元素內(nèi)容的實(shí)際大小，而`box-sizing:border-box;`會(huì)使其包含邊框和內(nèi)邊距的大小？A.`padding`B.`border`C.`margin`D.`content`4.以下哪個(gè)CSS布局方法最適合用于構(gòu)建一維布局，能夠方便地處理主軸和交叉軸上的對(duì)齊與分布？A.FlexboxB.GridC.FloatD.Position5.CSS中，`margin:5px10px15px20px;`表示什么？A.上5px，右10px，下15px，左20pxB.上10px，右5px，下20px，左15pxC.上5px，右20px，下10px，左15pxD.上15px，右20px，下5px，左10px6.如果想讓一個(gè)元素的背景圖片只覆蓋其內(nèi)容區(qū)域，而不擴(kuò)展到整個(gè)容器，應(yīng)該使用哪個(gè)CSS屬性？A.`background-size:contain;`B.`background-size:cover;`C.`background-size:100%100%;`D.`background-size:auto;`7.以下哪個(gè)CSS屬性可以用來(lái)實(shí)現(xiàn)元素在一段時(shí)間內(nèi)平滑地改變某個(gè)或某些樣式屬性？A.`animation`B.`transition`C.`transform`D.`keyframes`8.JavaScript中，`let`關(guān)鍵字聲明的變量具有什么特性？A.函數(shù)作用域B.全局作用域C.塊級(jí)作用域D.類作用域9.在JavaScript中，`===`運(yùn)算符的作用是什么？A.檢查值是否相等B.檢查值和類型是否完全相等C.將左側(cè)值轉(zhuǎn)換為字符串后比較D.檢查值是否不相等10.下列哪個(gè)選項(xiàng)不是JavaScript的原生數(shù)據(jù)類型？A.`undefined`B.`function`C.`boolean`D.`float`11.以下哪個(gè)方法可以用來(lái)向已經(jīng)存在的DOM元素中添加一個(gè)新的子元素？A.`appendChild()`B.`insertBefore()`C.`addEventListener()`D.`querySelector()`12.在JavaScript中，獲取頁(yè)面中所有`<p>`標(biāo)簽的代碼是？A.`document.getElementsByTagName('p')`B.`document.querySelector('p')`C.`document.querySelectorAll('p')`D.`document.getElementById('p')`13.事件冒泡是指什么？A.事件處理函數(shù)需要手動(dòng)添加B.鼠標(biāo)點(diǎn)擊事件從最頂層元素開(kāi)始觸發(fā)C.事件處理函數(shù)只在目標(biāo)元素上觸發(fā)D.鼠標(biāo)移動(dòng)事件比點(diǎn)擊事件優(yōu)先觸發(fā)14.JavaScript中，`Promise`對(duì)象的哪個(gè)狀態(tài)表示異步操作已成功完成？A.`pending`B.`fulfilled`C.`rejected`D.`resolved`15.在JavaScript中，使用`async`關(guān)鍵字聲明的函數(shù)，其返回值默認(rèn)是什么？A.PromiseB.undefinedC.nullD.其原始返回值二、多選題（請(qǐng)選擇所有符合題意的選項(xiàng)）1.以下哪些屬于HTML5新增的表單輸入類型？A.`email`B.`password`C.`color`D.`range`E.`text`2.CSS中，如何使一個(gè)元素脫離文檔流，并且不占據(jù)空間？A.`display:inline;`B.`display:block;`C.`position:absolute;`D.`float:left;`E.`display:none;`3.Flexbox布局中，哪些屬性可以用于控制項(xiàng)目在主軸上的對(duì)齊方式？A.`justify-content`B.`align-items`C.`align-self`D.`flex-grow`E.`flex-shrink`4.CSS選擇器的優(yōu)先級(jí)從高到低大致排序如下哪些？A.內(nèi)聯(lián)樣式(Inline)B.ID選擇器(#id)C.類選擇器(.class)D.標(biāo)簽選擇器(tag)E.通配符選擇器(*)5.JavaScript中，以下哪些表達(dá)式會(huì)導(dǎo)致變量進(jìn)入“暫時(shí)性死區(qū)”（TDZ）？A.`leta=5;`B.`constb=10;`C.`varc;console.log(c);c=3;`D.`functionfoo(){letd;}foo();console.log(d);`E.`if(true){conste;}console.log(e);`6.以下哪些是JavaScript的“異步”特性或相關(guān)機(jī)制？A.回調(diào)函數(shù)(Callbacks)B.PromisesC.`async/await`D.`setTimeout()`E.`var`聲明變量7.DOM操作中，以下哪些方法可以用來(lái)創(chuàng)建新的DOM元素？A.`document.createElement()`B.`document.createTextNode()`C.`document.querySelector()`D.`document.getElementById()`E.`document.appendChild()`(用于添加元素，而非創(chuàng)建)8.以下哪些是ES6引入的JavaScript新特性？A.`let`和`const`B.類(Classes)C.模塊(`import`/`export`)D.展開(kāi)運(yùn)算符(`...`)E.`function`關(guān)鍵字9.CSS中，`box-sizing:border-box;`的作用是什么？A.邊框和內(nèi)邊距不會(huì)增加元素的總寬度和總高度B.元素的寬度和高度只包含內(nèi)容區(qū)域C.邊框和內(nèi)邊距會(huì)增加到元素的總寬度和總高度D.默認(rèn)的盒模型行為E.使元素寬度始終為100%10.以下哪些操作可能導(dǎo)致瀏覽器進(jìn)行DOM重新渲染（Reflow）？A.修改元素的寬高B.修改元素的邊框顏色C.修改元素的文本內(nèi)容D.修改元素的`display`屬性E.修改元素的`visibility:hidden;`三、填空題（請(qǐng)將答案填寫(xiě)在橫線上）1.HTML中，`<a>`標(biāo)簽的`href`屬性用于指定鏈接的________。2.CSS中，`position:fixed;`屬性會(huì)讓元素相對(duì)于瀏覽器的________定位。3.JavaScript中，用于在瀏覽器控制臺(tái)輸出信息的函數(shù)是________。4.CSS中，`transition:all0.3sease-in-out;`表示讓所有樣式屬性在0.3秒內(nèi)完成過(guò)渡，過(guò)渡效果為_(kāi)_______。5.事件處理函數(shù)通常通過(guò)`element._______=function(){};`的方式添加到DOM元素上。6.JavaScript中，`null`和`undefined`的數(shù)據(jù)類型都是________。7.CSSGrid布局中，使用________屬性定義網(wǎng)格的行。8.用來(lái)存儲(chǔ)瀏覽器會(huì)話數(shù)據(jù)的WebStorageAPI是________。9.JavaScript中，`==`運(yùn)算符會(huì)進(jìn)行________轉(zhuǎn)換后再比較值。10.CSS預(yù)處理器（如Sass）最終需要編譯成________才能被瀏覽器執(zhí)行。四、簡(jiǎn)答題（請(qǐng)簡(jiǎn)明扼要地回答下列問(wèn)題）1.簡(jiǎn)述HTML5語(yǔ)義化標(biāo)簽的意義和作用。2.解釋Flexbox布局中的主軸（MainAxis）和交叉軸（CrossAxis）的概念。3.描述JavaScript中閉包（Closure）的概念及其常見(jiàn)應(yīng)用場(chǎng)景。4.什么是異步編程？為什么在Web前端開(kāi)發(fā)中需要使用異步編程？5.簡(jiǎn)述JavaScript事件流（事件捕獲、事件冒泡）的過(guò)程。五、編程題（請(qǐng)根據(jù)要求編寫(xiě)代碼）1.使用HTML和CSS創(chuàng)建一個(gè)簡(jiǎn)單的導(dǎo)航欄，包含三個(gè)水平排列的鏈接（Home,About,Contact）。要求導(dǎo)航欄背景為淺灰色，鏈接文字為深藍(lán)色，鼠標(biāo)懸停時(shí)鏈接文字顏色變?yōu)榧t色。使用Flexbox進(jìn)行布局。2.編寫(xiě)JavaScript代碼，實(shí)現(xiàn)以下功能：當(dāng)用戶點(diǎn)擊頁(yè)面上的一個(gè)按鈕時(shí)，頁(yè)面中某個(gè)段落的文字顏色發(fā)生改變，并彈出一個(gè)提示框顯示“顏色已更改”。試卷答案一、選擇題1.C解析：`<aside>`標(biāo)簽表示頁(yè)面內(nèi)容中的側(cè)邊欄，通常包含與頁(yè)面內(nèi)容相關(guān)但相對(duì)獨(dú)立的信息。`<section>`通常表示文檔中的一個(gè)章節(jié)，`<article>`表示一個(gè)獨(dú)立的內(nèi)容單元，`<nav>`表示導(dǎo)航鏈接的集合。2.A解析：ID選擇器以`#`開(kāi)頭，后跟ID名稱，是CSS中最具特異性的選擇器，用于精確選中具有特定ID的元素。3.D解析：CSS盒模型中，`content`屬性定義了元素內(nèi)容區(qū)域的大小。`box-sizing:border-box;`規(guī)則會(huì)使得元素的寬度和高度包含其內(nèi)容、內(nèi)邊距（padding）和邊框（border）的寬度，而不需要額外計(jì)算它們。4.A解析：Flexbox（彈性盒子布局）是一套一維布局模型，主要用于處理元素在主軸（通常是水平方向）上的對(duì)齊、分布、順序和大小調(diào)整，非常適合構(gòu)建靈活的容器布局。5.A解析：CSS中的`margin`屬性可以接受一至四個(gè)值。當(dāng)提供四個(gè)值時(shí)，分別代表上、右、下、左的邊距。`margin:5px10px15px20px;`等同于`margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;`。6.A解析：`background-size:contain;`表示背景圖片會(huì)保持其原始的寬高比，完整地適應(yīng)元素的contentbox，可能圖片的部分區(qū)域不會(huì)顯示在元素外。`cover`則會(huì)拉伸圖片以覆蓋整個(gè)元素盒子，可能損失圖片原始比例。7.B解析：`transition`屬性用于定義CSS屬性在指定時(shí)間內(nèi)平滑變化的效果，常用于制作簡(jiǎn)單的動(dòng)畫(huà)或交互效果。`animation`屬性用于定義更復(fù)雜的、由多個(gè)關(guān)鍵幀組成的動(dòng)畫(huà)。`transform`用于修改元素的位置、大小、旋轉(zhuǎn)等。`keyframes`定義動(dòng)畫(huà)的關(guān)鍵幀。8.C解析：`let`關(guān)鍵字聲明的變量具有塊級(jí)作用域（blockscope），即其作用范圍限制在聲明它的代碼塊（如`{}`代碼塊）內(nèi)。`var`聲明的變量具有函數(shù)作用域或全局作用域。9.B解析：`===`是嚴(yán)格等于運(yùn)算符，它會(huì)同時(shí)比較兩個(gè)值的值和類型是否完全相等。`==`是等于運(yùn)算符，會(huì)比較值時(shí)進(jìn)行類型轉(zhuǎn)換（如數(shù)值與字符串比較時(shí)，字符串會(huì)被轉(zhuǎn)為數(shù)值）。10.B解析：JavaScript的原生數(shù)據(jù)類型包括：`undefined`,`null`,`boolean`,`number`,`string`,`symbol`,`object`,`function`。`float`不是JavaScript的數(shù)據(jù)類型，`number`類型可以表示整數(shù)和浮點(diǎn)數(shù)。11.A解析：`appendChild()`方法用于將一個(gè)節(jié)點(diǎn)（元素）添加到其父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾。`insertBefore()`用于在指定子節(jié)點(diǎn)之前插入一個(gè)節(jié)點(diǎn)。`addEventListener()`用于添加事件監(jiān)聽(tīng)器。`querySelector()`用于選擇第一個(gè)匹配指定選擇器的元素。12.A解析：`document.getElementsByTagName()`返回一個(gè)HTMLCollection，包含文檔中所有具有指定標(biāo)簽名的元素。`document.querySelector()`返回第一個(gè)匹配指定選擇器的元素。`document.querySelectorAll()`返回一個(gè)NodeList，包含所有匹配指定選擇器的元素。`document.getElementById()`返回具有指定ID的元素。13.B解析：事件冒泡是指當(dāng)一個(gè)元素的事件被觸發(fā)后，該事件會(huì)逐層向上傳遞到其父元素，直至到達(dá)`document`對(duì)象。這是DOM事件流的一部分。14.B解析：在JavaScript的`Promise`對(duì)象中，狀態(tài)有三種：`pending`（pending，等待態(tài)）、`fulfilled`（fulfilled，成功態(tài)）和`rejected`（rejected，失敗態(tài)）。`fulfilled`狀態(tài)表示異步操作已成功完成。15.A解析：`async`函數(shù)本身返回一個(gè)`Promise`對(duì)象。如果函數(shù)內(nèi)部返回一個(gè)值，該值會(huì)被自動(dòng)包裝成一個(gè)`Promise`對(duì)象（如果該值本身不是`Promise`）。如果函數(shù)內(nèi)部拋出錯(cuò)誤，返回的`Promise`對(duì)象會(huì)被拒絕（rejected）。二、多選題1.A,C,D解析：HTML5新增了多種表單輸入類型，包括`email`（用于輸入郵箱地址）、`password`（用于輸入密碼，內(nèi)容會(huì)隱藏）、`color`（用于選擇顏色）、`range`（用于創(chuàng)建滑動(dòng)條，選擇數(shù)值范圍）。`text`是一個(gè)基礎(chǔ)的文本輸入類型，并非新增。2.C,D解析：`position:absolute;`會(huì)將元素從正常文檔流中移除，使其相對(duì)于其最近的已定位祖先元素（或`body`）進(jìn)行定位，并且不占據(jù)頁(yè)面布局空間。`float:left;`或`float:right;`也會(huì)使元素脫離文檔流，但左側(cè)或右側(cè)會(huì)貼合父元素的邊框，并允許其他內(nèi)容在其周圍流動(dòng)。`display:inline;`使元素Inline-block顯示，占據(jù)水平空間，但屬于行內(nèi)元素。`display:block;`使元素塊級(jí)顯示，占據(jù)整行寬度，屬于塊級(jí)元素。`display:none;`使元素不顯示，并從布局中移除。3.A,C解析：`justify-content`控制主軸（通常是水平方向）上子項(xiàng)目的對(duì)齊方式（如左對(duì)齊、右對(duì)齊、居中對(duì)齊、分散對(duì)齊等）。`align-items`控制交叉軸（通常是垂直方向）上子項(xiàng)目的對(duì)齊方式。`align-self`用于設(shè)置單個(gè)子項(xiàng)目在交叉軸上的對(duì)齊方式，覆蓋父元素的`align-items`設(shè)置。`flex-grow`和`flex-shrink`控制子項(xiàng)目在主軸上的伸縮比例。4.A,B,C,D解析：CSS選擇器的優(yōu)先級(jí)通常遵循以下規(guī)則（特異度從高到低）：內(nèi)聯(lián)樣式（如`style="..."`，特異度最高）>ID選擇器（#id）>類選擇器（.class）>標(biāo)簽選擇器（tag）>通配符選擇器（*）>偽類選擇器（:hover等）>偽元素選擇器（::before等）>繼承的樣式。注意后代選擇器（如`divp`）的特異度等于其所有組成部分選擇器特異度之和。5.D,E解析：TDZ（TemporalDeadZone）是指`let`和`const`聲明的變量在聲明之前存在的一個(gè)區(qū)域，在此區(qū)域內(nèi)無(wú)法訪問(wèn)這些變量。`leta=5;`和`constb=10;`在聲明之前訪問(wèn)`a`或`b`會(huì)觸發(fā)ReferenceError。`varc;console.log(c);c=3;`中，`c`在聲明之前通過(guò)`console.log`可以訪問(wèn)，因?yàn)閌var`聲明會(huì)被提升。`functionfoo(){letd;}foo();console.log(d);`中，`d`在`foo`函數(shù)內(nèi)部聲明，在函數(shù)外部訪問(wèn)`d`處于TDZ。`if(true){conste;}console.log(e);`中，`e`在`if`代碼塊內(nèi)部聲明，在代碼塊外部訪問(wèn)`e`處于TDZ。6.A,B,C,D解析：異步編程是指程序可以在等待某個(gè)操作（如網(wǎng)絡(luò)請(qǐng)求、文件讀寫(xiě)）完成的同時(shí)繼續(xù)執(zhí)行其他任務(wù)。回調(diào)函數(shù)是處理異步結(jié)果的傳統(tǒng)方式。Promises是JavaScript中處理異步操作的強(qiáng)大機(jī)制。`async/await`是基于Promises的語(yǔ)法糖，使異步代碼看起來(lái)更像同步代碼。`setTimeout()`是一個(gè)典型的異步操作，用于在指定時(shí)間后執(zhí)行函數(shù)。`var`聲明變量屬于同步操作，不屬于異步特性。7.A,B解析：`document.createElement(tagName)`用于創(chuàng)建一個(gè)新的HTML元素節(jié)點(diǎn)。`document.createTextNode(text)`用于創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。`document.querySelector()`用于選擇元素。`document.getElementById()`用于根據(jù)ID選擇元素。`document.appendChild(node)`用于將一個(gè)已存在的節(jié)點(diǎn)添加到父節(jié)點(diǎn)的子節(jié)點(diǎn)列表中。8.A,B,C,D解析：ES6（ECMAScript2015）引入了許多新特性，包括：`let`和`const`變量聲明、類（Classes）語(yǔ)法、模塊（Modules）系統(tǒng)（`import`/`export`）、箭頭函數(shù)、解構(gòu)賦值、模板字符串、默認(rèn)參數(shù)、剩余參數(shù)、展開(kāi)運(yùn)算符（`...`）、Set、Map、Promise、`async`/`await`、新的正則表達(dá)式API等。`function`關(guān)鍵字是ES5及更早版本就有的。9.A,C解析：`box-sizing:border-box;`規(guī)則指定了元素的盒模型行為，使得元素的寬度和高度值（在CSS中聲明）包含了內(nèi)容（content）、內(nèi)邊距（padding）和邊框（border）的寬度，而不僅僅是內(nèi)容區(qū)域的寬度。這意味著元素的視覺(jué)寬度主要由CSS中聲明的寬高決定。默認(rèn)的盒模型是`content-box`。10.A,B,D,E解析：DOM操作中，修改元素的幾何屬性（如寬、高、邊框、位置）通常會(huì)導(dǎo)致瀏覽器的布局過(guò)程（Reflow），因?yàn)樾枰匦掠?jì)算元素及周圍元素的位置和大小。修改元素的視覺(jué)樣式，如背景顏色、文字顏色，通常也會(huì)導(dǎo)致重繪（Repaint）和可能的Reflow。修改元素的`display`屬性（如從`inline`變?yōu)閌block`）會(huì)改變?cè)氐恼故痉绞剑ǔＰ枰猂eflow。修改`visibility:hidden;`會(huì)隱藏元素，瀏覽器需要重新繪制頁(yè)面，涉及Repaint和可能的Reflow。修改文本內(nèi)容（如`textContent`或`innerText`）通常只涉及Repaint，但如果文本長(zhǎng)度變化導(dǎo)致元素大小改變，則可能涉及Reflow。三、填空題1.鏈接地址(或URL)2.視口(viewport)3.console.log()4.ease-in-out5.onclick(或其他事件類型，如onmouseover,onsubmit等，取決于具體事件)6.object7.grid-template-rows8.LocalStorage9.類型(或Type)10.CSS(或?qū)盈B樣式表)四、簡(jiǎn)答題1.簡(jiǎn)述HTML5語(yǔ)義化標(biāo)簽的意義和作用。解析思路：強(qiáng)調(diào)結(jié)構(gòu)清晰、可讀性強(qiáng)、利于SEO、提高可訪問(wèn)性。解釋常用標(biāo)簽如`<header>`,`<nav>`,`<main>`,`<article>`,`<section>`,`<aside>`,`<footer>`等代表的內(nèi)容含義，替代原先的通用標(biāo)簽如`<div>`和`<span>`，使頁(yè)面結(jié)構(gòu)更清晰，機(jī)器（搜索引擎爬蟲(chóng)、屏幕閱讀器）更容易理解和解析頁(yè)面內(nèi)容。2.解釋Flexbox布局中的主軸（MainAxis）和交叉軸（CrossAxis）的概念。解析思路：以容器為例。主軸是容器默認(rèn)的布局方向，通常水平方向（從左到右）是主軸，垂直方向（從上到下）是交叉軸。解釋`justify-content`作用于主軸方向上的對(duì)齊，`align-items`作用于交叉軸方向上的對(duì)齊。可以通過(guò)旋轉(zhuǎn)容器（`flex-direction`屬性）來(lái)改變主軸和交叉軸的方向。3.描述JavaScript中閉包（Closure）的概念及其常見(jiàn)應(yīng)用場(chǎng)景。解析思路：解釋閉包是指一個(gè)函數(shù)可以訪問(wèn)其外部作用域（enclosingscope）中的變量。即使外部函數(shù)已經(jīng)執(zhí)行完畢，其內(nèi)部函數(shù)仍然可以訪問(wèn)這些變量。強(qiáng)調(diào)閉包的核心是詞法作用域（lexicalscoping）。常見(jiàn)應(yīng)用場(chǎng)景包括：創(chuàng)建私有變量、實(shí)現(xiàn)模塊化封裝、函數(shù)柯里化（Currying）、創(chuàng)建工廠函數(shù)等。4.什么是異步編程？為什么在Web前端開(kāi)發(fā)中需要使用異步編程？解析思路：定義：異步編程是指程序可以啟動(dòng)一個(gè)操作并在等待其完成的同時(shí)繼續(xù)執(zhí)行其他任務(wù)。解釋在Web前端，許多操作涉及I/O（如網(wǎng)絡(luò)請(qǐng)求、文件讀寫(xiě)、DOM操作等）需要花費(fèi)較長(zhǎng)時(shí)間，如果這些操作同步執(zhí)行，會(huì)導(dǎo)致用戶界面（UI）凍結(jié)，用戶體驗(yàn)變差。異步編程允許這些耗時(shí)操作在后臺(tái)執(zhí)行，完成時(shí)通過(guò)回調(diào)、Promise或`async/await`通知主線程更新UI或處理結(jié)果，從而保持應(yīng)用的響應(yīng)性。5.簡(jiǎn)述JavaScript事件流（事件捕獲、事件冒泡）的過(guò)程。解析思路：描述事件流是事件傳遞的過(guò)程。事件捕獲階段：事件從最頂層的`document`對(duì)象開(kāi)始，逐層向下傳遞到目標(biāo)元素所在層級(jí)的父元素，直到到達(dá)目標(biāo)元素。事件目標(biāo)階段：事件到達(dá)目標(biāo)元素，開(kāi)始執(zhí)行目標(biāo)元素上綁定的事件處理函數(shù)。事件冒泡階段：事件處理函數(shù)執(zhí)行完畢后，事件會(huì)從目標(biāo)元素開(kāi)始，逐層向上傳遞回其父元素，直至`document`對(duì)象。解釋事件默認(rèn)行為（如點(diǎn)擊鏈接跳轉(zhuǎn)）通常發(fā)生在冒泡階段。五、編程題1.使用HTML和CSS創(chuàng)建一個(gè)簡(jiǎn)單的導(dǎo)航欄，包含三個(gè)水平排列的鏈接（Home,About,Contact）。要求導(dǎo)航欄背景為淺灰色，鏈接文字為深藍(lán)色，鼠標(biāo)懸停時(shí)鏈接文字顏色變?yōu)榧t色。使用Flexbox進(jìn)行布局。解析思路（HTML）：```html<navclass="navbar"><ahref="#"class="nav-link">Home</a><ahref="#"class="nav-link">About</a><ahref="#"class="nav-link">Contact</a></nav>```解析思路（CSS）：```css.navbar{display:flex;/*使用Flexbox布局*/background-color:#f0f0f0;/*淺灰色背景*/padding:10px;/*內(nèi)邊距*/list-style:none;/*去除列