web開卷考試題目含答案一、單項選擇題（每題2分，共20分）1.以下哪個HTML標簽屬于語義化標簽？A.`<div>`B.`<span>`C.`<article>`D.`<i>`2.CSS中，使用flex布局時，若要讓子元素在交叉軸上居中對齊，應設置：A.`justifycontent:center`B.`alignitems:center`C.`aligncontent:center`D.`flexwrap:wrap`3.以下JavaScript代碼的輸出結果是：```javascriptleta={x:1};letb=a;b.x=2;console.log(a.x);```A.1B.2C.undefinedD.報錯4.HTTP狀態(tài)碼201表示：A.成功接收請求但未處理完成B.資源已永久移動C.請求成功并創(chuàng)建了新資源D.請求被禁止5.以下哪個選項不是Vue.js的生命周期鉤子？A.`beforeCreate`B.`mounted`C.`beforeRouteEnter`D.`beforeUpdate`6.關于CSS盒模型，以下說法錯誤的是：A.標準盒模型的寬度僅包含內(nèi)容區(qū)域B.`boxsizing:borderbox`會將內(nèi)邊距和邊框包含在寬度計算中C.內(nèi)邊距（padding）可以設置負值D.外邊距（margin）在某些情況下會發(fā)生折疊7.以下哪項是JavaScript中深拷貝的正確實現(xiàn)方式？A.使用`Object.assign()`B.使用`JSON.parse(JSON.stringify())`C.使用擴展運算符`...`D.直接賦值8.在Node.js中，以下哪個模塊用于處理文件系統(tǒng)操作？A.`http`B.`fs`C.`path`D.`url`9.關于RESTfulAPI設計，以下說法正確的是：A.用POST方法刪除資源B.路徑中使用動詞（如`/getUser`）C.狀態(tài)碼應反映操作結果（如404表示資源不存在）D.響應數(shù)據(jù)必須使用XML格式10.以下哪個屬性可以實現(xiàn)CSS的文字溢出省略？A.`textoverflow:ellipsis`B.`overflow:hidden`C.`whitespace:nowrap`D.以上都是二、填空題（每空2分，共20分）1.HTML中，`<metacharset="UTF8">`的作用是________________________。2.CSS中，清除浮動的常用方法有________________________（至少寫兩種）。3.JavaScript中，`typeofnull`的返回值是________________________。4.前端性能優(yōu)化的常見手段包括________________________（至少寫三種）。5.瀏覽器渲染頁面的流程包括________________________（按順序填寫關鍵步驟）。6.在Vue中，父組件向子組件傳遞數(shù)據(jù)使用________________________，子組件向父組件傳遞數(shù)據(jù)使用________________________。7.HTTP請求的常見方法有________________________（至少寫四種）。8.Node.js中，`process.env.NODE_ENV`通常用于________________________。三、簡答題（每題8分，共40分）1.解釋SPA（單頁應用）的概念，并說明其優(yōu)缺點。2.什么是CSS預處理器（如Sass、Less）？相比原生CSS，它提供了哪些優(yōu)勢？3.簡述JavaScript中原型鏈的作用及其實現(xiàn)繼承的原理。4.什么是SQL注入？如何防范？5.說明Webpack的核心功能及其在前端開發(fā)中的作用。四、編程題（共70分）1.（15分）使用HTML和CSS實現(xiàn)一個響應式導航欄，要求：包含Logo（文字“Logo”）、三個導航項（“首頁”“產(chǎn)品”“關于”）；屏幕寬度小于768px時，導航項折疊為漢堡菜單（僅顯示圖標，點擊后展開）；基礎樣式美觀（如背景色、間距、懸停效果）。2.（20分）用JavaScript實現(xiàn)一個函數(shù)`unique(arr)`，要求：輸入一個數(shù)組（可能包含基本類型和對象）；輸出去重后的數(shù)組；對于對象類型，若兩個對象的所有屬性鍵值對完全相同，則視為重復（如`{a:1}`和`{a:1}`視為重復）；示例：`unique([1,2,2,'a','a',{x:1},{x:1}])`應輸出`[1,2,'a',{x:1}]`。3.（20分）使用Vue3組合式API（CompositionAPI）實現(xiàn)一個父子組件通信案例：父組件包含一個輸入框和一個子組件；輸入框內(nèi)容實時同步到子組件（父→子）；子組件包含一個按鈕，點擊按鈕時向父組件傳遞消息“子組件觸發(fā)”（子→父）；要求寫出父組件和子組件的完整代碼（模板+腳本）。4.（15分）使用Express框架搭建一個簡單的API服務，要求：包含一個GET接口`/users`，返回`{code:200,data:[{id:1,name:'張三'},{id:2,name:'李四'}]}`；包含一個POST接口`/login`，接收`username`和`password`參數(shù)，若均為“admin”則返回`{code:200,msg:'登錄成功'}`，否則返回`{code:401,msg:'用戶名或密碼錯誤'}`；使用`bodyparser`中間件處理請求體；服務監(jiān)聽3000端口。答案一、單項選擇題1.C2.B3.B4.C5.C6.C7.B8.B9.C10.D二、填空題1.指定HTML文檔的字符編碼為UTF82.父元素添加`overflow:hidden`、使用`clear:both`的空div、偽元素清除浮動（`::after`）3."object"4.圖片懶加載、減少HTTP請求、使用CDN、代碼壓縮、開啟Gzip壓縮5.解析HTML提供DOM樹→解析CSS提供CSSOM樹→合并為渲染樹（RenderTree）→布局（Layout，計算元素位置尺寸）→繪制（Paint，填充像素）→合成（Composite，層合并）6.props；$emit（或自定義事件）7.GET、POST、PUT、DELETE、PATCH（任意四個）8.配置環(huán)境變量（如區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境）三、簡答題1.SPA（單頁應用）是一種僅加載單個HTML頁面，并通過動態(tài)更新DOM來實現(xiàn)頁面交互的Web應用。優(yōu)點：頁面切換無需重新加載，用戶體驗流暢；前后端分離清晰，前端可獨立開發(fā)；減少服務器壓力（僅需返回初始HTML）。缺點：首屏加載時間長（需加載大量JS）；SEO不友好（初始HTML內(nèi)容少）；狀態(tài)管理復雜（需借助Vuex/Redux等工具）。2.CSS預處理器是擴展了原生CSS語法的語言（如Sass的`.scss`、Less的`.less`），通過編譯提供標準CSS。優(yōu)勢：支持變量（`$color:333`）、嵌套規(guī)則（`nav{ul{li{...}}}`）、混合（Mixin，復用樣式片段）、函數(shù)（如計算顏色亮度）、繼承等，提升代碼可維護性和復用性。3.原型鏈是JavaScript實現(xiàn)繼承的機制。每個對象（除`null`）都有一個`__proto__`屬性指向其原型對象，原型對象又有自己的原型，最終指向`Ototype`，形成鏈。當訪問對象屬性時，若對象自身無該屬性，則沿原型鏈向上查找，直到找到或到達`null`。繼承原理：通過設置子構造函數(shù)的原型為父構造函數(shù)的實例（`Ctotype=newParent()`），或ES6的`classChildextendsParent`語法，使子對象可訪問父對象的屬性和方法。4.SQL注入是攻擊者通過在請求參數(shù)中插入惡意SQL代碼，篡改原SQL邏輯，從而獲取或破壞數(shù)據(jù)庫數(shù)據(jù)的攻擊方式（如輸入`username=admin'`可繞過密碼驗證）。防范措施：使用預編譯語句（PreparedStatement）綁定參數(shù)；對用戶輸入進行轉義（如轉義單引號）；限制數(shù)據(jù)庫權限（避免使用root賬號連接）；后端校驗輸入格式（如正則驗證）。5.Webpack是前端模塊打包工具，核心功能包括：模塊打包（將JS、CSS、圖片等資源按依賴關系打包為靜態(tài)文件）、代碼轉換（通過loader處理ES6+、TypeScript、Sass等）、優(yōu)化（壓縮代碼、TreeShaking刪除未使用代碼）、插件擴展（如熱更新HMR、提供HTML文件）。作用：統(tǒng)一管理前端資源，簡化開發(fā)流程，提升代碼可維護性和項目構建效率。四、編程題1.HTML/CSS響應式導航欄實現(xiàn)：```html<navclass="navbar"><divclass="logo">Logo</div><divclass="navitems"><ahref=""class="navlink">首頁</a><ahref=""class="navlink">產(chǎn)品</a><ahref=""class="navlink">關于</a></div><buttonclass="menubtn">?</button></nav><style>.navbar{display:flex;justifycontent:spacebetween;alignitems:center;padding:1rem2rem;background:333;color:white;}.navitems{display:flex;gap:2rem;}.navlink{color:white;textdecoration:none;padding:0.5rem;}.navlink:hover{background:555;borderradius:4px;}.menubtn{display:none;background:none;border:none;color:white;fontsize:1.5rem;cursor:pointer;}@media(maxwidth:768px){.navitems{display:none;position:absolute;top:100%;left:0;right:0;background:333;flexdirection:column;alignitems:center;padding:1rem;}.navitems.active{display:flex;}.menubtn{display:block;}}<script>//移動端菜單展開邏輯document.querySelector('.menubtn').addEventListener('click',()=>{document.querySelector('.navitems').classList.toggle('active');});</script>```2.JavaScript數(shù)組去重函數(shù)`unique`：```javascriptfunctionunique(arr){constmap=newMap();for(constitemofarr){letkey;if(typeofitem==='object'&&item!==null){//對象轉為字符串（需處理屬性順序）key=JSON.stringify(Object.entries(item).sort());}else{key=typeofitem+':'+item;}if(!map.has(key)){map.set(key,item);}}returnArray.from(map.values());}//驗證示例：console.log(unique([1,2,2,'a','a',{x:1},{x:1}]));//輸出：[1,2,'a',{x:1}]```3.Vue3父子組件通信（CompositionAPI）：父組件（Parent.vue）：```vue<template><div><inputvmodel="message"placeholder="輸入內(nèi)容..."><Child:parentMsg="message"@childevent="handleChildEvent"/></div></template><scriptsetup>import{ref}from'vue';importChildfrom'./Child.vue';constmessage=ref('');consthandleChildEvent=(msg)=>{alert(`接收到子組件消息：${msg}`);};</script>```子組件（Child.vue）：```vue<template><div><p>父組件內(nèi)容：{{parentMsg}}</p><button@click="sendMessage">觸發(fā)消息</button></div></template><scriptsetup>import{defineProps,defineEmits}from'vue';constprops=defineProps(['parentMsg']);constemit=defineEmits(['childevent']);constsendMessage=()=>{emit('childevent','子組件觸發(fā)');};</scrip