2026年Web前端開發(fā)技術(shù)：HTML、CSS與JavaScript面試題庫一、選擇題（共10題，每題2分）1.在HTML5中，用于定義文章章節(jié)的標(biāo)簽是？A.`<section>`B.`<article>`C.`<div>`D.`<span>`2.下列哪個(gè)CSS選擇器具有最高的優(yōu)先級(jí)？A.`id`選擇器B.類選擇器C.標(biāo)簽選擇器D.屬性選擇器3.JavaScript中，如何判斷一個(gè)變量是否為字符串類型？A.`typeofvar==="string"`B.`varinstanceofString`C.`Ototype.toString.call(var)==="[objectString]"`D.以上都正確4.在CSS中，`flex-grow`屬性的作用是？A.控制元素高度B.控制元素寬度C.控制元素在flex容器中的-grow比例D.控制元素順序5.以下哪個(gè)HTTP狀態(tài)碼表示“未找到資源”？A.404B.500C.301D.3046.HTML5中，用于存儲(chǔ)本地?cái)?shù)據(jù)的API是？A.`localStorage`B.`sessionStorage`C.`cookies`D.以上都正確7.CSS變量（CustomProperties）的命名規(guī)則是？A.必須以`--`開頭B.必須以`var(--)`開頭C.不能包含中文字符D.以上都正確8.JavaScript中，`async`和`await`關(guān)鍵字主要用于？A.優(yōu)化DOM操作性能B.異步編程C.防止XSS攻擊D.簡化回調(diào)函數(shù)9.以下哪個(gè)CSS布局方式最適合移動(dòng)端響應(yīng)式設(shè)計(jì)？A.FlexboxB.GridC.FloatD.Table10.在HTML中，`<iframe>`標(biāo)簽的作用是？A.嵌入外部網(wǎng)頁B.創(chuàng)建新窗口C.定義內(nèi)聯(lián)框架D.以上都正確二、填空題（共5題，每題2分）1.HTML中，用于定義文檔標(biāo)題的標(biāo)簽是________。2.CSS中，`visibility:hidden;`與`display:none;`的區(qū)別在于________。3.JavaScript中，用于阻止事件冒泡的方法是________。4.在CSSGrid布局中，`grid-template-columns`屬性用于________。5.HTTP協(xié)議中，狀態(tài)碼200表示________。三、簡答題（共5題，每題4分）1.簡述HTML5的語義化標(biāo)簽及其作用。2.解釋CSS中的盒模型（BoxModel）及其組成部分。3.描述JavaScript中的閉包（Closure）概念及其應(yīng)用場景。4.說明Flexbox布局的三個(gè)核心概念（容器屬性、項(xiàng)目屬性、對齊方式）。5.比較HTTP和HTTPS協(xié)議的異同點(diǎn)。四、編程題（共5題，每題6分）1.HTML+CSS實(shí)現(xiàn)：編寫HTML和CSS代碼，實(shí)現(xiàn)一個(gè)簡單的導(dǎo)航欄，要求包含三個(gè)導(dǎo)航項(xiàng)（首頁、關(guān)于、聯(lián)系方式），并使用Flexbox布局使其在移動(dòng)端自適應(yīng)。2.JavaScript實(shí)現(xiàn)：編寫JavaScript代碼，實(shí)現(xiàn)一個(gè)函數(shù)`countWords(str)`，統(tǒng)計(jì)字符串中單詞的數(shù)量（以空格分隔）。3.CSS動(dòng)畫：使用CSS動(dòng)畫實(shí)現(xiàn)一個(gè)簡單的加載效果，要求一個(gè)圓形元素從透明到不透明，并無限循環(huán)。4.JavaScriptDOM操作：編寫JavaScript代碼，實(shí)現(xiàn)以下功能：-獲取頁面中所有`<p>`標(biāo)簽的內(nèi)容并打印到控制臺(tái)；-為第一個(gè)`<p>`標(biāo)簽添加一個(gè)點(diǎn)擊事件，點(diǎn)擊后改變其背景顏色為紅色。5.HTML5+JavaScript實(shí)現(xiàn)：編寫代碼，使用`localStorage`實(shí)現(xiàn)一個(gè)簡單的購物車功能，要求：-用戶可以添加商品名稱到購物車；-頁面刷新后，購物車數(shù)據(jù)不丟失。答案與解析一、選擇題答案與解析1.答案：A解析：`<section>`用于定義文檔中的一個(gè)章節(jié)，`<article>`用于獨(dú)立內(nèi)容，`<div>`和`<span>`是通用標(biāo)簽，無語義。2.答案：A解析：選擇器優(yōu)先級(jí)順序：`id>類>標(biāo)簽>屬性選擇器`。3.答案：D解析：`typeof`僅能判斷基本類型，`instanceof`可能因原型鏈問題出錯(cuò)，`Ototype.toString`最準(zhǔn)確。4.答案：C解析：`flex-grow`控制元素在flex容器中的擴(kuò)展比例。5.答案：A解析：404表示“NotFound”，500表示服務(wù)器錯(cuò)誤，301表示永久重定向，304表示未修改。6.答案：D解析：`localStorage`和`sessionStorage`用于本地存儲(chǔ)，`cookies`也可存儲(chǔ)但有限制。7.答案：D解析：CSS變量必須以`--`開頭，可包含中文字符。8.答案：B解析：`async`和`await`簡化異步編程。9.答案：A解析：Flexbox適合一維布局（行或列），適合移動(dòng)端。10.答案：D解析：`<iframe>`用于嵌入外部網(wǎng)頁，也可創(chuàng)建新窗口或定義內(nèi)聯(lián)框架。二、填空題答案與解析1.答案：`<title>`解析：`<title>`用于定義頁面標(biāo)題，顯示在瀏覽器標(biāo)簽頁。2.答案：`visibility:hidden;`隱藏元素但保留布局，`display:none;`移除元素占位解析：`visibility`不占位，`display`占位。3.答案：`event.stopPropagation()`解析：阻止事件冒泡。4.答案：定義Grid容器的列布局解析：`grid-template-columns`控制列寬。5.答案：請求成功解析：200表示HTTP請求成功。三、簡答題答案與解析1.答案：-`<header>`：頁面頭部，如導(dǎo)航欄；-`<footer>`：頁面底部，如版權(quán)信息；-`<nav>`：導(dǎo)航鏈接；-`<article>`：獨(dú)立內(nèi)容（如博客文章）；-`<section>`：文檔章節(jié)。解析：語義化標(biāo)簽提升可讀性和SEO。2.答案：-盒模型包含：`content`（內(nèi)容）、`padding`（內(nèi)邊距）、`border`（邊框）、`margin`（外邊距）。解析：`box-sizing:border-box`可包含邊框。3.答案：閉包是函數(shù)及其詞法環(huán)境的組合，允許函數(shù)訪問外部作用域變量。應(yīng)用場景：模塊化、緩存數(shù)據(jù)等。4.答案：-容器屬性：`display:flex`、`flex-direction`等；-項(xiàng)目屬性：`flex-grow`、`flex-shrink`等；-對齊方式：`justify-content`、`align-items`等。解析：Flexbox實(shí)現(xiàn)一維布局。5.答案：-HTTP：明文傳輸，無加密；-HTTPS：加密傳輸，安全性更高。解析：HTTPS需證書，HTTP無需。四、編程題答案與解析1.HTML+CSS代碼：html<navclass="navbar"><ahref="#">首頁</a><ahref="#">關(guān)于</a><ahref="#">聯(lián)系方式</a></nav>css.navbar{display:flex;justify-content:space-around;background:#333;padding:10px;}.navbara{color:white;text-decoration:none;}解析：Flexbox實(shí)現(xiàn)自適應(yīng)布局。2.JavaScript代碼：javascriptfunctioncountWords(str){returnstr.trim().split(/\s+/).length;}解析：按空格分割，統(tǒng)計(jì)長度。3.CSS動(dòng)畫代碼：css@keyframesfadeIn{from{opacity:0;}to{opacity:1;}}.loader{width:50px;height:50px;background:blue;animation:fadeIn1sinfinite;}解析：`@keyframes`定義動(dòng)畫。4.JavaScriptDOM操作代碼：javascriptconstparagraphs=document.querySelectorAll('p');paragraphs.forEach(p=>console.log(p.textContent));paragraphs[0].addEventListener('click',()=>{paragraphs[0].style.backgroundColor='red';});解析：`querySelectorAll`和`addEventListener`。5.HTML5+JavaScript代碼：html<inputtype="text"id="itemInput"placeholder="輸入商品名稱"><buttononclick="addItem()">添加到購物車</button><script>functionaddItem(){constitem=document.getElementById('itemInput').val