2025年acaa網(wǎng)頁(yè)考試試題及答案一、單項(xiàng)選擇題（每題2分，共30分）1.以下HTML5語(yǔ)義化標(biāo)簽中，最適合用于定義頁(yè)面主要內(nèi)容區(qū)域的是（）A.`<section>`B.`<article>`C.`<main>`D.`<nav>`答案：C2.CSS中，以下選擇器優(yōu)先級(jí)由高到低排列正確的是（）A.內(nèi)聯(lián)樣式>ID選擇器>類選擇器>標(biāo)簽選擇器B.ID選擇器>內(nèi)聯(lián)樣式>類選擇器>標(biāo)簽選擇器C.類選擇器>ID選擇器>內(nèi)聯(lián)樣式>標(biāo)簽選擇器D.內(nèi)聯(lián)樣式>類選擇器>ID選擇器>標(biāo)簽選擇器答案：A3.JavaScript中，`letarr=[1,2,3];arr[3]=4;console.log(arr.length)`的輸出結(jié)果是（）A.3B.4C.5D.6答案：B4.響應(yīng)式設(shè)計(jì)中，媒體查詢`@media(max-width:768px)`表示（）A.當(dāng)視口寬度大于768px時(shí)應(yīng)用樣式B.當(dāng)視口寬度小于等于768px時(shí)應(yīng)用樣式C.當(dāng)視口高度小于768px時(shí)應(yīng)用樣式D.當(dāng)設(shè)備寬度為768px時(shí)應(yīng)用樣式答案：B5.以下不屬于CSS盒模型屬性的是（）A.marginB.paddingC.border-radiusD.content答案：C6.在Vue.js中，子組件向父組件傳遞數(shù)據(jù)應(yīng)使用（）A.propsB.$emitC.refD.Vuex答案：B7.以下能正確獲取當(dāng)前頁(yè)面URL中查詢參數(shù)`name`的值的JavaScript代碼是（）A.`newURLSearchParams(window.location.search).get('name')`B.`document.location.query('name')`C.`window.location.hash.split('=')[1]`D.`sessionStorage.getItem('name')`答案：A8.關(guān)于SEO優(yōu)化，以下做法錯(cuò)誤的是（）A.為圖片添加alt屬性B.使用H1標(biāo)簽包裹頁(yè)面核心標(biāo)題C.大量使用Flash動(dòng)畫(huà)展示內(nèi)容D.確保頁(yè)面內(nèi)容與標(biāo)題標(biāo)簽相關(guān)答案：C9.以下CSS屬性中，可用于實(shí)現(xiàn)元素水平垂直居中的是（）A.`margin:0auto;`B.`position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`C.`display:flex;justify-content:flex-start;align-items:flex-end;`D.`float:left;clear:both;`答案：B10.JavaScript中，`typeofnull`的返回值是（）A."null"B."object"C."undefined"D."number"答案：B11.以下HTML輸入框類型中，能觸發(fā)瀏覽器自動(dòng)完成功能且符合HTML5規(guī)范的是（）A.`<inputtype="text"autocomplete="on">`B.`<inputtype="text"autocomplete="name">`C.`<inputtype="text"autocomplete="off">`D.`<inputtype="text"autocomplete="none">`答案：B12.在CSS中，`box-sizing:border-box`的作用是（）A.讓元素寬度包含padding和borderB.讓元素高度不包含marginC.強(qiáng)制元素為塊級(jí)顯示D.禁止元素被選中答案：A13.以下關(guān)于Web性能優(yōu)化的措施，效果最不明顯的是（）A.壓縮圖片文件大小B.啟用Gzip壓縮C.在頁(yè)面底部引入JavaScript文件D.使用`<iframe>`加載第三方廣告答案：D14.用JavaScript實(shí)現(xiàn)數(shù)組去重，以下代碼正確的是（）A.`[...newSet(arr)]`B.`arr.filter((item,index)=>arr.indexOf(item)===index)`C.`arr.reduce((acc,cur)=>acc.includes(cur)?acc:[...acc,cur],[])`D.以上均正確答案：D15.以下關(guān)于HTTP/2特性的描述，錯(cuò)誤的是（）A.支持多路復(fù)用B.使用明文傳輸C.服務(wù)器推送D.頭部壓縮答案：B二、填空題（每空2分，共20分）1.HTML5中用于定義離線緩存的API是__________。答案：ApplicationCache（注：實(shí)際已被ServiceWorker逐步替代，但考試可能保留傳統(tǒng)考點(diǎn)）2.CSS中，`flex:1`是`flex-grow`、`flex-shrink`和__________的簡(jiǎn)寫(xiě)。答案：flex-basis3.JavaScript中，`async/await`本質(zhì)上是__________的語(yǔ)法糖。答案：Promise4.響應(yīng)式設(shè)計(jì)中，常用的斷點(diǎn)寬度（Breakpoints）通常包括768px（平板）、992px（小桌面）和__________（大桌面）。答案：1200px5.在Vue組件中，`data`選項(xiàng)必須是一個(gè)__________，以避免組件實(shí)例間數(shù)據(jù)共享。答案：函數(shù)6.CSS中，`transform:rotate(45deg)`表示將元素__________旋轉(zhuǎn)45度。答案：順時(shí)針7.JavaScript中，`localStorage`存儲(chǔ)的數(shù)據(jù)__________（填“會(huì)”或“不會(huì)”）隨HTTP請(qǐng)求發(fā)送到服務(wù)器。答案：不會(huì)8.為提高可訪問(wèn)性（A11Y），為按鈕添加__________屬性可定義其關(guān)聯(lián)的表單元素ID。答案：aria-controls9.正則表達(dá)式`/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/`用于驗(yàn)證__________格式。答案：電子郵件10.前端構(gòu)建工具Webpack中，用于處理CSS文件的loader通常是__________和css-loader。答案：style-loader三、簡(jiǎn)答題（每題6分，共30分）1.簡(jiǎn)述HTML語(yǔ)義化的作用。答案：HTML語(yǔ)義化通過(guò)使用正確的標(biāo)簽（如`<header>`、`<nav>`、`<article>`）描述內(nèi)容結(jié)構(gòu)，提升以下方面：搜索引擎優(yōu)化（SEO）：幫助爬蟲(chóng)理解內(nèi)容優(yōu)先級(jí)；可訪問(wèn)性（A11Y）：屏幕閱讀器等輔助工具能正確解析內(nèi)容；代碼可維護(hù)性：明確的結(jié)構(gòu)便于開(kāi)發(fā)者閱讀和修改；未來(lái)兼容性：語(yǔ)義化標(biāo)簽更適應(yīng)技術(shù)演進(jìn)（如語(yǔ)音交互）。2.說(shuō)明CSS中`position`屬性的常見(jiàn)值及其行為。答案：常見(jiàn)值包括：static（默認(rèn)）：元素按文檔流正常排列，top、left等定位屬性無(wú)效；relative：相對(duì)自身原始位置偏移，不脫離文檔流；absolute：相對(duì)于最近的已定位祖先元素（非static）定位，脫離文檔流；fixed：相對(duì)于視口定位，脫離文檔流，滾動(dòng)時(shí)位置不變；sticky：混合relative和fixed，滾動(dòng)到閾值時(shí)變?yōu)閒ixed定位。3.解釋JavaScript事件委托（事件代理）的原理及優(yōu)勢(shì)。答案：原理：利用事件冒泡機(jī)制，將事件監(jiān)聽(tīng)器綁定到父元素，通過(guò)`event.target`判斷實(shí)際觸發(fā)事件的子元素，間接處理子元素的事件。優(yōu)勢(shì)：減少內(nèi)存占用：無(wú)需為每個(gè)子元素單獨(dú)綁定監(jiān)聽(tīng)器；動(dòng)態(tài)適配：新增子元素?zé)o需重新綁定事件；代碼簡(jiǎn)潔：統(tǒng)一管理事件邏輯。4.列舉至少4種實(shí)現(xiàn)CSS垂直居中的方法（不重復(fù)原理）。答案：行內(nèi)元素：父元素設(shè)置`line-height`等于自身高度；塊級(jí)元素：`position:absolute`+`top:50%`+`transform:translateY(-50%)`；Flex布局：父元素`display:flex;align-items:center`；Grid布局：父元素`display:grid;align-items:center`；表格布局：父元素`display:table-cell;vertical-align:middle`。5.說(shuō)明Vue.js中`computed`和`methods`的區(qū)別。答案：計(jì)算屬性（computed）：基于依賴響應(yīng)式數(shù)據(jù)緩存結(jié)果，僅當(dāng)依賴變化時(shí)重新計(jì)算；方法（methods）：每次調(diào)用都會(huì)執(zhí)行函數(shù)，無(wú)緩存；使用場(chǎng)景：computed適用于需要緩存的復(fù)雜邏輯（如篩選列表），methods適用于需要主動(dòng)觸發(fā)的操作（如點(diǎn)擊事件）。四、實(shí)操題（共20分）1.（8分）使用HTML、CSS實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄，要求：桌面端：水平排列，包含Logo（文字“ACAA”）、4個(gè)導(dǎo)航項(xiàng)（首頁(yè)、課程、案例、關(guān)于）；移動(dòng)端（≤768px）：導(dǎo)航項(xiàng)折疊為漢堡菜單（點(diǎn)擊展開(kāi)/收起）；導(dǎo)航欄固定在頁(yè)面頂部，背景色fff，陰影效果`box-shadow:02px5pxrgba(0,0,0,0.1)`；導(dǎo)航項(xiàng)hover時(shí)顏色變?yōu)?c3e50，過(guò)渡時(shí)間0.3s。答案：```html<navclass="navbar"><divclass="container"><ahref=""class="logo">ACAA</a><ulclass="nav-links"><li><ahref="">首頁(yè)</a></li><li><ahref="">課程</a></li><li><ahref="">案例</a></li><li><ahref="">關(guān)于</a></li></ul><buttonclass="menu-btn">?</button></div></nav><style>.navbar{position:fixed;top:0;width:100%;background:fff;box-shadow:02px5pxrgba(0,0,0,0.1);z-index:1000;}.container{max-width:1200px;margin:0auto;padding:020px;display:flex;justify-content:space-between;align-items:center;}.logo{font-size:1.5rem;font-weight:bold;color:333;text-decoration:none;}.nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0;}.nav-linksa{color:666;text-decoration:none;transition:color0.3s;}.nav-linksa:hover{color:2c3e50;}.menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;}@media(max-width:768px){.nav-links{display:none;position:absolute;top:100%;left:0;width:100%;background:fff;flex-direction:column;padding:20px0;text-align:center;}.nav-linksli{padding:10px0;}.menu-btn{display:block;}.nav-links.active{display:flex;}}/JavaScript控制菜單展開(kāi)/<script>document.querySelector('.menu-btn').addEventListener('click',()=>{document.querySelector('.nav-links').classList.toggle('active');});</script>```2.（6分）用JavaScript實(shí)現(xiàn)一個(gè)函數(shù)`validateForm`，驗(yàn)證用戶注冊(cè)表單：用戶名（username）：必填，長(zhǎng)度4-16位，僅允許字母、數(shù)字和下劃線；密碼（password）：必填，長(zhǎng)度6-12位，至少包含1個(gè)大寫(xiě)字母和1個(gè)數(shù)字；郵箱（email）：必填，符合標(biāo)準(zhǔn)郵箱格式；驗(yàn)證失敗時(shí)，在對(duì)應(yīng)輸入框下方顯示紅色錯(cuò)誤提示（如`<divclass="error">錯(cuò)誤信息</div>`）；驗(yàn)證通過(guò)時(shí)返回`true`，否則返回`false`。答案：```javascriptfunctionvalidateForm(){letisValid=true;//清除舊錯(cuò)誤提示document.querySelectorAll('.error').forEach(el=>el.remove());//驗(yàn)證用戶名constusername=document.querySelector('username').value.trim();constusernameRegex=/^[a-zA-Z0-9_]{4,16}$/;if(!username){showError('username','用戶名不能為空');isValid=false;}elseif(!usernameRegex.test(username)){showError('username','用戶名需4-16位，僅含字母、數(shù)字和下劃線');isValid=false;}//驗(yàn)證密碼constpassword=document.querySelector('password').value;constpasswordRegex=/^(?=.[A-Z])(?=.\d).{6,12}$/;if(!password){showError('password','密碼不能為空');isValid=false;}elseif(!passwordRegex.test(password)){showError('password','密碼需6-12位，包含至少1個(gè)大寫(xiě)字母和1個(gè)數(shù)字');isValid=false;}//驗(yàn)證郵箱constemail=document.querySelector('email').value.trim();constemailRegex=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;if(!email){showError('email','郵箱不能為空');isValid=false;}elseif(!emailRegex.test(email)){showError('email','郵箱格式不正確');isValid=false;}returnisValid;}functionshowError(selector,message){constinput=document.querySelector(selector);consterrorDiv=document.createElement('div');errorDiv.className='error';errorDiv.style.color='red';errorDiv.style.fontSize='0.9em';errorDiv.style.marginTop='5px';errorDiv.textContent=message;input.parentNode.appendChild(errorDiv);}```3.（6分）使用Vue.js（3.x版本）創(chuàng)建一個(gè)待辦事項(xiàng)列表組件`TodoList`，要求：包含輸入框和“添加”按鈕，輸入內(nèi)容不為空時(shí)可添加待辦項(xiàng)；待辦項(xiàng)顯示復(fù)選框（勾選后標(biāo)記為完成，文字添加刪除線）；顯示“全部”“未完成”“已完成”篩選按鈕，點(diǎn)擊后過(guò)濾列表；使用`localStorage`持久化存儲(chǔ)待辦數(shù)據(jù)。答案：```vue<template><divclass="todo-list"><inputtype="text"v-model="newTodo"placeholder="輸入待辦事項(xiàng)"@keyup.enter="addTodo"><button@click="addTodo":disabled="!newTodo">添加</button><divclass="filters"><button@click="filter='all'">全部</button><button@click="filter='active'">未完成</button><button@click="filter='completed'">已完成</button></div><ul><liv-for="todoinfilteredTodos":key="todo.id"><inputtype="checkbox"v-model="pleted"><span:class="{completed:pleted}">{{todo.text}}</span><button@click="deleteTodo(todo.id)">刪除</button></li></ul></div></template><script>import{ref,computed,onMounted,onUnmounted}from'vue';exportdefault{setup(){constnewTodo=ref('');consttodos=ref([]);constfilter=ref('all');//從localStorage讀取數(shù)據(jù)onMounted(()=>{constsavedTodos=localStorage.getItem('todos');if(savedTodos)todos.value=JSON.parse(savedTodos);});//保存數(shù)據(jù)到localStorageconstsaveTodos=()=>{localStorage.setItem('todos',JSON.stringify(todos.value));};//添加待辦constaddTodo=()=>{if(!newTodo.value.trim())return;todos.value.push({id:Date.now(),