2025年Web考試復(fù)習(xí)資料匯總含答案一、HTML核心考點(diǎn)及解析1.請(qǐng)列舉5個(gè)HTML5新增的語義化標(biāo)簽，并說明其用途。答案：HTML5新增的語義化標(biāo)簽主要用于更清晰地描述頁面結(jié)構(gòu)，常見標(biāo)簽包括：`<header>`：定義文檔或節(jié)的頁眉，通常包含標(biāo)題、導(dǎo)航或介紹性內(nèi)容；`<nav>`：定義導(dǎo)航鏈接的容器，用于頁面主要導(dǎo)航部分；`<section>`：定義文檔中的一個(gè)區(qū)域（節(jié)），通常有自己的標(biāo)題；`<article>`：定義獨(dú)立的、可復(fù)用的內(nèi)容，如博客文章、新聞條目；`<footer>`：定義文檔或節(jié)的頁腳，通常包含版權(quán)信息、相關(guān)鏈接等。2.簡(jiǎn)述HTML表單中`<input>`元素的常見類型及其作用。答案：常見類型包括：`text`（默認(rèn)）：?jiǎn)涡形谋据斎?；`password`：密碼輸入（內(nèi)容會(huì)被掩碼）；`email`：郵件地址輸入（自動(dòng)驗(yàn)證格式）；`number`：數(shù)字輸入（限制數(shù)值范圍）；`date`：日期選擇器（彈出日歷）；`file`：文件上傳；`checkbox`：復(fù)選框（可多選）；`radio`：?jiǎn)芜x按鈕（僅選一個(gè)）；`submit`：提交按鈕（觸發(fā)表單提交）。3.說明`<div>`與`<span>`的區(qū)別及使用場(chǎng)景。答案：`<div>`是塊級(jí)元素（blocklevel），默認(rèn)占據(jù)一行，會(huì)換行顯示，通常用于布局容器（如分塊內(nèi)容）；`<span>`是行內(nèi)元素（inline），不會(huì)換行，僅占據(jù)內(nèi)容所需寬度，通常用于內(nèi)聯(lián)樣式或文本標(biāo)記（如高亮關(guān)鍵詞）。二、CSS核心考點(diǎn)及解析1.簡(jiǎn)述標(biāo)準(zhǔn)盒模型與IE盒模型的區(qū)別。答案：標(biāo)準(zhǔn)盒模型（W3C盒模型）中，元素的總寬度=內(nèi)容寬度（width）+內(nèi)邊距（padding）+邊框（border）+外邊距（margin）；IE盒模型（怪異模式）中，元素的總寬度=width（包含內(nèi)容、內(nèi)邊距、邊框）+外邊距（margin）。通過`boxsizing`屬性可控制盒模型類型：`contentbox`為標(biāo)準(zhǔn)模型（默認(rèn)），`borderbox`為IE模型。2.如何實(shí)現(xiàn)一個(gè)水平垂直居中的容器？（至少3種方法）答案：（1）Flex布局：父容器設(shè)置`display:flex;justifycontent:center;alignitems:center;`；（2）絕對(duì)定位+transform：子元素設(shè)置`position:absolute;left:50%;top:50%;transform:translate(50%,50%);`，父容器需`position:relative`；（3）Grid布局：父容器設(shè)置`display:grid;placeitems:center;`；（4）行內(nèi)塊+文本對(duì)齊：父容器`textalign:center;lineheight:容器高度`，子元素`display:inlineblock;verticalalign:middle`。3.解釋CSS選擇器的優(yōu)先級(jí)規(guī)則，并舉例說明。答案：優(yōu)先級(jí)由選擇器的類型決定，從高到低為：!important（最高，慎用）；內(nèi)聯(lián)樣式（style屬性，權(quán)重1000）；ID選擇器（id，權(quán)重100）；類/屬性/偽類選擇器（.class/[attr]/:hover，權(quán)重10）；元素/偽元素選擇器（div/:before，權(quán)重1）；通配符（）和繼承樣式（無權(quán)重）。示例：`nav.link`（1個(gè)ID+1個(gè)類，權(quán)重110）優(yōu)先級(jí)高于`.navlink`（1個(gè)ID+1個(gè)類，權(quán)重相同但后者位置靠后時(shí)覆蓋），而`divnav`（1個(gè)ID+1個(gè)元素，權(quán)重101）高于`.navlink`（權(quán)重10）。三、JavaScript核心考點(diǎn)及解析1.說明var、let、const的區(qū)別及使用場(chǎng)景。答案：`var`：函數(shù)作用域，存在變量提升（聲明提前），可重復(fù)聲明，值可修改（非常量）；`let`：塊級(jí)作用域（{}內(nèi)），不存在變量提升（TDZ暫時(shí)性死區(qū)），不可重復(fù)聲明，值可修改；`const`：塊級(jí)作用域，不可重復(fù)聲明，聲明時(shí)必須初始化，基本類型值不可修改（引用類型可修改屬性）。使用場(chǎng)景：`var`一般避免使用（ES6后），`let`用于需要重新賦值的變量，`const`用于值不變的變量（推薦優(yōu)先使用）。2.解釋原型鏈的作用及`instanceof`的工作原理。答案：原型鏈?zhǔn)荍avaScript實(shí)現(xiàn)繼承的機(jī)制。每個(gè)對(duì)象（除`null`）都有一個(gè)`__proto__`屬性指向其構(gòu)造函數(shù)的`prototype`對(duì)象，形成鏈?zhǔn)浇Y(jié)構(gòu)。當(dāng)訪問對(duì)象屬性時(shí)，若對(duì)象自身無該屬性，則沿原型鏈向上查找，直到`Ototype.__proto__===null`為止。`instanceof`通過檢查對(duì)象的原型鏈?zhǔn)欠癜瑯?gòu)造函數(shù)的`prototype`屬性來判斷類型。例如`objinstanceofFoo`會(huì)檢查`Ftotype`是否在`obj`的原型鏈上。3.簡(jiǎn)述JavaScript事件循環(huán)（EventLoop）的機(jī)制，區(qū)分宏任務(wù)（Macrotask）與微任務(wù)（Microtask）。答案：事件循環(huán)是JS處理異步任務(wù)的核心機(jī)制。主線程執(zhí)行同步代碼，遇到異步任務(wù)（如`setTimeout`、Promise）會(huì)將其回調(diào)放入任務(wù)隊(duì)列。宏任務(wù)：包括`setTimeout`、`setInterval`、I/O操作、UI渲染等，由事件循環(huán)的每個(gè)tick處理一個(gè)宏任務(wù)；微任務(wù)：包括`Promise.then()`、`process.nextTick`（Node.js）、`MutationObserver`等，在當(dāng)前宏任務(wù)執(zhí)行完畢后，清空所有微任務(wù)隊(duì)列再進(jìn)入下一個(gè)宏任務(wù)。執(zhí)行順序：同步代碼→微任務(wù)隊(duì)列→宏任務(wù)隊(duì)列→重復(fù)此過程。四、前端框架（以Vue3為例）核心考點(diǎn)及解析1.簡(jiǎn)述Vue3響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理（與Vue2的區(qū)別）。答案：Vue3使用`Proxy`替代Vue2的`Object.defineProperty`實(shí)現(xiàn)響應(yīng)式。`Proxy`可以監(jiān)聽對(duì)象的所有屬性（包括新增/刪除），支持?jǐn)?shù)組索引和長(zhǎng)度的修改，且無需遞歸遍歷對(duì)象（按需懶代理）。Vue2中`Object.defineProperty`僅能監(jiān)聽已有屬性的`get`和`set`，無法檢測(cè)數(shù)組索引變化和對(duì)象屬性的新增/刪除（需手動(dòng)調(diào)用`Vue.set`）。2.列舉Vue3的生命周期鉤子，并說明其執(zhí)行時(shí)機(jī)。答案：Vue3生命周期鉤子與Vue2對(duì)應(yīng)（前綴改為`on`）：`onBeforeMount`：組件掛載前；`onMounted`：組件掛載完成（DOM已渲染）；`onBeforeUpdate`：組件更新前（數(shù)據(jù)變化后，DOM更新前）；`onUpdated`：組件更新完成（DOM已更新）；`onBeforeUnmount`：組件卸載前；`onUnmounted`：組件卸載完成；`onErrorCaptured`：捕獲子組件錯(cuò)誤；`onRenderTracked`/`onRenderTriggered`（調(diào)試用）：跟蹤依賴/觸發(fā)重新渲染。3.說明Vue3中`ref`與`reactive`的區(qū)別及使用場(chǎng)景。答案：`reactive`：用于創(chuàng)建響應(yīng)式對(duì)象（僅對(duì)象/數(shù)組/Map等引用類型），內(nèi)部通過`Proxy`實(shí)現(xiàn)；`ref`：用于創(chuàng)建響應(yīng)式值（基本類型或?qū)ο螅?，?nèi)部通過`RefImpl`包裝，訪問時(shí)需`.value`（模板中可省略）。使用場(chǎng)景：基本類型（如`number`、`string`）用`ref`；對(duì)象/數(shù)組用`reactive`（或`ref`包裹對(duì)象，效果等價(jià)）。五、后端與網(wǎng)絡(luò)核心考點(diǎn)及解析1.列舉常見的HTTP狀態(tài)碼及其含義（至少8個(gè)）。答案：200OK：請(qǐng)求成功，返回預(yù)期數(shù)據(jù)；201Created：資源成功創(chuàng)建（如POST請(qǐng)求后）；204NoContent：請(qǐng)求成功但無返回內(nèi)容；301MovedPermanently：資源永久重定向；304NotModified：資源未修改（緩存有效）；400BadRequest：客戶端請(qǐng)求語法錯(cuò)誤；401Unauthorized：未認(rèn)證（需登錄）；403Forbidden：已認(rèn)證但無權(quán)限；404NotFound：資源不存在；500InternalServerError：服務(wù)器內(nèi)部錯(cuò)誤；503ServiceUnavailable：服務(wù)器暫時(shí)不可用。2.簡(jiǎn)述HTTPS的工作流程（重點(diǎn)說明加密過程）。答案：HTTPS通過SSL/TLS協(xié)議加密HTTP通信，流程如下：（1）客戶端向服務(wù)器發(fā)送請(qǐng)求，支持的加密算法列表；（2）服務(wù)器返回CA證書（含公鑰）及選擇的加密算法；（3）客戶端驗(yàn)證證書有效性（通過CA機(jī)構(gòu)公鑰），提供隨機(jī)數(shù)（預(yù)主密鑰），用服務(wù)器公鑰加密后發(fā)送；（4）服務(wù)器用私鑰解密得到預(yù)主密鑰，雙方基于預(yù)主密鑰提供會(huì)話密鑰（對(duì)稱加密密鑰）；（5）后續(xù)通信通過會(huì)話密鑰進(jìn)行對(duì)稱加密傳輸。3.解釋RESTfulAPI的設(shè)計(jì)原則（至少4條）。答案：資源導(dǎo)向：用URL標(biāo)識(shí)資源（如`/users/{id}`表示用戶資源）；動(dòng)詞操作：用HTTP方法定義操作（GET查詢、POST創(chuàng)建、PUT更新、DELETE刪除）；無狀態(tài)：服務(wù)器不保存客戶端狀態(tài)（通過Token或Cookie標(biāo)識(shí)）；統(tǒng)一接口：使用標(biāo)準(zhǔn)狀態(tài)碼、錯(cuò)誤格式；可緩存：通過`CacheControl`等頭信息標(biāo)識(shí)資源可緩存性；分層系統(tǒng)：支持中間層（如CDN、負(fù)載均衡）。六、Web安全核心考點(diǎn)及解析1.解釋XSS（跨站腳本攻擊）的類型及防范措施。答案：XSS分為三種類型：存儲(chǔ)型：惡意腳本存儲(chǔ)在服務(wù)器（如評(píng)論、數(shù)據(jù)庫），其他用戶訪問時(shí)執(zhí)行；反射型：惡意腳本通過URL參數(shù)傳遞，服務(wù)器未過濾直接返回；DOM型：惡意腳本通過前端JS操作DOM注入（不經(jīng)過服務(wù)器）。防范措施：輸入過濾：對(duì)用戶輸入進(jìn)行轉(zhuǎn)義（如替換`<`為`<`）；輸出轉(zhuǎn)義：在HTML、JS、CSS上下文中使用對(duì)應(yīng)轉(zhuǎn)義規(guī)則；使用CSP（內(nèi)容安全策略）：通過`ContentSecurityPolicy`頭限制腳本來源；避免內(nèi)聯(lián)JS（如`onclick`）和`eval()`等危險(xiǎn)函數(shù)。2.說明CSRF（跨站請(qǐng)求偽造）的原理及防范方法。答案：CSRF利用用戶已登錄的身份，在用戶不知情的情況下發(fā)送偽造請(qǐng)求（如轉(zhuǎn)賬、修改密碼）。攻擊者誘導(dǎo)用戶訪問惡意網(wǎng)站，該網(wǎng)站向目標(biāo)網(wǎng)站發(fā)送請(qǐng)求（利用瀏覽器自動(dòng)攜帶Cookie）。防范方法：CSRFToken：服務(wù)器提供隨機(jī)Token，表單提交時(shí)攜帶（與Session或Cookie校驗(yàn)）；SameSiteCookie：設(shè)置`SameSite=Strict/Lax`，限制Cookie僅在同站請(qǐng)求中發(fā)送；檢查Referer頭：驗(yàn)證請(qǐng)求來源是否為合法域名（可能被篡改，需結(jié)合其他方法）；雙重Cookie驗(yàn)