站名：站名：年級專業(yè)：姓名：學號：凡年級專業(yè)、姓名、學號錯寫、漏寫或字跡不清者，成績按零分記?！堋狻€…………第1頁，共1頁阿克蘇職業(yè)技術(shù)學院

《WEB前端開發(fā)》2025年第二學期期末試卷題號一二三四總分得分一、單項選擇題（本大題共15小題，每小題2分，共30分．每小題只有一項符合題目要求，請將答案序號填在題后括號內(nèi)．）1、下列不屬于HTML5新增語義化標簽的是（）A.<header>B.<div>C.<nav>D.<footer>2、CSS中，用于設(shè)置元素浮動效果的屬性是（）A.positionB.floatC.displayD.z-index3、JavaScript中，聲明變量的關(guān)鍵字不包括（）A.varB.letC.constD.function（用于聲明函數(shù)）4、下列關(guān)于CSS選擇器優(yōu)先級的說法，正確的是（）A.元素選擇器（如p）優(yōu)先級高于類選擇器（如.box）B.ID選擇器（如#title）優(yōu)先級高于內(nèi)聯(lián)樣式（style屬性）C.內(nèi)聯(lián)樣式優(yōu)先級高于ID選擇器D.類選擇器優(yōu)先級高于ID選擇器5、HTML中，用于定義表格行的標簽是（）A.<table>B.<tr>C.<td>D.<th>6、JavaScript中，用于獲取HTML元素的方法是（）A.getElementById()B.createElement()（用于創(chuàng)建元素）C.appendChild()（用于添加子元素）D.setAttribute()（用于設(shè)置屬性）7、CSS3中，用于實現(xiàn)元素過渡動畫效果的屬性是（）A.transitionB.animation（用于關(guān)鍵幀動畫）C.transform（用于元素變形）D.opacity（用于設(shè)置透明度）8、下列關(guān)于Vue.js的說法，錯誤的是（）A.Vue.js是一款漸進式JavaScript框架B.Vue.js的核心特性包括數(shù)據(jù)雙向綁定C.Vue.js中，v-model指令用于實現(xiàn)表單元素與數(shù)據(jù)的雙向綁定D.Vue.js不需要引入任何文件，可直接在HTML中使用9、HTML中，<form>標簽的method屬性用于指定（）A.表單提交的目標URLB.表單提交的HTTP方法（如GET/POST）C.表單元素的名稱D.表單的樣式10、CSS中，用于清除元素浮動帶來的影響的方法是（）A.給父元素添加clear:

bothB.給父元素添加overflow:

hiddenC.給子元素添加float:

noneD.給子元素添加display:

block11、JavaScript中，用于處理數(shù)組遍歷的方法是（）A.forEach()B.push()（用于添加數(shù)組元素）C.pop()（用于刪除數(shù)組最后一個元素）D.join()（用于將數(shù)組轉(zhuǎn)為字符串）12、下列不屬于響應式布局核心實現(xiàn)方式的是（）A.媒體查詢（@media）B.彈性盒模型（Flexbox）C.固定像素寬度（如width:

1200px）D.網(wǎng)格布局（Grid）13、HTML5中，用于播放視頻的標簽是（）A.<audio>B.<video>C.<embed>D.<object>14、JavaScript中，用于處理異步操作的對象是（）A.PromiseB.ArrayC.StringD.Number15、CSS中，用于設(shè)置元素盒模型的屬性是（）A.box-sizingB.marginC.paddingD.border二、多項選擇題（本大題共5小題，每小題3分，共15分．每小題有多項符合題目要求，多選、少選、錯選均不得分．）1、HTML5新增的功能特性包括（）A.語義化標簽（如<article>、<section>）B.本地存儲（localStorage、sessionStorage）C.畫布元素（<canvas>，用于繪制圖形）D.表單新類型（如type="email"、type="date"）E.新增<div>標簽（非HTML5新增，早期HTML已存在）2、CSS彈性盒模型（Flexbox）中，常用的容器屬性包括（）A.display:

flex（將元素設(shè)為彈性容器）B.justify-content（設(shè)置主軸方向的對齊方式）C.align-items（設(shè)置交叉軸方向的對齊方式）D.flex-direction（設(shè)置主軸方向）E.flex（用于彈性項目的屬性，非容器屬性）3、JavaScript中，事件處理的方式包括（）A.內(nèi)聯(lián)事件（如<button

onclick="func()">）B.DOM屬性綁定（如element.onclick

=

func）C.事件監(jiān)聽器（如element.addEventListener(click,

func)）D.使用window.onload（用于頁面加載完成事件）E.使用console.log()（用于打印日志，非事件處理）4、下列屬于前端框架的有（）A.Vue.jsB.ReactC.AngularD.jQuery（屬于JavaScript庫，非框架）E.Bootstrap（屬于CSS框架，非JavaScript框架）5、響應式布局中，媒體查詢（@media）的作用包括（）A.根據(jù)不同設(shè)備屏幕尺寸（如寬度、高度）應用不同CSS樣式B.實現(xiàn)移動端、平板、PC端的布局適配C.隱藏或顯示特定屏幕尺寸下的元素D.調(diào)整元素的字體大小、間距等樣式E.僅能用于調(diào)整字體顏色，無法改變布局結(jié)構(gòu)三、判斷題（本大題共5小題，每小題2分，共10分．正確的打“√”，錯誤的打“×”．）1、HTML是一種標記語言，用于定義網(wǎng)頁的結(jié)構(gòu)，不能直接實現(xiàn)動態(tài)效果。（）2、CSS中，position:

absolute的元素會相對于最近的已定位祖先元素進行定位，若沒有則相對于瀏覽器窗口定位。（）3、JavaScript中，let和const聲明的變量具有塊級作用域，var聲明的變量不具有塊級作用域。（）4、Vue.js中，組件是可復用的Vue實例，可將頁面拆分為多個獨立的功能模塊。（）5、響應式布局的核心是“一套代碼適配所有設(shè)備”，無需為不同設(shè)備單獨編寫代碼。（）四、簡答題（本大題共3小題，共20分）1、（本題7分）請簡述HTML、CSS、JavaScript在WEB前端開發(fā)中的各自作用，分析三者的協(xié)作關(guān)系（如HTML搭建結(jié)構(gòu)、CSS美化樣式、JavaScript實現(xiàn)交互），舉例說明如何通過三者配合實現(xiàn)一個“點擊按鈕改變文本顏色”的功能（需寫出核心代碼片段）。2、（本題7分）什么是CSS盒模型？簡述標準盒模型與IE盒模型的區(qū)別（如box-sizing屬性值、寬度計算方式），分析在實際開發(fā)中如何選擇合適的盒模型（至少2種場景，如團隊協(xié)作統(tǒng)一規(guī)范、兼容舊項目），舉例說明如何通過CSS設(shè)置元素的內(nèi)邊距、邊框和外邊距（寫出核心代碼）。3、（本題6分）簡述Vue.js的核心特性（至少3個，如數(shù)據(jù)雙向綁定、組件化、指令系統(tǒng)），分析Vue.js中v-bind和v-on指令的作用（分別舉例說明），說明Vue.js項目的基本目錄結(jié)構(gòu)（至少4個核心目錄/文件，如src、components、main.js）。五、實操題（本大題共1小題，25分．需寫出核心代碼及思路說明，可使用HTML、CSS、JavaScript或Vue.js實現(xiàn)）需求：實現(xiàn)一個“校園新聞列表”頁面1、頁面結(jié)構(gòu)要求（10分）：（1）包含頁頭（<header>），顯示“阿克蘇職業(yè)技術(shù)學院校園新聞”標題；（2）包含導航欄（<nav>），有“首頁”?“校園動態(tài)”?“通知公告”?“學術(shù)活動”4個導航項；（3）包含新聞列表區(qū)（<section>），顯示5條新聞，每條新聞包含“標題”?“發(fā)布時間”?“摘要”三部分；（4）包含頁腳（<footer>），顯示“版權(quán)所有?2025阿克蘇職業(yè)技術(shù)學院”。2、樣式要求（8分）：（1）使用CSSFlexbox或Grid實現(xiàn)導航欄橫向排列，導航項hover時顯示下劃線效果；（2）新聞列表項之間有10px間距，發(fā)布時間為灰色小字體，標題為黑色加粗字體；（3）頁面寬度不超過1200px，居中顯示；（4）實現(xiàn)響應式效果：屏幕寬度小于768px時，導航欄縱向排列，新聞標題字體縮小。3、交互要求（7分）：（1）使用JavaScript實現(xiàn)“點擊新聞標題彈出新聞詳情”的功能（彈出al