2025年《網(wǎng)站設(shè)計(jì)與制作》試卷和答案一、單項(xiàng)選擇題（每題2分，共30分）1.以下HTML5新增的語義化標(biāo)簽中，最適合用于頁面主要內(nèi)容區(qū)域的是（）A.`<header>`B.`<main>`C.`<section>`D.`<article>`2.CSS中，若要實(shí)現(xiàn)元素在父容器中水平垂直居中，且父容器尺寸不固定，最可靠的方法是（）A.`margin:auto;position:absolute;top:0;bottom:0;left:0;right:0`B.`display:flex;justify-content:center;align-items:center`C.`text-align:center;line-height:父容器高度`D.`transform:translate(-50%,-50%);position:absolute;left:50%;top:50%`3.關(guān)于響應(yīng)式設(shè)計(jì)（ResponsiveWebDesign），以下描述錯(cuò)誤的是（）A.核心技術(shù)包括媒體查詢（MediaQuery）、彈性布局和流體圖片B.需保證同一套代碼在不同設(shè)備上呈現(xiàn)適配效果C.與自適應(yīng)設(shè)計(jì)（AdaptiveDesign）的區(qū)別在于是否動(dòng)態(tài)調(diào)整布局D.必須使用Bootstrap等框架才能實(shí)現(xiàn)4.若要優(yōu)化網(wǎng)站首屏加載速度，以下措施中效果最差的是（）A.對首屏圖片使用WebP格式并壓縮B.將非首屏JavaScript代碼標(biāo)記為`defer`或`async`C.在CSS中使用`@import`引入外部樣式表D.啟用HTTP/2協(xié)議并開啟服務(wù)端推送（ServerPush）5.前端框架Vue.js中，父子組件通信時(shí)，子組件向父組件傳遞數(shù)據(jù)應(yīng)使用（）A.`props`B.`$emit`C.`provide/inject`D.`Vuex`6.以下關(guān)于無障礙設(shè)計(jì)（WCAG）的要求，錯(cuò)誤的是（）A.文字與背景的對比度至少達(dá)到4.5:1（正常文本）B.所有圖片必須添加`alt`屬性，裝飾性圖片`alt`留空C.鍵盤可操作所有交互元素，且焦點(diǎn)狀態(tài)可見D.動(dòng)態(tài)內(nèi)容更新時(shí)，無需向屏幕閱讀器用戶提示7.網(wǎng)站性能指標(biāo)LCP（LargestContentfulPaint）主要衡量（）A.首次內(nèi)容繪制時(shí)間B.最大內(nèi)容繪制時(shí)間C.交互延遲時(shí)間D.資源加載完成時(shí)間8.以下SQL語句中，用于查詢用戶表中年齡在20到30歲之間且性別為女的記錄的是（）A.`SELECTFROMusersWHEREageBETWEEN20AND30ORgender='女'`B.`SELECTFROMusersWHEREageIN(20,30)ANDgender='女'`C.`SELECTFROMusersWHEREageBETWEEN20AND30ANDgender='女'`D.`SELECTFROMusersWHEREage>20ANDage<30ORgender='女'`9.關(guān)于SEO（搜索引擎優(yōu)化），以下做法符合規(guī)范的是（）A.在頁面中添加大量隱藏關(guān)鍵詞（text-indent:-9999px）B.為每個(gè)頁面設(shè)置獨(dú)特的`<title>`和`<metadescription>`C.使用`<h1>`標(biāo)簽重復(fù)品牌名稱，`<h2>`以下標(biāo)簽用于內(nèi)容D.將重要內(nèi)容通過圖片展示，減少文本占比10.若要實(shí)現(xiàn)“當(dāng)用戶滾動(dòng)到頁面底部時(shí)自動(dòng)加載更多內(nèi)容”，最合理的技術(shù)方案是（）A.使用`IntersectionObserverAPI`監(jiān)測底部容器與視口的交集B.綁定`scroll`事件，計(jì)算`document.documentElement.scrollTop+window.innerHeight`是否接近`document.documentElement.scrollHeight`C.使用`setInterval`輪詢滾動(dòng)位置D.通過CSS的`sticky`定位觸發(fā)加載11.以下HTTP狀態(tài)碼中，表示“請求已被接受但未完成處理”的是（）A.202B.301C.404D.50012.在Node.js中，使用`fs`模塊讀取文件時(shí)，以下操作可能導(dǎo)致阻塞的是（）A.`fs.readFile(path,(err,data)=>{})`B.`mises.readFile(path)`C.`constdata=fs.readFileSync(path)`D.`fs.createReadStream(path)`13.關(guān)于Web安全，以下說法錯(cuò)誤的是（）A.XSS攻擊可通過轉(zhuǎn)義用戶輸入內(nèi)容防范B.CSRF攻擊可通過驗(yàn)證`Origin`或`Referer`頭防范C.SQL注入攻擊可通過使用預(yù)編譯語句（PreparedStatement）防范D.HTTPS完全解決了中間人攻擊問題14.設(shè)計(jì)一個(gè)電商網(wǎng)站的商品詳情頁時(shí)，核心交互流程不包括（）A.商品圖片輪播與放大B.規(guī)格選擇（顏色/尺寸）與庫存提示C.用戶評論的分頁加載D.網(wǎng)站首頁的導(dǎo)航菜單設(shè)計(jì)15.以下前端構(gòu)建工具中，最適合用于優(yōu)化代碼體積、混淆變量名的是（）A.WebpackB.ESLintC.BabelD.Prettier二、填空題（每空1分，共20分）1.HTML5中用于定義頁面?zhèn)冗厵诘恼Z義化標(biāo)簽是________。2.CSS盒模型中，`box-sizing:border-box`表示________包含在元素總寬度內(nèi)。3.JavaScript中，`addEventListener`的第三個(gè)參數(shù)`{once:true}`的作用是________。4.響應(yīng)式設(shè)計(jì)中，媒體查詢的語法以________關(guān)鍵字開頭。5.Vue.js中，計(jì)算屬性（computed）與方法（methods）的主要區(qū)別是________。6.網(wǎng)站性能優(yōu)化中，“懶加載”通常用于________資源的延遲加載。7.數(shù)據(jù)庫設(shè)計(jì)的三大范式中，第一范式要求________。8.前端路由的兩種實(shí)現(xiàn)方式是________和________。9.HTTP請求頭中，用于指定客戶端可接受的內(nèi)容類型的字段是________。10.無障礙設(shè)計(jì)中，`aria-label`屬性的作用是________。11.微信小程序的頁面生命周期函數(shù)中，當(dāng)頁面初次渲染完成時(shí)觸發(fā)的是________。12.服務(wù)器端渲染（SSR）的主要優(yōu)勢是________和________。13.移動(dòng)端開發(fā)中，1物理像素（px）與CSS像素（dpx）的換算關(guān)系與________有關(guān)。14.網(wǎng)站訪問量統(tǒng)計(jì)常用的工具包括________（列舉1個(gè)）。三、簡答題（每題6分，共30分）1.簡述HTML語義化的意義，并列舉3個(gè)HTML5新增的語義化標(biāo)簽及其用途。2.說明CSSFlexbox布局與Grid布局的適用場景差異。3.前端性能優(yōu)化的常見策略有哪些？請至少列舉5項(xiàng)并簡要說明。4.什么是跨域？簡述JSONP和CORS解決跨域的原理及區(qū)別。5.用戶體驗(yàn)（UX）設(shè)計(jì)的核心原則有哪些？結(jié)合電商網(wǎng)站首頁設(shè)計(jì)舉例說明。四、綜合題（每題10分，共20分）1.某企業(yè)需開發(fā)官網(wǎng)，包含“首頁”“關(guān)于我們”“產(chǎn)品中心”“新聞動(dòng)態(tài)”“聯(lián)系我們”5個(gè)一級頁面。要求：（1）設(shè)計(jì)網(wǎng)站的信息架構(gòu)（用樹狀圖或文字描述）；（2）說明首頁需包含的核心模塊（至少5個(gè)）；（3）技術(shù)實(shí)現(xiàn)時(shí)，前端選擇Vue.js框架，后端選擇Node.js+MySQL，簡述前后端交互的流程（如接口設(shè)計(jì)、數(shù)據(jù)傳輸格式等）。2.以下是某頁面的部分HTML和CSS代碼，存在性能或體驗(yàn)問題，請指出至少4處問題并提出優(yōu)化建議：```html<!-HTML--><divclass="container"><imgsrc="banner.jpg"width="1920"height="600"alt="首頁banner"><pclass="text">這里是一段很長的文字內(nèi)容，用于介紹企業(yè)服務(wù)...（約500字）</p><divclass="gallery"><imgsrc="img1.jpg"alt="產(chǎn)品圖1"><imgsrc="img2.jpg"alt="產(chǎn)品圖2"><imgsrc="img3.jpg"alt="產(chǎn)品圖3"><!-共10張產(chǎn)品圖--></div></div><!-CSS-->.container{width:1920px;margin:0auto;}.gallery{display:flex;flex-wrap:wrap;}.galleryimg{width:200px;height:200px;object-fit:cover;}.text{line-height:1.2;font-size:14px;}```答案--一、單項(xiàng)選擇題1.B2.B3.D4.C5.B6.D7.B8.C9.B10.A11.A12.C13.D14.D15.A二、填空題1.`<aside>`2.內(nèi)邊距（padding）和邊框（border）3.事件監(jiān)聽器僅觸發(fā)一次后自動(dòng)移除4.`@media`5.計(jì)算屬性基于依賴緩存結(jié)果，方法每次調(diào)用都執(zhí)行6.圖片（或非首屏）7.字段不可再分（原子性）8.哈希路由（Hash）、歷史路由（History）9.`Accept`10.為無障礙設(shè)備（如屏幕閱讀器）提供元素的文本描述11.`onReady`12.更快的首屏加載、更好的SEO13.設(shè)備像素比（DPR）14.GoogleAnalytics（或百度統(tǒng)計(jì)等）三、簡答題1.意義：提升代碼可維護(hù)性，幫助搜索引擎理解內(nèi)容結(jié)構(gòu)，改善無障礙訪問體驗(yàn)。新增標(biāo)簽示例：`<main>`：定義頁面主要內(nèi)容區(qū)域（唯一）；`<article>`：定義獨(dú)立可復(fù)用的內(nèi)容（如文章、帖子）；`<section>`：定義文檔中的一個(gè)區(qū)域（如章節(jié)、模塊）；`<nav>`：定義導(dǎo)航鏈接區(qū)域；`<header>`：定義內(nèi)容的介紹或標(biāo)題區(qū)域（合理列舉3個(gè)即可）。2.Flexbox適用于一維布局（單行或單列），如導(dǎo)航欄、按鈕組等需要控制子元素排列方向、對齊和空間分配的場景；Grid適用于二維布局（行和列同時(shí)控制），如網(wǎng)格狀的產(chǎn)品展示、復(fù)雜頁面布局等需要精確控制行和列軌道的場景。3.常見策略：資源壓縮：圖片（WebP/AVIF格式）、CSS/JS代碼壓縮（減少文件體積）；懶加載：非首屏圖片/視頻延遲加載（減少初始請求）；緩存策略：設(shè)置HTTP緩存頭（如`Cache-Control`），利用ServiceWorker實(shí)現(xiàn)離線緩存；減少HTTP請求：合并CSS/JS文件，使用雪碧圖（CSSSprite）；異步加載：將非關(guān)鍵JS標(biāo)記為`async`或`defer`，使用動(dòng)態(tài)導(dǎo)入（`import()`）；服務(wù)端優(yōu)化：啟用Gzip/Brotli壓縮，使用CDN加速靜態(tài)資源；（列舉5項(xiàng)并簡要說明即可）4.跨域：由于瀏覽器同源策略限制，不同源（協(xié)議、域名、端口任意不同）的資源無法直接交互。JSONP原理：利用`<script>`標(biāo)簽不受同源限制，通過回調(diào)函數(shù)傳遞數(shù)據(jù)（僅支持GET請求）；CORS原理：服務(wù)端通過設(shè)置`Access-Control-Allow-Origin`等響應(yīng)頭，明確允許的源，瀏覽器驗(yàn)證后允許跨域；區(qū)別：JSONP是前端技巧，僅支持GET；CORS是W3C標(biāo)準(zhǔn)，支持所有HTTP方法，需服務(wù)端配合。5.核心原則：可用性：操作流程簡潔，功能直觀（如電商首頁搜索框突出，分類導(dǎo)航清晰）；一致性：視覺風(fēng)格（配色、字體）和交互邏輯統(tǒng)一（如所有按鈕點(diǎn)擊反饋一致）；可訪問性：兼容不同設(shè)備（響應(yīng)式設(shè)計(jì)）和用戶（無障礙支持）；情感化：通過視覺設(shè)計(jì)傳遞品牌調(diào)性（如母嬰類網(wǎng)站用暖色調(diào)提升親切感）；高效性：關(guān)鍵操作路徑短（如“加入購物車”按鈕在商品圖下方，無需滾動(dòng)）。四、綜合題1.（1）信息架構(gòu)：官網(wǎng)根目錄├─首頁├─關(guān)于我們│├─企業(yè)簡介│└─發(fā)展歷程├─產(chǎn)品中心│├─產(chǎn)品分類1│└─產(chǎn)品分類2├─新聞動(dòng)態(tài)│├─公司新聞│└─行業(yè)資訊└─聯(lián)系我們├─聯(lián)系方式└─在線留言（2）首頁核心模塊：導(dǎo)航欄（含5個(gè)一級入口）、輪播圖（品牌/促銷展示）、核心業(yè)務(wù)介紹（短文案+圖標(biāo)）、熱門產(chǎn)品推薦（3-5款）、新聞動(dòng)態(tài)摘要（最新2-3條）、頁腳（版權(quán)+聯(lián)系方式）。（3）前后端交互流程：接口設(shè)計(jì)：采用RESTful風(fēng)格，如`GET/api/products`獲取產(chǎn)品列表，`POST/api/messages`提交留言；數(shù)據(jù)傳輸：使用JSON格式，前端通過`axios`發(fā)送請求，攜帶`Content-Type:application/json`頭；認(rèn)證：用戶登錄后返回JWT令牌，后續(xù)請求在`Authorization`頭中