2025四川九強(qiáng)通信科技有限公司招聘前端開發(fā)工程師等崗位21人筆試歷年常考點(diǎn)試題專練附帶答案詳解（第1套）一、單項(xiàng)選擇題下列各題只有一個(gè)正確答案，請(qǐng)選出最恰當(dāng)?shù)倪x項(xiàng)（共30題）1、在CSS中，當(dāng)元素的`box-sizing`屬性設(shè)置為`border-box`時(shí)，該元素的`width`屬性值表示的是什么？A.僅內(nèi)容區(qū)域（content）的寬度B.內(nèi)容區(qū)域（content）與內(nèi)邊距（padding）的寬度之和C.內(nèi)容區(qū)域（content）、內(nèi)邊距（padding）與邊框（border）的寬度之和D.內(nèi)容區(qū)域（content）、內(nèi)邊距（padding）、邊框（border）與外邊距（margin）的寬度之和2、以下JavaScript代碼執(zhí)行后，控制臺(tái)輸出的順序是什么？

```javascript

console.log('A');

setTimeout(()=>console.log('B'),0);

Promise.resolve().then(()=>console.log('C'));

console.log('D');

```A.A→B→C→DB.A→D→B→CC.A→D→C→BD.A→C→D→B3、HTTP狀態(tài)碼301與302的主要區(qū)別在于？A.301用于臨時(shí)重定向，302用于永久重定向B.301表示資源已永久遷移，302表示資源臨時(shí)遷移C.301僅適用于GET請(qǐng)求，302適用于所有請(qǐng)求方法D.301會(huì)改變請(qǐng)求方法為GET，302保持原請(qǐng)求方法4、在ES6中，關(guān)于箭頭函數(shù)的`this`指向，以下說法正確的是？A.箭頭函數(shù)的`this`在調(diào)用時(shí)動(dòng)態(tài)綁定，與調(diào)用者對(duì)象相關(guān)B.箭頭函數(shù)沒有自己的`this`，其`this`繼承自定義時(shí)的詞法作用域C.可通過`call`或`apply`方法顯式改變箭頭函數(shù)內(nèi)部的`this`指向D.箭頭函數(shù)作為對(duì)象方法時(shí)，`this`指向該對(duì)象實(shí)例5、以下HTML元素中，**不屬于**行內(nèi)元素（inlineelement）的是？A.`<span>`B.`<img>`C.`<input>`D.`<div>`6、在CSS中，以下哪個(gè)屬性用于設(shè)置元素的定位方式？

A.display

B.position

C.float

D.overflow7、JavaScript中，以下哪個(gè)方法用于將字符串轉(zhuǎn)換為數(shù)字？

A.parseInt()

B.toString()

C.join()

D.slice()8、關(guān)于HTML5中的語義化標(biāo)簽，以下說法正確的是？

A.<div>標(biāo)簽是HTML5新增的語義化標(biāo)簽

B.<header>、<nav>、<footer>都是HTML5引入的語義化標(biāo)簽

C.語義化標(biāo)簽僅影響頁面樣式，不影響結(jié)構(gòu)

D.所有舊版瀏覽器都不支持HTML5語義化標(biāo)簽9、在JavaScript中，以下代碼的輸出結(jié)果是什么？

```javascript

console.log(typeofnull);

```

A."null"

B."object"

C."undefined"

D."boolean"10、下列哪項(xiàng)是CSS盒模型的組成部分？

A.margin,padding,border,content

B.width,height,top,left

C.display,position,float,clear

D.font-size,line-height,color,background11、在CSS中，當(dāng)一個(gè)元素設(shè)置為`position:relative`時(shí)，其`top`和`left`屬性的偏移參照物是什么？A.瀏覽器視口的左上角B.該元素自身的原始位置C.最近的已定位（非static）祖先元素D.該元素的父元素的邊框區(qū)域12、在JavaScript中，執(zhí)行以下代碼后，變量`result`的值是什么？

```javascript

leta=5;

letresult=a+++++a;

```A.10B.11C.12D.1313、關(guān)于HTML5中的`<canvas>`元素，下列說法正確的是？A.`<canvas>`元素本身可以繪制圖形，無需JavaScriptB.`<canvas>`提供了基于矢量的繪圖APIC.`<canvas>`元素的默認(rèn)寬高是300像素×150像素D.`<canvas>`元素的內(nèi)容可以被搜索引擎直接索引14、在JavaScript中，以下哪個(gè)選項(xiàng)能正確判斷一個(gè)變量`x`是否為`NaN`？A.`x==NaN`B.`x===NaN`C.`typeofx==='NaN'`D.`Number.isNaN(x)`15、在CSS中，要實(shí)現(xiàn)一個(gè)元素在其父容器內(nèi)水平和垂直居中（父容器尺寸固定），以下哪種方法最常用且兼容性最好？A.使用`margin:0auto;`和`vertical-align:middle;`B.使用`position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`C.使用`display:flex;justify-content:center;align-items:center;`D.使用`text-align:center;`和`line-height`設(shè)置與父容器高度相等16、在CSS中，當(dāng)一個(gè)元素設(shè)置為`position:relative;`時(shí)，其`top`和`left`屬性的偏移量是相對(duì)于哪個(gè)元素計(jì)算的？A.文檔的視口（viewport）B.最近的已定位（非static）祖先元素C.該元素自身的原始位置D.該元素的父元素的邊框區(qū)域17、在JavaScript中，以下哪個(gè)方法可以阻止事件冒泡？A.`event.preventDefault()`B.`event.stopPropagation()`C.`event.stopImmediatePropagation()`D.`event.cancelBubble=true`18、HTML5中，用于定義文檔或文章的獨(dú)立部分的語義化標(biāo)簽是？A.`<section>`B.`<article>`C.`<div>`D.`<aside>`19、在JavaScript中，以下代碼的輸出結(jié)果是什么？

```javascript

console.log(typeofnull);

```A."null"B."undefined"C."object"D."boolean"20、關(guān)于CSS盒模型，下列描述正確的是？A.盒模型的寬度僅包含content，不包含padding和borderB.`box-sizing:border-box`會(huì)使元素的width包含padding和borderC.`box-sizing:content-box`是所有瀏覽器的默認(rèn)模式，但不被現(xiàn)代瀏覽器支持D.padding和margin都屬于盒模型的內(nèi)部屬性21、在JavaScript中，以下代碼執(zhí)行后，控制臺(tái)輸出的結(jié)果是什么？

```javascript

for(vari=0;i<3;i++){

setTimeout(()=>{

console.log(i);

},100);

}

```A.0,1,2B.1,2,3C.3,3,3D.undefined,undefined,undefined22、在CSS中，當(dāng)`box-sizing`屬性的值為`border-box`時(shí)，一個(gè)元素的總寬度（`width`）是如何計(jì)算的？A.`width`=內(nèi)容寬度B.`width`=內(nèi)容寬度+內(nèi)邊距（padding）C.`width`=內(nèi)容寬度+內(nèi)邊距（padding）+邊框（border）D.`width`=內(nèi)容寬度+內(nèi)邊距（padding）+邊框（border）+外邊距（margin）23、關(guān)于HTTP狀態(tài)碼，301和302狀態(tài)碼的主要區(qū)別在于？A.301是客戶端錯(cuò)誤，302是服務(wù)器錯(cuò)誤B.301用于GET請(qǐng)求重定向，302用于POST請(qǐng)求重定向C.301表示永久重定向，302表示臨時(shí)重定向D.301需要用戶確認(rèn)，302不需要用戶確認(rèn)24、在Vue.js框架中，Vue2與Vue3在實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的核心機(jī)制上，最大的不同點(diǎn)是？A.Vue2使用`Object.defineProperty`，Vue3使用`Proxy`B.Vue2使用`Proxy`，Vue3使用`Object.defineProperty`C.Vue2基于虛擬DOM，Vue3基于真實(shí)DOMD.Vue2無法監(jiān)聽數(shù)組變化，Vue3可以25、在HTML中，`<script>`標(biāo)簽的`defer`和`async`屬性的主要作用是？A.`defer`延遲腳本執(zhí)行直到文檔解析完成，`async`異步下載并在下載完成后立即執(zhí)行B.`defer`異步下載腳本，`async`延遲腳本執(zhí)行直到所有資源加載完畢C.`defer`和`async`都表示腳本必須在頁面渲染前執(zhí)行完畢D.`defer`用于內(nèi)聯(lián)腳本，`async`用于外部腳本26、在JavaScript中，關(guān)于閉包（Closure）的描述，以下哪一項(xiàng)是正確的？A.閉包是指函數(shù)執(zhí)行完畢后，其內(nèi)部定義的所有變量會(huì)被立即回收B.閉包是指外部函數(shù)可以訪問內(nèi)部函數(shù)的局部變量C.閉包是函數(shù)與其詞法環(huán)境的組合，使得函數(shù)能訪問其定義時(shí)作用域中的變量D.閉包僅在使用`var`聲明變量時(shí)才會(huì)形成27、在CSS盒模型中，當(dāng)`box-sizing`屬性值為`border-box`時(shí)，元素的`width`屬性表示的是？A.僅內(nèi)容區(qū)域（content）的寬度B.內(nèi)容區(qū)域+內(nèi)邊距（padding）的寬度C.內(nèi)容區(qū)域+內(nèi)邊距+邊框（border）的總寬度D.內(nèi)容區(qū)域+內(nèi)邊距+邊框+外邊距（margin）的總寬度28、HTTP狀態(tài)碼301與302的主要區(qū)別在于？A.301表示臨時(shí)重定向，302表示永久重定向B.301響應(yīng)中瀏覽器應(yīng)更新書簽鏈接，302則不應(yīng)自動(dòng)更新C.301僅適用于GET請(qǐng)求，302適用于所有請(qǐng)求方法D.301由客戶端生成，302由服務(wù)器生成29、在OSI七層參考模型中，負(fù)責(zé)建立、管理和終止會(huì)話（Session）的是哪一層？A.傳輸層B.網(wǎng)絡(luò)層C.表示層D.會(huì)話層30、以下關(guān)于JavaScript事件循環(huán)（EventLoop）的描述，正確的是？A.宏任務(wù)（MacroTask）執(zhí)行完畢后，會(huì)清空所有微任務(wù)（MicroTask）隊(duì)列再進(jìn)行下一輪循環(huán)B.`setTimeout(fn,0)`中的回調(diào)函數(shù)會(huì)作為微任務(wù)立即執(zhí)行C.Promise的`.then()`回調(diào)屬于宏任務(wù)D.事件循環(huán)只存在于瀏覽器環(huán)境，Node.js使用完全不同的機(jī)制二、多項(xiàng)選擇題下列各題有多個(gè)正確答案，請(qǐng)選出所有正確選項(xiàng)（共15題）31、關(guān)于JavaScript中的閉包，下列說法正確的是？A.閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)。B.閉包可以防止內(nèi)部變量被外部環(huán)境直接訪問，實(shí)現(xiàn)數(shù)據(jù)封裝。C.閉包會(huì)延長內(nèi)部變量的生命周期，可能導(dǎo)致內(nèi)存泄漏。D.閉包的形成與函數(shù)的執(zhí)行上下文和作用域鏈無關(guān)。32、在CSS中，下列哪些屬性可以設(shè)置元素的定位方式？A.positionB.displayC.floatD.z-index33、關(guān)于HTML5語義化標(biāo)簽，下列說法正確的有？A.`<header>`標(biāo)簽用于定義文檔或節(jié)的頁眉。B.`<article>`標(biāo)簽表示文檔、頁面或應(yīng)用程序中獨(dú)立的、自包含的內(nèi)容。C.`<nav>`標(biāo)簽用于定義導(dǎo)航鏈接的集合。D.`<section>`標(biāo)簽與`<div>`標(biāo)簽語義完全相同，可以隨意替換。34、以下哪些是JavaScript中的基本數(shù)據(jù)類型？A.StringB.ObjectC.NullD.Symbol35、關(guān)于CSS盒模型，下列描述正確的是？A.標(biāo)準(zhǔn)盒模型中，元素的width屬性僅包含內(nèi)容（content）的寬度。B.在IE盒模型中，元素的width屬性包含內(nèi)容、內(nèi)邊距（padding）和邊框（border）的總和。C.使用`box-sizing:border-box;`可以讓元素采用IE盒模型。D.使用`box-sizing:content-box;`是CSS3引入的默認(rèn)盒模型。36、關(guān)于JavaScript的事件冒泡機(jī)制，下列說法正確的有？A.事件冒泡是指事件從最具體的元素（最深的節(jié)點(diǎn)）開始，逐級(jí)向上到最不具體的節(jié)點(diǎn)（document）傳播。B.可以使用`event.stopPropagation()`方法阻止事件冒泡。C.事件冒泡是所有瀏覽器都必須支持的事件傳播機(jī)制。D.事件冒泡發(fā)生在事件捕獲階段之后。37、下列哪些方法可以用于在JavaScript中實(shí)現(xiàn)異步操作？A.setTimeout()B.PromiseC.async/awaitD.forEach()38、關(guān)于HTTP協(xié)議，下列說法正確的是？A.GET請(qǐng)求的參數(shù)通常包含在URL中。B.POST請(qǐng)求的參數(shù)通常包含在請(qǐng)求體（body）中。C.HTTP是無狀態(tài)協(xié)議。D.HTTP/2.0引入了多路復(fù)用技術(shù)，提高了傳輸效率。39、在JavaScript中，以下哪些操作會(huì)導(dǎo)致“類型轉(zhuǎn)換”？A.使用`===`進(jìn)行嚴(yán)格相等比較。B.使用`==`進(jìn)行相等比較。C.將數(shù)字與字符串相加（如：5+"3"）。D.使用`parseInt("123")`。40、關(guān)于前端性能優(yōu)化，下列措施有效的有？A.減少HTTP請(qǐng)求次數(shù)。B.使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）。C.將CSS樣式表放在HTML文檔的底部。D.對(duì)圖片進(jìn)行壓縮和使用合適的格式（如WebP）。41、下列關(guān)于JavaScript中`let`和`const`聲明的變量，哪些說法是正確的？A.`let`聲明的變量具有塊級(jí)作用域B.`const`聲明的變量必須在聲明時(shí)初始化C.`let`聲明的變量可以被重新賦值D.`const`聲明的變量一旦聲明后其值就不能再被修改42、在CSS中，以下哪些屬性可以用來實(shí)現(xiàn)元素的水平居中？A.`margin:0auto;`B.`text-align:center;`C.`flexbox`布局中的`justify-content:center;`D.`transform:translateX(-50%);`配合`left:50%;`43、關(guān)于HTTP協(xié)議中的GET和POST請(qǐng)求方法，下列哪些描述是正確的？A.GET請(qǐng)求的參數(shù)會(huì)附加在URL后面B.POST請(qǐng)求的參數(shù)包含在請(qǐng)求體（RequestBody）中C.GET請(qǐng)求通常用于獲取數(shù)據(jù)，不應(yīng)產(chǎn)生副作用D.POST請(qǐng)求的數(shù)據(jù)長度理論上沒有限制44、以下關(guān)于CSS盒模型的描述，哪些是正確的？A.標(biāo)準(zhǔn)盒模型中，元素的總寬度=width+padding+border+marginB.`box-sizing:border-box;`會(huì)使元素的width包含padding和borderC.`padding`和`border`都屬于內(nèi)容區(qū)域的一部分D.在`content-box`模式下，設(shè)置`width:200px`，若`padding:10px`，`border:5px`，則元素實(shí)際占用寬度為230px45、下列哪些是JavaScript中實(shí)現(xiàn)異步編程的方式？A.回調(diào)函數(shù)（Callback）B.PromiseC.async/awaitD.`setTimeout()`三、判斷題判斷下列說法是否正確（共10題）46、在HTML中，`<div>`標(biāo)簽是一個(gè)塊級(jí)元素，而`<span>`標(biāo)簽是一個(gè)行內(nèi)元素。A.正確B.錯(cuò)誤47、CSS中，`margin:auto`在塊級(jí)元素上設(shè)置后，只有當(dāng)該元素具有明確的`width`值時(shí)，才能實(shí)現(xiàn)水平居中。A.正確B.錯(cuò)誤48、JavaScript中，`null==undefined`的結(jié)果為`true`，但`null===undefined`的結(jié)果為`false`。A.正確B.錯(cuò)誤49、使用`let`聲明的變量不存在變量提升，且在聲明前訪問會(huì)拋出`ReferenceError`。A.正確B.錯(cuò)誤50、在CSS盒模型中，`box-sizing:border-box`表示設(shè)置的`width`包含內(nèi)容區(qū)、內(nèi)邊距（padding）和邊框（border）的總和。A.正確B.錯(cuò)誤51、JavaScript的`Atotype.map()`方法會(huì)修改原數(shù)組。A.正確B.錯(cuò)誤52、HTML語義化的主要目的是提升網(wǎng)頁的可訪問性（Accessibility），便于屏幕閱讀器等輔助技術(shù)解析內(nèi)容結(jié)構(gòu)。A.正確B.錯(cuò)誤53、防抖（debounce）和節(jié)流（throttle）都能限制函數(shù)的執(zhí)行頻率，但防抖是在事件停止觸發(fā)一段時(shí)間后才執(zhí)行一次，而節(jié)流是每隔固定時(shí)間最多執(zhí)行一次。A.正確B.錯(cuò)誤54、`display:none`與`visibility:hidden`都能隱藏元素，但前者不占據(jù)文檔流空間，后者仍保留其原有空間。A.正確B.錯(cuò)誤55、在JavaScript中，`'5'+3`的結(jié)果是`'53'`，而`'5'-3`的結(jié)果是`2`。A.正確B.錯(cuò)誤

參考答案及解析1.【參考答案】C【解析】在標(biāo)準(zhǔn)盒模型（`content-box`，默認(rèn)值）下，`width`僅指內(nèi)容區(qū)寬度，總寬度需額外加上padding、border；而`border-box`模型下，`width`的設(shè)定值直接包含content、padding和border三者之和，margin不計(jì)入盒模型尺寸計(jì)算。該特性極大簡化了布局計(jì)算，是現(xiàn)代響應(yīng)式開發(fā)的推薦做法[[20]]。2.【參考答案】C【解析】JavaScript事件循環(huán)中，同步代碼（A、D）優(yōu)先執(zhí)行；`Promise.then`屬于微任務(wù)（microtask），在當(dāng)前宏任務(wù)（script整體）執(zhí)行完后、下一輪宏任務(wù)前清空；`setTimeout`為宏任務(wù)（macrotask），需等待微任務(wù)隊(duì)列清空后才執(zhí)行。因此執(zhí)行順序?yàn)椋篈（同步）→D（同步）→C（微任務(wù)）→B（宏任務(wù)）[[11]]。3.【參考答案】B【解析】301（MovedPermanently）表示請(qǐng)求資源已被永久分配到新URI，搜索引擎會(huì)更新索引；302（Found）表示臨時(shí)重定向，客戶端應(yīng)繼續(xù)使用原URI發(fā)起后續(xù)請(qǐng)求。兩者均允許瀏覽器自動(dòng)跳轉(zhuǎn)，但301具有長期緩存語義，而302不應(yīng)被緩存[[30]]。4.【參考答案】B【解析】箭頭函數(shù)不綁定自身的`this`，其`this`值由外層作用域決定（詞法作用域），在定義時(shí)即固定，無法通過`call/apply/bind`改變。普通函數(shù)的`this`則在運(yùn)行時(shí)根據(jù)調(diào)用方式動(dòng)態(tài)確定[[40]]。5.【參考答案】D【解析】`<div>`是典型的塊級(jí)元素（block-levelelement），默認(rèn)獨(dú)占一行且可設(shè)置寬高；而`<span>`、`<img>`、`<input>`均為行內(nèi)元素（部分為替換元素），其寬高由內(nèi)容決定，且不會(huì)自動(dòng)換行。常見行內(nèi)元素還包括`<a>`、`<strong>`、`<em>`等[[1]]。6.【參考答案】B【解析】CSS中的position屬性用于定義元素的定位類型，其常見值包括static（默認(rèn)）、relative（相對(duì)定位）、absolute（絕對(duì)定位）和fixed（固定定位）[[6]]。display屬性控制元素的顯示類型（如block、inline），float用于實(shí)現(xiàn)浮動(dòng)布局，overflow用于處理內(nèi)容溢出，三者均不直接決定元素的定位方式。7.【參考答案】A【解析】parseInt()函數(shù)用于解析一個(gè)字符串并返回一個(gè)整數(shù)[[4]]。toString()用于將數(shù)字轉(zhuǎn)換為字符串，與題意相反。join()是數(shù)組方法，用于連接數(shù)組元素為字符串，slice()用于提取字符串或數(shù)組的一部分，均不用于字符串轉(zhuǎn)數(shù)字。8.【參考答案】B【解析】HTML5引入了多個(gè)語義化標(biāo)簽，如<header>、<nav>、<section>、<article>、<footer>等，用于更清晰地描述頁面結(jié)構(gòu)[[3]]。div是HTML4就存在的非語義化標(biāo)簽。語義化標(biāo)簽不僅影響樣式，更利于SEO和無障礙訪問?，F(xiàn)代瀏覽器普遍支持這些標(biāo)簽，舊版瀏覽器可通過JavaScriptpolyfill支持。9.【參考答案】B【解析】在JavaScript中，typeofnull的返回值是"object"，這是一個(gè)歷史遺留的bug[[4]]。盡管null在邏輯上代表“空值”或“無對(duì)象”，但其底層類型在語言設(shè)計(jì)時(shí)被錯(cuò)誤地歸類為對(duì)象。因此，typeofnull的結(jié)果是"object"，而非"null"。10.【參考答案】A【解析】CSS盒模型（BoxModel）由四個(gè)部分組成：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）[[3]]。width和height通常指content的尺寸，top和left是定位屬性，display、position等是布局屬性，font-size等是文本樣式屬性，均不屬于盒模型的基本構(gòu)成要素。11.【參考答案】B【解析】相對(duì)定位（`position:relative`）是相對(duì)于元素自身在正常文檔流中的原始位置進(jìn)行偏移的[[4]]。設(shè)置`top`、`right`、`bottom`、`left`屬性會(huì)使元素相對(duì)于它原本應(yīng)處的位置移動(dòng)，而不會(huì)影響其他元素的布局[[4]]。這與絕對(duì)定位不同，絕對(duì)定位是相對(duì)于最近的非static定位祖先元素[[4]]。12.【參考答案】C【解析】`a++`是后置自增，先使用`a`的當(dāng)前值（5），然后`a`變?yōu)?；`++a`是前置自增，先將`a`從6增加到7，然后使用其值（7）。因此計(jì)算為`5+7=12`。此題考察對(duì)JavaScript中自增（`++`）運(yùn)算符前置與后置差異的理解，是前端筆試常見考點(diǎn)[[3]]。13.【參考答案】C【解析】`<canvas>`元素是一個(gè)位圖畫布，其內(nèi)容通過JavaScript動(dòng)態(tài)繪制[[1]]。它本身不提供繪圖能力，且繪制的內(nèi)容是像素點(diǎn)，非矢量圖形[[1]]。其默認(rèn)尺寸為300像素寬、150像素高[[1]]。由于內(nèi)容由腳本生成，搜索引擎通常無法直接索引其內(nèi)部圖形[[1]]。14.【參考答案】D【解析】`NaN`（Not-a-Number）與任何值（包括它自己）使用`==`或`===`比較都返回`false`，因此A、B錯(cuò)誤。`typeofNaN`返回`"number"`，故C錯(cuò)誤。`Number.isNaN()`是ES6引入的可靠方法，專門用于檢測(cè)一個(gè)值是否為`NaN`，這是判斷`NaN`的標(biāo)準(zhǔn)方式[[3]]。15.【參考答案】B【解析】雖然Flexbox（選項(xiàng)C）是現(xiàn)代推薦方案，但題目要求“最常用且兼容性最好”，B選項(xiàng)使用絕對(duì)定位配合`transform`是在不支持Flexbox的舊瀏覽器（如IE9及以下）中廣泛使用的經(jīng)典居中方案，兼容性極佳[[2]]。選項(xiàng)A無法實(shí)現(xiàn)垂直居中，D僅適用于單行文本。16.【參考答案】C【解析】相對(duì)定位（`position:relative`）是相對(duì)于元素自身在正常文檔流中的原始位置進(jìn)行偏移的[[4]]。設(shè)置`top`、`right`、`bottom`、`left`屬性會(huì)使元素相對(duì)于其原來的位置移動(dòng)，但不會(huì)影響其他元素的布局，其原始空間仍被保留[[4]]。17.【參考答案】B【解析】`event.stopPropagation()`方法用于阻止事件在DOM樹中繼續(xù)向上冒泡，即阻止事件傳播到父級(jí)元素[[10]]。`preventDefault()`用于阻止元素的默認(rèn)行為，`stopImmediatePropagation()`不僅阻止冒泡，還阻止同一元素上其他事件監(jiān)聽器的執(zhí)行，`cancelBubble`是IE舊版的非標(biāo)準(zhǔn)屬性[[10]]。18.【參考答案】B【解析】`<article>`標(biāo)簽用于定義文檔、頁面或應(yīng)用程序中獨(dú)立的、自包含的內(nèi)容塊，如論壇帖子、博客文章或新聞故事，具有明確的語義[[1]]。`<section>`用于劃分文檔中的主題區(qū)域，`<div>`是無語義的容器，`<aside>`用于表示與主要內(nèi)容相關(guān)但可獨(dú)立的輔助信息。19.【參考答案】C【解析】在JavaScript中，`typeofnull`的結(jié)果是`"object"`，這是一個(gè)歷史遺留的bug，源于早期JavaScript引擎的實(shí)現(xiàn)問題[[3]]。盡管`null`代表空值，但`typeof`操作符錯(cuò)誤地將其識(shí)別為對(duì)象類型，這是語言設(shè)計(jì)中的一個(gè)已知缺陷。20.【參考答案】B【解析】`box-sizing:border-box`模式下，元素的`width`和`height`屬性值包含了`content`、`padding`和`border`的總和，這使得布局更直觀[[2]]。`content-box`是默認(rèn)模式，寬度僅指內(nèi)容區(qū)，不包含padding和border，且被所有現(xiàn)代瀏覽器支持[[2]]。margin不屬于盒模型的組成部分，而是外邊距。21.【參考答案】C【解析】本題考查`var`聲明的變量作用域及閉包概念。`var`聲明的變量`i`具有函數(shù)作用域（或全局作用域），在整個(gè)`for`循環(huán)中是同一個(gè)變量。`setTimeout`是異步操作，其回調(diào)函數(shù)會(huì)被放入任務(wù)隊(duì)列，等待同步代碼（即整個(gè)`for`循環(huán)）執(zhí)行完畢后才執(zhí)行。當(dāng)回調(diào)函數(shù)執(zhí)行時(shí)，循環(huán)早已結(jié)束，此時(shí)`i`的值已變?yōu)閌3`。由于三個(gè)回調(diào)函數(shù)都引用了同一個(gè)變量`i`，因此輸出三次`3`[[11]]。22.【參考答案】C【解析】本題考查CSS盒模型知識(shí)。`box-sizing:border-box;`設(shè)置的是IE盒模型（或稱怪異盒模型）。在此模型下，我們通過CSS設(shè)置的`width`和`height`屬性，其值包含了內(nèi)容（content）、內(nèi)邊距（padding）和邊框（border）的總和。外邊距（margin）始終不計(jì)入元素自身的寬度和高度計(jì)算中[[21]]。23.【參考答案】C【解析】本題考查HTTP協(xié)議基礎(chǔ)。狀態(tài)碼301(MovedPermanently)表示請(qǐng)求的資源已被永久移動(dòng)到新的URI，客戶端及搜索引擎應(yīng)更新書簽/索引以指向新地址。狀態(tài)碼302(Found)表示請(qǐng)求的資源臨時(shí)位于不同的URI，客戶端應(yīng)繼續(xù)使用原URI進(jìn)行后續(xù)請(qǐng)求。這是二者最核心的區(qū)別[[31]]。24.【參考答案】A【解析】本題考查前端框架原理。Vue2的響應(yīng)式系統(tǒng)是基于`Object.defineProperty`API來劫持對(duì)象屬性的`getter`和`setter`，從而實(shí)現(xiàn)依賴收集與派發(fā)更新。而Vue3則全面升級(jí)為使用ES6的`Proxy`對(duì)象，它可以攔截對(duì)整個(gè)對(duì)象的操作（如新增、刪除屬性），解決了Vue2中無法監(jiān)聽動(dòng)態(tài)添加屬性等痛點(diǎn)，性能和靈活性都得到了顯著提升[[42]]。25.【參考答案】A【解析】本題考查HTML腳本加載優(yōu)化。`defer`和`async`都只對(duì)外部腳本（帶`src`屬性）有效，且都能實(shí)現(xiàn)異步下載，不阻塞HTML解析。關(guān)鍵區(qū)別在于執(zhí)行時(shí)機(jī)：`defer`腳本會(huì)按順序在`DOMContentLoaded`事件觸發(fā)前、文檔解析完成后執(zhí)行；而`async`腳本則在下載完成后立即執(zhí)行，執(zhí)行時(shí)機(jī)不固定，可能會(huì)在文檔解析完成前或后，且不保證執(zhí)行順序。26.【參考答案】C【解析】閉包是函數(shù)與其詞法環(huán)境（lexicalenvironment）的組合，使得該函數(shù)即使在詞法作用域之外執(zhí)行，仍能訪問其定義時(shí)所在環(huán)境的變量[[17]]。選項(xiàng)A錯(cuò)誤，閉包會(huì)阻止相關(guān)變量被垃圾回收；B混淆了內(nèi)外函數(shù)關(guān)系，實(shí)際是內(nèi)部函數(shù)訪問外部變量；D錯(cuò)誤，`let`/`const`聲明的變量同樣可構(gòu)成閉包。27.【參考答案】C【解析】`box-sizing:border-box`采用IE/怪異盒模型，此時(shí)設(shè)置的`width`包含`content`、`padding`和`border`的總和，不包含`margin`[[24]]。而默認(rèn)的`content-box`下，`width`僅指內(nèi)容區(qū)寬度，總寬需額外加上padding和border[[21]]。28.【參考答案】B【解析】301（MovedPermanently）表示**永久重定向**，客戶端（如瀏覽器）應(yīng)將后續(xù)請(qǐng)求直接發(fā)往新URI，并可能更新書簽/鏈接；302（Found）表示**臨時(shí)重定向**，客戶端不應(yīng)修改原有鏈接，后續(xù)仍應(yīng)請(qǐng)求原URI[[34]]。A項(xiàng)將二者定義顛倒；C、D項(xiàng)描述錯(cuò)誤。29.【參考答案】D【解析】OSI模型中，**會(huì)話層（SessionLayer）**位于第5層，核心功能是建立、管理、同步和終止兩個(gè)通信主機(jī)之間的會(huì)話連接，支持單向或雙向通信控制[[43]]。傳輸層（第4層）負(fù)責(zé)端到端可靠傳輸；表示層（第6層）處理數(shù)據(jù)格式轉(zhuǎn)換與加密。30.【參考答案】A【解析】事件循環(huán)機(jī)制為：執(zhí)行一個(gè)宏任務(wù)→執(zhí)行**所有**當(dāng)前微任務(wù)隊(duì)列中的任務(wù)→渲染（可選）→下一個(gè)宏任務(wù)……[[1]]。`setTimeout`回調(diào)屬于宏任務(wù)；`.then()`屬于微任務(wù)；Node.js雖實(shí)現(xiàn)細(xì)節(jié)不同（如libuv），但核心“宏/微任務(wù)”概念一致。31.【參考答案】A,B,C【解析】閉包是函數(shù)與其詞法環(huán)境的組合，允許函數(shù)訪問其定義時(shí)所在作用域的變量[[20]]。這實(shí)現(xiàn)了數(shù)據(jù)封裝（B），并因變量引用未釋放而延長生命周期，可能引發(fā)內(nèi)存泄漏（C）。閉包的形成依賴于作用域鏈機(jī)制[[21]]。選項(xiàng)D錯(cuò)誤，閉包的核心就是基于作用域鏈。32.【參考答案】A,C,D【解析】`position`屬性（如static,relative,absolute,fixed,sticky）直接決定定位模式[[11]]。`float`屬性使元素脫離正常文檔流，實(shí)現(xiàn)浮動(dòng)定位。`z-index`用于控制定位元素（position不為static）的堆疊順序，需配合position使用。`display`控制元素生成的框類型（如block,inline），不直接決定定位方式。33.【參考答案】A,B,C【解析】`<header>`、`<article>`、`<nav>`均為HTML5語義化標(biāo)簽，分別用于頁眉、獨(dú)立內(nèi)容和導(dǎo)航[[17]]。`<section>`用于劃分文檔中的主題區(qū)域，具有語義含義，而`<div>`無語義，僅作容器，二者不可隨意替換[[19]]。34.【參考答案】A,C,D【解析】JavaScript的基本數(shù)據(jù)類型包括：String、Number、Boolean、Null、Undefined、Symbol和BigInt[[14]]。Object是引用類型，不是基本數(shù)據(jù)類型。35.【參考答案】A,B,C【解析】標(biāo)準(zhǔn)盒模型（content-box）下，width僅指content寬度[[19]]。IE盒模型（border-box）下，width包含content、padding和border[[11]]。`box-sizing:border-box`實(shí)現(xiàn)IE盒模型，`box-sizing:content-box`是默認(rèn)值，但非CSS3新引入，是傳統(tǒng)模型。36.【參考答案】A,B,D【解析】事件冒泡確實(shí)是從子元素向父元素傳播[[11]]。`stopPropagation()`可阻止冒泡。事件傳播通常包括捕獲階段、目標(biāo)階段和冒泡階段，冒泡在捕獲后發(fā)生。雖然現(xiàn)代瀏覽器都支持，但“必須”一詞過于絕對(duì)，不過在常規(guī)理解下，此選項(xiàng)可視為正確。選項(xiàng)C表述不夠嚴(yán)謹(jǐn)，但結(jié)合上下文，A、B、D為明確正確項(xiàng)。37.【參考答案】A,B,C【解析】`setTimeout()`用于延遲執(zhí)行，是異步任務(wù)。`Promise`是處理異步操作的對(duì)象。`async/await`是基于Promise的語法糖，用于簡化異步代碼[[16]]。`forEach()`是同步遍歷數(shù)組的方法，不用于實(shí)現(xiàn)異步。38.【參考答案】A,B,C,D【解析】GET請(qǐng)求將參數(shù)附加在URL后，POST請(qǐng)求將數(shù)據(jù)放在請(qǐng)求體中[[8]]。HTTP協(xié)議本身不保存客戶端狀態(tài)，是無狀態(tài)的。HTTP/2.0的核心特性之一是多路復(fù)用，允許多個(gè)請(qǐng)求和響應(yīng)同時(shí)在一個(gè)連接上傳輸，顯著提升效率[[18]]。39.【參考答案】B,C,D【解析】`==`會(huì)進(jìn)行隱式類型轉(zhuǎn)換再比較。數(shù)字與字符串相加時(shí)，數(shù)字會(huì)被轉(zhuǎn)換為字符串進(jìn)行拼接。`parseInt()`將字符串轉(zhuǎn)換為整數(shù)。`===`是嚴(yán)格相等，不進(jìn)行類型轉(zhuǎn)換。40.【參考答案】A,B,D【解析】減少請(qǐng)求數(shù)、使用CDN加速資源加載、壓縮圖片是常見的性能優(yōu)化手段[[18]]。將CSS放在文檔底部會(huì)阻塞頁面渲染，正確的做法是將其放在`<head>`中，以便盡早加載和解析，所以C錯(cuò)誤。41.【參考答案】A,B,C【解析】`let`和`const`都引入了塊級(jí)作用域，區(qū)別于`var`的函數(shù)作用域[[76]]。`const`聲明的變量必須在聲明時(shí)賦值，且不能重新賦值給另一個(gè)值[[77]]。`let`聲明的變量可以被重新賦值，但`const`聲明的是常量，其綁定的值不能被重新賦值，但對(duì)于對(duì)象或數(shù)組，其內(nèi)部屬性或元素仍可被修改，選項(xiàng)D表述過于絕對(duì)，因此不選。42.【參考答案】A,C,D【解析】`margin:0auto;`適用于具有固定寬度的塊級(jí)元素[[48]]。`flexbox`布局中的`justify-content:center;`是實(shí)現(xiàn)子元素水平居中的常用且推薦方法[[24]]。`transform:translateX(-50%);`配合`left:50%;`是基于定位的居中方案。`text-align:center;`僅對(duì)行內(nèi)元素或行內(nèi)塊元素有效，對(duì)塊級(jí)元素本身無效，因此B不選。43.【參考答案】A,B,C,D【解析】GET請(qǐng)求將參數(shù)置于URL查詢字符串中，適合獲取數(shù)據(jù)，且應(yīng)是冪等和安全的[[39]]。POST請(qǐng)求將數(shù)據(jù)放在請(qǐng)求體中，適合提交數(shù)據(jù)，其數(shù)據(jù)長度受服務(wù)器配置影響，但理論上遠(yuǎn)大于GET[[42]]。因此，所有選項(xiàng)均符合HTTP規(guī)范。44.【參考答案】A,B,D【解析】標(biāo)準(zhǔn)盒模型（`content-box`）中，`width`僅指內(nèi)容區(qū)寬度，總寬度需加上內(nèi)邊距、邊框和外邊距[[47]]。`border-box`模式下，`width`包含內(nèi)容、內(nèi)邊距和邊框[[48]]。`padding`和`border`不屬于內(nèi)容區(qū)域，而是內(nèi)容區(qū)域之外的區(qū)域，因此C錯(cuò)誤。在D選項(xiàng)的`content-box`模式下，實(shí)際寬度為200+10*2+5*2=230px，正確。45.【參考答案】A,B,C,D【解析】回調(diào)函數(shù)是最早的異步處理方式[[60]]。Promise提供了更清晰的鏈?zhǔn)秸{(diào)用以處理異步操作[[63]]。`async/await`是基于Promise的語法糖，讓異步代碼更像同步代碼[[57]]。`setTimeout()`是瀏覽器提供的異步定時(shí)器API，其回調(diào)函數(shù)在指定延遲后執(zhí)行，是異步編程的基礎(chǔ)[[64]]。46.【參考答案】A.正確【解析】塊級(jí)元素（如`<div>`、`<p>`、`<h1>`等）默認(rèn)獨(dú)占一行，可設(shè)置寬高；行內(nèi)元素（如`<span>`、`<a>`、`<strong>`等）不換行，寬高由內(nèi)容決定，且不能直接設(shè)置寬高（`display`屬性可改變行為）[[1]]。47.【參考答案】A.正確【解析】`margin:0auto`實(shí)現(xiàn)水平居中的前提是：元素為塊級(jí)（`display:block`）、有明確的`width`（非`auto`）、且處于普通流中。若`width:auto`，左右`margin`會(huì)被計(jì)算為0，無法居中[[14]]。48.【參考答案】A.正確【解析】`==`是寬松相等，會(huì)進(jìn)行類型轉(zhuǎn)換，`null`和`undefined`在比較時(shí)被視為相等；`===`是嚴(yán)格相等，要求類型與值均相同，二者類型不同（`null`是對(duì)象類型，`undefined`是未定義類型），故結(jié)果為`false`[[13]]。49.【參考答案】A.正確【解析】`let`和`const`存在“暫時(shí)性死區(qū)”（TDZ），從塊級(jí)作用域開始到變量聲明語句執(zhí)行前，該變量不可訪問，訪問會(huì)報(bào)`ReferenceError`；而`var`存在變量提升（值為`undefined`）[[5]]。50.【參考答案】A.正確【解析】標(biāo)準(zhǔn)盒模型（`content-box`）中，`width`僅指內(nèi)容區(qū)寬度；而`border-box`下，`width=content+padding+border`，更符合直覺，是現(xiàn)代布局常用設(shè)置[[14]]。51.【參考答案】B.錯(cuò)誤【解析】`map()`返回一個(gè)新數(shù)組，其元素是原數(shù)組每個(gè)元素經(jīng)回調(diào)函數(shù)處理后的結(jié)果，原數(shù)組保持不變。類似地，`filter()`、`slice()`等均為不可變方法；而`push()`、`splice()`等會(huì)改變?cè)瓟?shù)組[[5]]。52.【參考答案】A.正確【解析】語義化標(biāo)簽（如`<header>`、`<nav>`、`<article>`、`<footer>`）能清晰表達(dá)內(nèi)容結(jié)構(gòu)和含義，利于SEO、可維護(hù)性，更重要的是為視障用戶等提供準(zhǔn)確的上下文信息，是無障礙（a11y）的基礎(chǔ)[[1]]。53.【參考答案】A.正確【解析】防抖適用于搜索框輸入、窗口`resize`結(jié)束后的處理；節(jié)流適用于滾動(dòng)事件、按鈕高頻點(diǎn)擊限制等場(chǎng)景。二者?？紝?shí)現(xiàn)，核心在于`setTimeout`與`clearTimeout`的配合使用[[3]]。54.【參考答案】A.正確【解析】`display:none`使元素完全從渲染樹中移除，不占位；`visibility:hidden`僅視覺隱藏，元素仍參與布局（占位），子元素可通過`visibility:visible`重新顯示[[14]]。55.【參考答案】A.正確【解析】加法運(yùn)算符`+`在任一操作數(shù)為字符串時(shí)進(jìn)行字符串拼接；減法`-`、乘法`*`、除法`/`等運(yùn)算符會(huì)嘗試將操作數(shù)轉(zhuǎn)為數(shù)字再計(jì)算。這是JavaScript隱式類型轉(zhuǎn)換的典型表現(xiàn)[[16]]。

2025四川九強(qiáng)通信科技有限公司招聘前端開發(fā)工程師等崗位21人筆試歷年常考點(diǎn)試題專練附帶答案詳解（第2套）一、單項(xiàng)選擇題下列各題只有一個(gè)正確答案，請(qǐng)選出最恰當(dāng)?shù)倪x項(xiàng)（共30題）1、在HTML5中，用于定義頁面或區(qū)域的頁眉的語義化標(biāo)簽是？A.`<header>`B.`<head>`C.`<top>`D.`<section>`2、下列CSS選擇器中，優(yōu)先級(jí)最高的是？A.`.container.item`B.`#main-content`C.`div[style]`D.`bodydiv.item`3、JavaScript中，以下代碼的輸出結(jié)果是什么？`console.log(typeof[]);`A."array"B."object"C."undefined"D."string"4、HTTP狀態(tài)碼304表示什么含義？A.服務(wù)器內(nèi)部錯(cuò)誤B.請(qǐng)求的資源未修改C.請(qǐng)求的資源不存在D.請(qǐng)求需要用戶身份驗(yàn)證5、在CSS中，要實(shí)現(xiàn)一個(gè)元素相對(duì)于其正常位置進(jìn)行偏移，但不脫離文檔流，應(yīng)使用哪個(gè)定位屬性值？A.`position:absolute;`B.`position:fixed;`C.`position:relative;`D.`position:static;`6、在JavaScript中，以下關(guān)于事件循環(huán)（EventLoop）的描述，哪一項(xiàng)是正確的？A.宏任務(wù)執(zhí)行完畢后，會(huì)先執(zhí)行所有待處理的微任務(wù)，再從宏任務(wù)隊(duì)列中取出下一個(gè)任務(wù)B.微任務(wù)和宏任務(wù)按照入隊(duì)順序交替執(zhí)行C.`setTimeout`的回調(diào)函數(shù)屬于微任務(wù)D.`Promise.then`的回調(diào)函數(shù)屬于宏任務(wù)7、關(guān)于CSS盒模型，標(biāo)準(zhǔn)盒模型與IE怪異盒模型（QuirksMode）的核心區(qū)別在于：A.是否支持`border-radius`屬性B.`width`和`height`屬性是否包含`padding`和`border`的尺寸C.是否支持`box-sizing`屬性D.背景顏色是否覆蓋`padding`區(qū)域8、下列代碼執(zhí)行后，控制臺(tái)輸出的順序是？

```javascript

console.log('1');

setTimeout(()=>console.log('2'),0);

Promise.resolve().then(()=>console.log('3'));

console.log('4');

```A.1,2,3,4B.1,4,3,2C.1,3,4,2D.1,4,2,39、在HTML5中，以下哪個(gè)標(biāo)簽語義化地表示頁面的主導(dǎo)航區(qū)域？A.`<divid="nav">`B.`<nav>`C.`<section>`D.`<header>`10、關(guān)于JavaScript閉包，以下說法錯(cuò)誤的是：A.閉包使得函數(shù)可以“記住”并訪問其詞法作用域，即使該函數(shù)在其詞法作用域外執(zhí)行B.閉包可能導(dǎo)致內(nèi)存泄漏，因?yàn)楸灰玫淖兞繜o法被垃圾回收C.立即執(zhí)行函數(shù)表達(dá)式（IIFE）是創(chuàng)建閉包的常用方式之一D.箭頭函數(shù)無法形成閉包11、下列關(guān)于JavaScript閉包的描述，哪一項(xiàng)是正確的？A.閉包是指一個(gè)函數(shù)能夠訪問并操作其詞法作用域之外的變量B.閉包會(huì)阻止內(nèi)部函數(shù)訪問外部函數(shù)的局部變量C.閉包的主要作用是提高函數(shù)的執(zhí)行速度D.在循環(huán)中創(chuàng)建閉包時(shí)，閉包內(nèi)部變量的值在循環(huán)結(jié)束后立即確定12、在CSSFlexbox布局中，若要使容器內(nèi)的項(xiàng)目沿主軸方向均勻分布，應(yīng)使用哪個(gè)屬性值？A.justify-content:flex-startB.justify-content:centerC.justify-content:space-betweenD.justify-content:space-around13、以下哪個(gè)HTML5標(biāo)簽最適合作為頁面的主要內(nèi)容區(qū)域？A.`<section>`B.`<article>`C.`<main>`D.`<div>`14、當(dāng)客戶端向服務(wù)器請(qǐng)求一個(gè)不存在的資源時(shí)，服務(wù)器通常返回哪個(gè)HTTP狀態(tài)碼？A.200OKB.401UnauthorizedC.404NotFoundD.500InternalServerError15、在JavaScript中，考慮以下代碼：`vara=1;functionfn(){console.log(a);vara=2;}fn();`，控制臺(tái)輸出的結(jié)果是什么？A.1B.2C.undefinedD.報(bào)錯(cuò)16、在HTML5中，用于定義頁面或區(qū)域的頁眉的語義化標(biāo)簽是？A.`<header>`B.`<head>`C.`<top>`D.`<section>`17、在CSS盒模型中，標(biāo)準(zhǔn)盒模型（W3C盒模型）的width屬性指的是哪部分的寬度？A.內(nèi)容（content）的寬度B.內(nèi)容+內(nèi)邊距（padding）的寬度C.內(nèi)容+內(nèi)邊距+邊框（border）的寬度D.內(nèi)容+內(nèi)邊距+邊框+外邊距（margin）的寬度18、JavaScript中，以下哪個(gè)方法可以將字符串"123"安全地轉(zhuǎn)換為數(shù)字類型？A.`parseInt("123")`B.`+"123"`C.`Number("123")`D.以上都可以19、以下關(guān)于HTTP狀態(tài)碼的說法，正確的是？A.200表示服務(wù)器內(nèi)部錯(cuò)誤B.304表示請(qǐng)求的資源未被修改，可使用緩存C.404表示服務(wù)器拒絕請(qǐng)求D.500表示找不到請(qǐng)求的資源20、在JavaScript中，以下代碼的輸出結(jié)果是什么？

`console.log(typeofnull);`A."null"B."object"C."undefined"D."number"21、在HTML5中，以下哪個(gè)標(biāo)簽用于定義頁面或區(qū)域的側(cè)邊欄內(nèi)容？A.\<header>B.\<nav>C.\<aside>D.\<section>22、以下關(guān)于CSS盒模型的說法，哪一項(xiàng)是正確的？A.標(biāo)準(zhǔn)盒模型中，元素的總寬度=width+padding+border+marginB.在IE盒模型中，設(shè)置的width已包含padding和borderC.使用box-sizing:content-box時(shí)，width包含padding和borderD.margin屬于盒模型的內(nèi)部區(qū)域23、在JavaScript中，以下代碼的輸出結(jié)果是什么？

console.log(typeofnull);A."null"B."object"C."undefined"D.報(bào)錯(cuò)24、以下哪個(gè)HTTP狀態(tài)碼表示“請(qǐng)求成功，且響應(yīng)體中包含所請(qǐng)求資源的數(shù)據(jù)”？A.200B.201C.204D.30425、在React中，以下哪種方式可以正確地更新組件的狀態(tài)？A.this.state.count=this.state.count+1;B.this.setState({count:this.state.count+1});C.state.count++;D.直接修改props中的值26、在CSS中，使用`position:relative;`定位的元素，其`top`和`left`屬性的偏移量是相對(duì)于哪個(gè)元素計(jì)算的？A.文檔的左上角B.該元素自身原始位置C.最近的已定位（非static）祖先元素D.父元素的padding區(qū)域27、JavaScript中，以下哪個(gè)方法用于阻止事件冒泡？A.`event.preventDefault()`B.`event.stopPropagation()`C.`event.stopImmediatePropagation()`D.`event.cancelBubble=true`28、HTML5中，以下哪個(gè)標(biāo)簽用于定義文檔或章節(jié)的獨(dú)立內(nèi)容？A.`<section>`B.`<article>`C.`<div>`D.`<aside>`29、在JavaScript中，`typeofnull`的返回值是什么？A."null"B."object"C."undefined"D."boolean"30、關(guān)于CSS盒模型，以下描述正確的是？A.盒模型的寬度僅包含內(nèi)容（content）的寬度B.盒模型的總寬度=content+padding+border+marginC.盒模型的總高度=content+padding+border-marginD.margin屬于元素自身盒模型的一部分二、多項(xiàng)選擇題下列各題有多個(gè)正確答案，請(qǐng)選出所有正確選項(xiàng)（共15題）31、在CSS中，以下哪些選擇器的優(yōu)先級(jí)高于類選擇器（.class）？A.元素選擇器（div）B.ID選擇器（#id）C.內(nèi)聯(lián)樣式（style屬性）D.偽類選擇器（:hover）32、關(guān)于HTTP狀態(tài)碼，以下說法正確的有？A.304表示請(qǐng)求的資源未被修改，可使用緩存B.404表示服務(wù)器內(nèi)部錯(cuò)誤C.200表示請(qǐng)求成功D.500表示客戶端請(qǐng)求錯(cuò)誤33、以下哪些是JavaScript中的基本數(shù)據(jù)類型（原始類型）？A.StringB.ObjectC.BooleanD.Symbol34、關(guān)于Promise對(duì)象，以下描述正確的有？A.Promise的狀態(tài)一旦確定，就不可更改B.Promise.all()在所有Promise都fulfilled時(shí)才返回結(jié)果C.Promise.race()返回第一個(gè)settled的Promise的結(jié)果D.then()方法只能接收一個(gè)回調(diào)函數(shù)35、在瀏覽器中，以下哪些存儲(chǔ)方式的數(shù)據(jù)在關(guān)閉頁面后會(huì)被清除？A.sessionStorageB.localStorageC.cookieD.IndexedDB36、以下關(guān)于HTML語義化的描述，正確的有？A.使用<article>表示獨(dú)立的文章內(nèi)容B.使用<div>代替所有語義化標(biāo)簽以保證兼容性C.<nav>用于定義頁面的導(dǎo)航鏈接部分D.<footer>通常包含頁面底部信息37、以下哪些特性屬于ES6（ECMAScript2015）引入的新特性？A.let和const聲明B.箭頭函數(shù)C.Promise對(duì)象D.模板字符串38、關(guān)于跨域問題，以下說法正確的有？A.同源策略要求協(xié)議、域名、端口完全相同B.JSONP可以支持POST請(qǐng)求C.CORS需要服務(wù)端設(shè)置響應(yīng)頭Access-Control-Allow-OriginD.使用代理服務(wù)器可以繞過瀏覽器同源限制39、以下哪些是Vue.js中的響應(yīng)式原理相關(guān)機(jī)制？A.Object.defineProperty()B.虛擬DOMC.依賴收集D.發(fā)布-訂閱模式40、關(guān)于JavaScript中的閉包（Closure），以下說法正確的是？A.閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)B.閉包會(huì)導(dǎo)致內(nèi)存泄漏，因此應(yīng)該絕對(duì)避免使用C.在循環(huán)中創(chuàng)建的閉包，常常會(huì)因?yàn)樽饔糜騿栴}而引用到循環(huán)的最終值D.閉包是實(shí)現(xiàn)模塊化編程和高階函數(shù)的重要機(jī)制之一41、在HTTP協(xié)議中，以下狀態(tài)碼與其描述相符的是？A.304NotModified：表示客戶端緩存的資源未過期，服務(wù)端告知客戶端可繼續(xù)使用本地緩存B.401Unauthorized：表示請(qǐng)求缺少有效的身份認(rèn)證憑證C.403Forbidden：表示服務(wù)器理解請(qǐng)求，但拒絕授權(quán)訪問D.500InternalServerError：表示請(qǐng)求語法錯(cuò)誤，服務(wù)器無法理解42、關(guān)于CSS盒模型，以下說法正確的是？A.標(biāo)準(zhǔn)盒模型（W3C）中，元素的width僅指content（內(nèi)容）區(qū)域的寬度B.IE盒模型（怪異盒模型）中，元素的width包含了content、padding和borderC.可以通過設(shè)置box-sizing:border-box;將元素切換為IE盒模型的計(jì)算方式D.默認(rèn)情況下，所有瀏覽器都使用標(biāo)準(zhǔn)盒模型43、在React的useEffectHook中，關(guān)于其清理函數(shù)（CleanupFunction）的描述，正確的是？A.清理函數(shù)在組件卸載時(shí)會(huì)被調(diào)用B.清理函數(shù)在useEffect的依賴項(xiàng)發(fā)生變化、即將執(zhí)行下一次effect之前也會(huì)被調(diào)用C.清理函數(shù)主要用于清除副作用，如取消網(wǎng)絡(luò)請(qǐng)求、清除定時(shí)器、移除事件監(jiān)聽器等D.只有當(dāng)useEffect不傳入依賴數(shù)組時(shí)，才會(huì)執(zhí)行清理函數(shù)44、以下JavaScript代碼片段中，哪些會(huì)輸出數(shù)字2？A.`console.log(1+"1");`B.`console.log(parseInt("2px"));`C.`console.log(Number("2"));`D.`console.log(parseFloat("2.5abc"));`45、以下哪些JavaScript數(shù)組方法會(huì)直接修改原數(shù)組？A.push()B.concat()C.splice()D.map()三、判斷題判斷下列說法是否正確（共10題）46、HTML5中，<audio>和<video>標(biāo)簽支持無需第三方插件即可播放多媒體內(nèi)容。A.正確B.錯(cuò)誤47、在CSS中，float屬性會(huì)使元素脫離文檔的普通流。A.正確B.錯(cuò)誤48、JavaScript中，null和undefined在使用==比較時(shí)結(jié)果為true。A.正確B.錯(cuò)誤49、CSS的z-index屬性可以應(yīng)用于所有HTML元素。A.正確B.錯(cuò)誤50、在JavaScript中，使用var聲明的變量存在變量提升（hoisting）現(xiàn)象。A.正確B.錯(cuò)誤51、HTML的<meta>標(biāo)簽可以用于定義頁面的字符編碼。A.正確B.錯(cuò)誤52、JavaScript中，數(shù)組的length屬性是只讀的。A.正確B.錯(cuò)誤53、CSS中，display:none會(huì)觸發(fā)瀏覽器的重排（reflow）和重繪（repaint）。A.正確B.錯(cuò)誤54、在JavaScript中，對(duì)象的屬性名只能是字符串類型。A.正確B.錯(cuò)誤55、HTML表單中，<inputtype="email">會(huì)在提交時(shí)自動(dòng)進(jìn)行郵箱格式驗(yàn)證。A.正確B.錯(cuò)誤

參考答案及解析1.【參考答案】A【解析】`<header>`是HTML5新增的語義化標(biāo)簽，用于表示文檔或一個(gè)section的頁眉，通常包含logo、導(dǎo)航鏈接、標(biāo)題等內(nèi)容。`<head>`用于定義文檔的元數(shù)據(jù)（如title、meta等），不會(huì)在頁面中顯示。`<top>`不是合法HTML標(biāo)簽，`<section>`表示文檔中的一個(gè)通用獨(dú)立區(qū)域，不具備頁眉語義[[7]]。2.【參考答案】B【解析】CSS選擇器優(yōu)先級(jí)計(jì)算規(guī)則為：內(nèi)聯(lián)樣式（1000）>ID選擇器（100）>類選擇器、屬性選擇器、偽類（10）>元素選擇器、偽元素（1）。選項(xiàng)B為ID選擇器，優(yōu)先級(jí)為100；A和D為類+元素組合，優(yōu)先級(jí)為11；C為屬性選擇器，優(yōu)先級(jí)為10。因此B優(yōu)先級(jí)最高[[2]]。3.【參考答案】B【解析】在JavaScript中，數(shù)組（Array）本質(zhì)上是一種特殊的對(duì)象。使用`typeof`操作符檢測(cè)數(shù)組時(shí)，返回結(jié)果為"object"。這是JavaScript語言的一個(gè)歷史遺留特性。若要準(zhǔn)確判斷是否為數(shù)組，應(yīng)使用`Array.isArray()`方法[[9]]。4.【參考答案】B【解析】HTTP304狀態(tài)碼表示“NotModified”（未修改）。當(dāng)客戶端發(fā)送帶有條件請(qǐng)求頭（如If-Modified-Since或If-None-Match）的請(qǐng)求時(shí)，若服務(wù)器判斷資源自上次請(qǐng)求后未被修改，則返回304，告知客戶端可繼續(xù)使用本地緩存，從而節(jié)省帶寬并提升性能[[2]]。5.【參考答案】C【解析】`position:relative;`使元素相對(duì)于其原本在文檔流中的位置進(jìn)行偏移（通過top、left等屬性），但其原始空間仍被保留，不會(huì)影響其他元素的布局，即不脫離文檔流。而absolute和fixed會(huì)使元素脫離文檔流，static是默認(rèn)值，無法通過偏移屬性移動(dòng)[[7]]。6.【參考答案】A【解析】JavaScript的事件循環(huán)機(jī)制中，每次執(zhí)行完一個(gè)宏任務(wù)（如`script`整體代碼、`setTimeout`回調(diào)）后，引擎會(huì)清空當(dāng)前微任務(wù)隊(duì)列（如`Promise.then`、`queueMicrotask`），執(zhí)行完所有微任務(wù)后，才進(jìn)行頁面渲染并取出下一個(gè)宏任務(wù)執(zhí)行。`setTimeout`屬于宏任務(wù)，`Promise.then`屬于微任務(wù)，故A正確[[12]][[14]]。7.【參考答案】B【解析】標(biāo)準(zhǔn)盒模型中，`width/height`僅指內(nèi)容區(qū)（content）的尺寸，總寬度=`width+padding+border+margin`；而IE怪異盒模型中，`width/height`包含了`padding`和`border`，總寬度=`width+margin`。`box-sizing:border-box`正是模擬怪異盒模型的行為[[5]][[13]]。8.【參考答案】B【解析】執(zhí)行順序?yàn)椋和酱a（1、4）→微任務(wù)（`Promise.then`輸出3）→宏任務(wù)（`setTimeout`輸出2）。因此輸出為1,4,3,2。事件循環(huán)確保微任務(wù)在當(dāng)前宏任務(wù)結(jié)束后、下一個(gè)宏任務(wù)前全部執(zhí)行完畢[[15]][[16]]。9.【參考答案】B【解析】`<nav>`是HTML5新增的語義化標(biāo)簽，專用于定義頁面中一組導(dǎo)航鏈接（如主導(dǎo)航、側(cè)邊欄導(dǎo)航等），有助于SEO和輔助技術(shù)識(shí)別。而`<div>`無語義，`<section>`表示文檔中的獨(dú)立部分，`<header>`表示頁眉或區(qū)塊頭部[[1]][[5]]。10.【參考答案】D【解析】箭頭函數(shù)同樣可以形成閉包。閉包的本質(zhì)是函數(shù)訪問其詞法作用域外的變量，與函數(shù)類型無關(guān)。箭頭函數(shù)雖無`this`、`arguments`，但依然能捕獲外部變量，因此可以構(gòu)成閉包。D項(xiàng)錯(cuò)誤[[12]][[19]]。11.【參考答案】A【解析】閉包是指一個(gè)函數(shù)能夠訪問其詞法作用域（定義時(shí)所在的作用域），即使該函數(shù)在其詞法作用域之外執(zhí)行[[14]]。這意味著內(nèi)部函數(shù)可以訪問并操作外部函數(shù)的局部變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢[[15]]。閉包常用于實(shí)現(xiàn)私有變量和模塊化，而非提升執(zhí)行速度。在循環(huán)中創(chuàng)建閉包，若引用循環(huán)變量，所有閉包將共享同一個(gè)變量，導(dǎo)致值在循環(huán)結(jié)束后才被確定，這是常見陷阱[[17]]。12.【參考答案】C【解析】在Flexbox布局中，`justify-content`屬性控制主軸（mainaxis）上的項(xiàng)目對(duì)齊方式。`space-between`會(huì)使項(xiàng)目均勻分布在主軸上，第一個(gè)項(xiàng)目位于起點(diǎn)，最后一個(gè)項(xiàng)目位于終點(diǎn)，項(xiàng)目間的間距相等[[23]]。`flex-start`將項(xiàng)目對(duì)齊到起點(diǎn)，`center`將項(xiàng)目居中，`space-around`則在項(xiàng)目周圍產(chǎn)生相等的間距，導(dǎo)致項(xiàng)目間的間距是項(xiàng)目與容器邊緣間距的兩倍[[21]]。13.【參考答案】C【解析】HTML5引入了語義化標(biāo)簽以增強(qiáng)文檔結(jié)構(gòu)的可讀性和可訪問性。`<main>`標(biāo)簽專門用于定義文檔或應(yīng)用程序的主內(nèi)容區(qū)域，且一個(gè)頁面中通常只應(yīng)包含一個(gè)`<main>`元素[[30]]。`<section>`用于劃分文檔中的獨(dú)立部分，`<article>`用于獨(dú)立的、自包含的內(nèi)容（如博客文章），而`<div>`是無語義的通用容器[[36]]。14.【參考答案】C【解析】HTTP狀態(tài)碼404NotFound表示服務(wù)器無法找到客戶端請(qǐng)求的資源[[41]]。這通常發(fā)生在請(qǐng)求的URL路徑錯(cuò)誤或資源已被移除的情況下。200OK表示請(qǐng)求成功，401Unauthorized表示請(qǐng)求需要身份驗(yàn)證，500InternalServerError表示服務(wù)器在處理請(qǐng)求時(shí)發(fā)生了內(nèi)部錯(cuò)誤[[38]]。15.【參考答案】C【解析】此題考查變量提升（Hoisting）和作用域。在函數(shù)`fn`內(nèi)部，`vara`聲明會(huì)被提升到函數(shù)作用域頂部，但賦值`a=2`不會(huì)。因此，執(zhí)行`console.log(a)`時(shí)，變量`a`已聲明但尚未賦值，其值為`undefined`。此時(shí)，函數(shù)內(nèi)部的`a`遮蔽了全局變量`a`，所以不會(huì)輸出全局的1[[49]]。16.【參考答案】A【解析】`<header>`是HTML5引入的語義化標(biāo)簽，用于表示頁面或一個(gè)區(qū)塊的頭部，通常包含logo、導(dǎo)航鏈接或介紹性內(nèi)容。`<head>`標(biāo)簽用于包含文檔的元數(shù)據(jù)，并不出現(xiàn)在頁面上。`<top>`不是標(biāo)準(zhǔn)HTML標(biāo)簽，`<section>`表示文檔中的一個(gè)通用獨(dú)立區(qū)塊，并非特指頁眉[[4]]。17.【參考答案】A【解析】在標(biāo)準(zhǔn)盒模型中，元素的width和height僅指內(nèi)容區(qū)域（content）的尺寸。內(nèi)邊距（padding）、邊框（border）和外邊距（margin）均在此基礎(chǔ)之上累加。而IE的怪異盒模型（box-sizing:border-box）中，width則包含content、padding和border三部分[[4]]。18.【參考答案】D【解析】`parseInt()`可解析整數(shù)；一元加號(hào)`+`是隱式類型轉(zhuǎn)換的常用技巧；`Number()`構(gòu)造函數(shù)可將字符串轉(zhuǎn)換為對(duì)應(yīng)的數(shù)字類型。三者在處理純數(shù)字字符串"123"時(shí)均能正確返回?cái)?shù)值123，因此都是安全有效的方式[[10]]。19.【參考答案】B【解析】HTTP狀態(tài)碼200表示請(qǐng)求成功；304表示客戶端發(fā)送了帶條件的請(qǐng)求（如If-Modified-Since），而資源未更改，因此可使用本地緩存；404表示資源未找到；500表示服務(wù)器內(nèi)部錯(cuò)誤。因此B選項(xiàng)正確[[1]]。20.【參考答案】B【解析】這是一個(gè)JavaScript語言的歷史遺留問題。盡管`null`本身表示“空值”或“無對(duì)象”，但`typeofnull`返回的是"object"。這是由于早期JavaScript實(shí)現(xiàn)中的一個(gè)bug，后來為保持兼容性而保留至今。因此正確答案是B[[10]]。21.【參考答案】C【解析】\<aside>標(biāo)簽在HTML5中用于表示與頁面主要內(nèi)容間接相關(guān)的內(nèi)容，通常用于側(cè)邊欄、廣告、友情鏈接等。\<header>表示頁眉，\<nav>用于導(dǎo)航鏈接，\<section>表示文檔中的一個(gè)獨(dú)立章節(jié)。因此正確答案是C。22.【參考答案】B【解析】IE盒模型（即box-sizing:border-box）中，設(shè)置的width包含padding和border，而標(biāo)準(zhǔn)盒模型（content-box）中width僅指內(nèi)容區(qū)域?qū)挾取argin始終在盒模型外部，不屬于內(nèi)部區(qū)域。因此B正確。23.【參考答案】B【解析】這是JavaScript的一個(gè)歷史遺留問題。typeofnull返回"object"，盡管null本身不是對(duì)象，這是語言最初實(shí)現(xiàn)時(shí)的Bug，但為保持兼容性一直保留至今。因此正確答案是B。24.【參考答案】A【解析】200OK表示請(qǐng)求成功，響應(yīng)體包含請(qǐng)求的數(shù)據(jù)。201表示資源已創(chuàng)建，常用于POST；204表示請(qǐng)求成功但無返回內(nèi)容；304表示資源未修改，用于緩存驗(yàn)證。因此A正確。25.【參考答案】B【解析】React中狀態(tài)應(yīng)通過setState方法更新，以觸發(fā)組件重新渲染。直接修改this.state不會(huì)觸發(fā)更新，且違反React的數(shù)據(jù)流原則。props是只讀的，不能直接修改。因此正確答案是B。26.【參考答案】B【解析】相對(duì)定位（relative）的元素會(huì)相對(duì)于其在正常文檔流中的原始位置進(jìn)行偏移[[4]]。設(shè)置`top`、`right`、`bottom`、`left`屬性會(huì)使其從原來的位置移動(dòng)指定的距離，但不會(huì)影響其他元素的布局，其原始空間仍然保留[[4]]。這與絕對(duì)定位不同，絕對(duì)定位是相對(duì)于最近的非static定位祖先元素[[4]]。27.【參考答案】B【解析】`event.stopPropagation()`方法用于阻止事件在DOM樹中繼續(xù)向上冒泡[[10]]。`event.preventDefault()`用于阻止元素的默認(rèn)行為（如鏈接跳轉(zhuǎn)），而`event.stopImmediatePropagation()`除了阻止冒泡，還會(huì)阻止同一元素上其他事件監(jiān)聽器的執(zhí)行[[10]]。`event.cancelBubble=true`是舊版IE的兼容寫法。28.【參考答案】B【解析】`<article>`標(biāo)簽用于定義文檔、頁面或應(yīng)用程序中獨(dú)立的、自包含的內(nèi)容，如論壇帖子、博客文章、新聞故事等[[1]]。它意味著內(nèi)容可以獨(dú)立于頁面的其他部分進(jìn)行分發(fā)或重用。`<section>`用于劃分內(nèi)容的邏輯章節(jié)，`<div>`是通用容器，`<aside>`用于放置與主要內(nèi)容相關(guān)但非核心的側(cè)邊內(nèi)容。29.【參考答案】B【解析】在JavaScript中，`typeofnull`返回`"object"`，這是一個(gè)歷史遺留的bug[[3]]。盡管`null`代表空值，理論上應(yīng)為獨(dú)