2025年網(wǎng)頁制作期中考試試卷附答案一、單項選擇題（每題2分，共20分）1.以下哪項是HTML5新增的語義化標(biāo)簽？A.`<div>`B.`<section>`C.`<span>`D.`<strong>`2.CSS中，設(shè)置元素背景顏色為半透明紅色（透明度0.5）的正確寫法是？A.`background-color:rgba(255,0,0,0.5)`B.`background-color:ff000050`C.`background-color:hsla(0,100%,50%,0.5)`D.以上均正確3.關(guān)于Flex布局，以下說法錯誤的是？A.父容器設(shè)置`display:flex`后，子元素默認(rèn)水平排列B.`justify-content:space-around`會使子元素之間的間距相等，首尾間距為中間間距的一半C.`align-items:center`用于控制子元素在交叉軸上的居中對齊D.子元素設(shè)置`flex:1`表示占據(jù)父容器剩余空間的1/34.響應(yīng)式設(shè)計中，媒體查詢`@media(max-width:768px)`的作用是？A.當(dāng)屏幕寬度大于768px時應(yīng)用樣式B.當(dāng)屏幕寬度小于等于768px時應(yīng)用樣式C.僅在平板設(shè)備上應(yīng)用樣式D.僅在橫向屏幕時應(yīng)用樣式5.JavaScript中，`letarr=[1,2,3];arr.push(4)`執(zhí)行后，`arr`的值是？A.`[1,2,3,4]`B.`[4,1,2,3]`C.`[1,2,4,3]`D.`[1,4,2,3]`6.以下哪項不是CSS盒模型的組成部分？A.內(nèi)容區(qū)域（content）B.內(nèi)邊距（padding）C.滾動條（scrollbar）D.邊框（border）7.HTML中，設(shè)置圖片無法加載時的替代文本應(yīng)使用哪個屬性？A.`title`B.`alt`C.`src`D.`href`8.關(guān)于CSS選擇器優(yōu)先級，以下從高到低排列正確的是？A.行內(nèi)樣式>ID選擇器>類選擇器>標(biāo)簽選擇器B.ID選擇器>行內(nèi)樣式>類選擇器>標(biāo)簽選擇器C.類選擇器>ID選擇器>行內(nèi)樣式>標(biāo)簽選擇器D.標(biāo)簽選擇器>類選擇器>ID選擇器>行內(nèi)樣式9.JavaScript中，`document.getElementById('box')`返回的是？A.所有id為“box”的元素數(shù)組B.第一個id為“box”的元素C.一個HTML元素對象D.字符串“box”10.以下哪種方式可以實現(xiàn)CSS元素的水平垂直居中？A.`position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)`B.`margin:0auto;`C.`text-align:center;vertical-align:middle`D.`display:flex;justify-content:flex-start;align-items:flex-end`二、填空題（每題3分，共15分）1.HTML5中用于定義頁面導(dǎo)航區(qū)域的語義化標(biāo)簽是__________。2.CSS中，`box-sizing:border-box`表示盒模型的寬度包含__________、__________和內(nèi)容區(qū)域。3.JavaScript中，`const`聲明的變量不可重新__________，但對象屬性可以修改。4.響應(yīng)式設(shè)計中，常用的斷點（breakpoint）768px通常對應(yīng)__________設(shè)備的屏幕寬度。5.CSS中，使用__________屬性可以為元素添加過渡動畫（至少寫出屬性名）。三、判斷題（每題2分，共10分）1.所有HTML元素都需要閉合標(biāo)簽（如`</p>`）。（）2.CSS中，`!important`規(guī)則可以覆蓋行內(nèi)樣式的優(yōu)先級。（）3.JavaScript的`addEventListener`默認(rèn)在事件冒泡階段觸發(fā)回調(diào)。（）4.移動端網(wǎng)頁設(shè)計中，`viewport`元標(biāo)簽的`initial-scale=1`表示頁面初始縮放比例為100%。（）5.Flex布局中，子元素設(shè)置`flex-shrink:0`表示該元素不可收縮。（）四、簡答題（每題5分，共25分）1.簡述HTML5語義化標(biāo)簽的作用（至少列出3點）。2.說明CSS中`flex`屬性的簡寫形式及各值的含義（如`flex:12300px`）。3.比較響應(yīng)式設(shè)計（ResponsiveDesign）與自適應(yīng)設(shè)計（AdaptiveDesign）的核心區(qū)別。4.列舉JavaScript中數(shù)組的5種常用方法（如`push`），并說明其功能。5.解釋CSS中“層疊”（Cascade）的含義，并舉例說明優(yōu)先級沖突時的解決規(guī)則。五、操作題（共30分）題目：制作一個響應(yīng)式導(dǎo)航欄要求：（1）使用HTML5語義化標(biāo)簽（如`<nav>`）；（2）包含Logo區(qū)域（文本“Logo”）、主導(dǎo)航鏈接（“首頁”“產(chǎn)品”“關(guān)于”“聯(lián)系”）、搜索框（輸入框+搜索按鈕）；（3）PC端（≥768px）導(dǎo)航鏈接水平排列，搜索框位于右側(cè)；（4）移動端（<768px）導(dǎo)航鏈接折疊為漢堡菜單（三橫線圖標(biāo)），點擊后展開/收起；（5）使用CSSFlex布局實現(xiàn)主體結(jié)構(gòu)；（6）添加基礎(chǔ)樣式（如背景色、內(nèi)邊距、字體大?。唬?）用JavaScript實現(xiàn)漢堡菜單的交互功能。參考答案一、單項選擇題1.B2.D3.D4.B5.A6.C7.B8.A9.C10.A二、填空題1.`<nav>`2.邊框（border）、內(nèi)邊距（padding）3.賦值（或“重新賦值”“修改指向”）4.平板（或“移動端平板”）5.`transition`（或`transition-property`等具體屬性）三、判斷題1.×（如`<img>`、`<br>`等空元素?zé)o需閉合）2.×（行內(nèi)樣式優(yōu)先級高于`!important`，除非行內(nèi)樣式也使用`!important`）3.√（默認(rèn)冒泡階段，可通過第三個參數(shù)`{capture:true}`改為捕獲階段）4.√5.√四、簡答題1.作用：①提升頁面可訪問性（屏幕閱讀器更易解析）；②優(yōu)化搜索引擎SEO（明確內(nèi)容結(jié)構(gòu)）；③提高代碼可維護(hù)性（語義化標(biāo)簽更易理解）；④減少冗余的CSS類名（通過標(biāo)簽本身傳遞結(jié)構(gòu)信息）。2.`flex`屬性是`flex-grow`、`flex-shrink`、`flex-basis`的簡寫。示例`flex:12300px`中，`1`為放大比例（子元素分配剩余空間的比例），`2`為縮小比例（空間不足時的收縮比例），`300px`為基準(zhǔn)寬度（元素在分配空間前的初始大?。?.核心區(qū)別：響應(yīng)式設(shè)計通過媒體查詢和彈性布局，使同一套代碼適配不同屏幕（“一套代碼多端顯示”）；自適應(yīng)設(shè)計則針對不同設(shè)備（如PC、平板、手機(jī)）提供多套獨立的代碼或樣式（“多套代碼按需加載”）。4.示例：①`pop()`：刪除數(shù)組最后一個元素并返回；②`shift()`：刪除數(shù)組第一個元素并返回；③`map()`：遍歷數(shù)組并返回新數(shù)組（每個元素經(jīng)函數(shù)處理后的值）；④`filter()`：返回符合條件的元素組成的新數(shù)組；⑤`reduce()`：累加數(shù)組元素，返回最終計算結(jié)果。5.層疊指當(dāng)多個CSS規(guī)則作用于同一元素的同一屬性時，瀏覽器按優(yōu)先級選擇最終樣式的機(jī)制。優(yōu)先級規(guī)則：行內(nèi)樣式（1000）>ID選擇器（100）>類/屬性/偽類選擇器（10）>標(biāo)簽/偽元素選擇器（1）>通配符（0）；若優(yōu)先級相同，后定義的規(guī)則覆蓋先定義的；`!important`可提升規(guī)則優(yōu)先級（但低于行內(nèi)樣式的`!important`）。例如：`.box{color:red;}`與`p.box{color:blue;}`作用于`<pclass="box">`時，后者優(yōu)先級更高（標(biāo)簽+類=11>類=10），文字顯示藍(lán)色。五、操作題（代碼示例）HTML部分：```html<navclass="navbar"><divclass="logo">Logo</div><divclass="nav-links"id="navLinks"><ahref="">首頁</a><ahref="">產(chǎn)品</a><ahref="">關(guān)于</a><ahref="">聯(lián)系</a></div><divclass="search-box"><inputtype="text"placeholder="搜索..."><button>搜索</button></div><buttonclass="menu-btn"id="menuBtn">?</button></nav>```CSS部分：```css.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem2rem;background:2c3e50;color:white;}.logo{font-size:1.5rem;font-weight:bold;}.nav-links{display:flex;gap:2rem;margin:01rem;}.nav-linksa{color:white;text-decoration:none;}.search-box{display:flex;gap:0.5rem;}.search-boxinput{padding:0.3rem0.5rem;border:none;border-radius:4px;}.search-boxbutton{padding:0.3rem1rem;background:3498db;border:none;border-radius:4px;color:white;cursor:pointer;}.menu-btn{display:none;background:none;border:none;color:white;font-size:1.5rem;cursor:pointer;}/移動端樣式/@media(max-width:768px){.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:2c3e50;padding:1rem;gap:1rem;}.nav-linksa{padding:0.5rem;border-bottom:1pxsolid455a64;}.search-box{display:none;/移動端可隱藏或調(diào)整搜索框位置，此處簡化處理/}.menu-btn{display:block;}.nav-links.active{display:flex;}}```JavaScript部分：```javascriptconstmenuBtn=document.getElementById('menuBtn');constnavLinks=document.getElementById('navLin