2025年《網(wǎng)頁制作》期中考試試卷附答案一、單項選擇題（本大題共20小題，每小題2分，共40分。在每小題列出的四個備選項中只有一個是最符合題目要求的，請將其代碼填寫在題后括號內(nèi)）1.以下HTML標簽中，屬于HTML5新增語義化標簽的是（）A.<div>B.<span>C.<article>D.<p>2.若要設置元素的背景顏色為半透明的紅色（透明度0.5），正確的CSS代碼是（）A.background-color:rgba(255,0,0,0.5);B.background-color:ff000050;C.background-color:hsla(0,100%,50%,0.5);D.以上均可3.關于JavaScript事件冒泡的描述，錯誤的是（）A.事件會從最內(nèi)層元素向外層元素傳播B.可以通過event.stopPropagation()阻止冒泡C.所有事件都會觸發(fā)冒泡機制D.父元素綁定的事件可能因子元素事件冒泡而被觸發(fā)4.下列CSS選擇器中，優(yōu)先級最高的是（）A..header-navB.divlogoC.[type="text"]D.p:first-child5.要實現(xiàn)當鼠標懸停在圖片上時，圖片順時針旋轉(zhuǎn)30度的效果，應使用的CSS屬性是（）A.transform:rotate(30deg);B.transition:rotate0.3s;C.animation:rotate0.3s;D.transform:scale(1.1)rotate(30deg);6.關于HTML表單驗證，以下說法正確的是（）A.required屬性僅適用于<input>標簽B.pattern屬性可以通過正則表達式自定義驗證規(guī)則C.瀏覽器默認的驗證提示信息無法修改D.type="email"會驗證輸入內(nèi)容是否包含@符號和.符號7.若要讓一個div元素在頁面中水平垂直居中，且父元素高度不確定，最合理的CSS方案是（）A.margin:0auto;top:50%;left:50%;B.position:absolute;transform:translate(-50%,-50%);C.display:flex;justify-content:center;align-items:center;D.float:left;margin:50%0050%;8.以下JavaScript代碼執(zhí)行后，控制臺輸出的結(jié)果是（）```javascriptletarr=[1,2,3];arr[10]=10;console.log(arr.length);```A.3B.11C.10D.49.關于CSS盒模型的描述，錯誤的是（）A.標準盒模型的width屬性僅包含內(nèi)容區(qū)域B.border-box盒模型的width包含內(nèi)容、內(nèi)邊距和邊框C.margin屬性的百分比值相對于父元素的高度計算D.padding屬性不能設置負值10.要為頁面中所有class為"card"的div元素綁定點擊事件，最簡潔的JavaScript代碼是（）A.document.querySelector('.card').addEventListener('click',func);B.document.getElementsByClassName('card').addEventListener('click',func);C.document.querySelectorAll('.card').forEach(item=>item.addEventListener('click',func));D.document.getElementsByClassName('card')[0].addEventListener('click',func);11.以下HTML結(jié)構(gòu)中，能正確實現(xiàn)圖片與文字同行顯示且文字環(huán)繞圖片的是（）A.<imgsrc="pic.jpg"style="float:left;"><p>文字內(nèi)容</p>B.<imgsrc="pic.jpg"style="display:inline;"><p>文字內(nèi)容</p>C.<divstyle="display:flex;"><imgsrc="pic.jpg"><p>文字內(nèi)容</p></div>D.以上均可12.若要限制輸入框只能輸入1-100之間的整數(shù)，應設置的input屬性是（）A.type="number"min="1"max="100"B.type="text"pattern="[1-9]\d?|100"C.type="tel"maxlength="3"D.以上A和B均可13.以下CSS代碼中，能實現(xiàn)元素從左側(cè)滑入動畫的是（）A.@keyframesslideIn{from{transform:translateX(-100%);}to{transform:translateX(0);}}B.@keyframesslideIn{from{margin-left:-100%;}to{margin-left:0;}}C.@keyframesslideIn{from{left:-100%;}to{left:0;}}D.以上均可14.關于JavaScript中this指向的描述，錯誤的是（）A.全局作用域中的this指向window對象（非嚴格模式）B.對象方法中的this指向該對象C.箭頭函數(shù)中的this繼承自外層作用域D.使用call()調(diào)用函數(shù)時，this指向第一個參數(shù)以外的參數(shù)15.要實現(xiàn)響應式布局中，當屏幕寬度小于768px時隱藏導航欄，應使用的媒體查詢是（）A.@media(max-width:768px){.nav{display:none;}}B.@media(min-width:768px){.nav{display:none;}}C.@media(orientation:portrait){.nav{display:none;}}D.@media(device-width:768px){.nav{display:none;}}16.以下HTML標簽中，用于定義表格標題的是（）A.<th>B.<caption>C.<thead>D.<tfoot>17.若要禁止文本輸入框被用戶調(diào)整大小，應設置的CSS屬性是（）A.resize:none;B.overflow:hidden;C.white-space:nowrap;D.text-overflow:ellipsis;18.以下JavaScript代碼執(zhí)行后，變量x的值是（）```javascriptletx=0;for(leti=0;i<5;i++){if(i%2===0)continue;x+=i;}```A.6B.4C.3D.519.關于CSS變量的使用，正確的代碼是（）A.:root{--main-color:ff0000;}.box{color:var(--main-color);}B.:root{main-color:ff0000;}.box{color:main-color;}C.:root{--main-color:ff0000;}.box{color:--main-color;}D.:root{$main-color:ff0000;}.box{color:$main-color;}20.要實現(xiàn)點擊按鈕后，頁面平滑滾動到指定錨點的效果，需要使用的CSS屬性或JavaScript方法是（）A.scroll-behavior:smooth;B.element.scrollIntoView({behavior:'smooth'});C.window.scrollTo({top:offset,behavior:'smooth'});D.以上均可二、填空題（本大題共10小題，每小題2分，共20分。請將答案填寫在題中橫線上）1.HTML文檔的根元素是__________。2.CSS中用于設置元素透明度的屬性是__________（不考慮rgba）。3.JavaScript中用于獲取當前頁面URL的對象屬性是__________。4.要實現(xiàn)元素在頁面滾動時固定在頂部，應設置的CSS屬性是__________。5.HTML5中用于繪制圖形的標簽是__________。6.CSSFlexbox布局中，控制子元素換行方式的屬性是__________。7.JavaScript中用于阻止事件默認行為的方法是__________。8.要設置段落首行縮進2個字符，應使用的CSS屬性是__________。9.HTML表單中，用于隱藏字段的輸入類型是__________。10.CSS中，相鄰兄弟選擇器使用的符號是__________。三、判斷題（本大題共10小題，每小題1分，共10分。正確的打“√”，錯誤的打“×”）1.所有HTML標簽都必須有閉合標簽。（）2.CSS的!important規(guī)則可以覆蓋內(nèi)聯(lián)樣式。（）3.JavaScript的var聲明的變量具有塊級作用域。（）4.響應式設計中，viewport元標簽的作用是設置頁面在移動設備上的初始縮放比例。（）5.偽類:visited可以修改鏈接訪問后的字體顏色、背景顏色等所有樣式。（）6.在CSS中，margin屬性可以設置負值。（）7.JavaScript的數(shù)組可以通過length屬性動態(tài)調(diào)整大小。（）8.HTML5的<video>標簽必須包含<source>子標簽才能指定視頻源。（）9.CSSGrid布局適用于一維布局，F(xiàn)lexbox適用于二維布局。（）10.JavaScript中，使用===進行比較時會同時比較值和類型。（）四、簡答題（本大題共5小題，每小題6分，共30分）1.簡述HTML語義化的作用，并列舉3個HTML5新增的語義化標簽。2.比較CSS中Flexbox布局和Grid布局的主要區(qū)別及適用場景。3.說明JavaScript中事件委托（事件代理）的原理及優(yōu)勢。4.列舉至少4種實現(xiàn)CSS垂直居中的方法，并說明各自的適用場景。5.解釋響應式設計的核心思想，并說明實現(xiàn)響應式布局的3種主要技術手段。五、操作題（本大題共2小題，每小題20分，共40分。請根據(jù)要求編寫代碼或描述實現(xiàn)步驟）1.請使用HTML、CSS和JavaScript實現(xiàn)一個響應式導航欄，要求：（1）包含Logo區(qū)域（文本“MyLogo”）、5個導航鏈接（首頁、產(chǎn)品、案例、關于、聯(lián)系）、搜索框；（2）PC端（屏幕寬度≥768px）導航欄水平排列，Logo在左側(cè)，導航鏈接居中，搜索框在右側(cè)；（3）移動端（屏幕寬度<768px）導航欄變?yōu)榇怪迸帕?，導航鏈接默認隱藏，點擊“菜單”按鈕后展開；（4）搜索框支持輸入內(nèi)容，點擊搜索圖標（可用文字“搜索”代替）后彈出提示框顯示輸入內(nèi)容。2.請編寫代碼實現(xiàn)一個動態(tài)加載圖片的功能，要求：（1）頁面初始加載時顯示3張默認圖片（路徑自定）；（2）頁面底部有“加載更多”按鈕，點擊后異步加載2張新圖片（使用模擬數(shù)據(jù)）；（3）當沒有更多圖片可加載時，按鈕變?yōu)椤耙鸭虞d所有圖片”并禁用；（4）使用JavaScript的fetchAPI模擬數(shù)據(jù)請求（假設接口返回{code:200,data:[{url:'img4.jpg'},{url:'img5.jpg'}]}格式）；（5）圖片加載過程中顯示“加載中...”提示，加載完成后隱藏。參考答案一、單項選擇題1-5:CDBBA6-10:CCBCC11-15:DDADA16-20:BADAD（注：第15題正確選項為A，第20題正確選項為D）二、填空題1.<html>2.opacity3.window.location.href4.position:fixed5.<canvas>6.flex-wrap7.event.preventDefault()8.text-indent:2em9.type="hidden"10.+三、判斷題1.×2.×3.×4.√5.×6.√7.√8.×9.×10.√四、簡答題（要點）1.作用：提升可訪問性、利于SEO、代碼可維護性。新增標簽：<header>、<footer>、<nav>、<article>、<section>（任意3個）。2.區(qū)別：Flexbox是一維布局（單行/列），Grid是二維布局（行列組合）。適用場景：Flexbox適合線性排列（導航、表單），Grid適合復雜網(wǎng)格（頁面布局、圖片墻）。3.原理：利用事件冒泡，將事件監(jiān)聽器綁定到父元素，通過e.target判斷目標元素。優(yōu)勢：減少事件監(jiān)聽器數(shù)量、動態(tài)添加的子元素自動生效、提高性能。4.方法：（1）Flexbox：父元素display:flex+align-items:center（適用塊級容器）；（2）絕對定位+transform：position:absolute+top:50%+transform:translateY(-50%)（父元素有定位）；（3）行高法：line-height等于容器高度（單行文本）；（4）表格布局：父元素display:table-cell+vertical-align:middle（兼容舊瀏覽器）。5.核心思想：一個頁面適配多種設備。技術手段：媒體查詢（@media）、彈性布局（百分比/Flexbox/Grid）、圖片響應（srcset/sizes）、視口設置（viewport元標簽）。五、操作題（示例代碼）1.響應式導航欄實現(xiàn)：```html<navclass="navbar"><divclass="logo">MyLogo</div><divclass="nav-links"><ahref="">首頁</a><ahref="">產(chǎn)品</a><ahref="">案例</a><ahref="">關于</a><ahref="">聯(lián)系</a></div><divclass="search-box"><inputtype="text"placeholder="搜索..."><buttonclass="search-btn">搜索</button></div><buttonclass="menu-btn">菜單</button></nav><style>.navbar{padding:1rem2rem;display:flex;align-items:center;justify-content:space-between;background:fff;border-bottom:1pxsolideee;}.nav-links{display:flex;gap:2rem;}.search-box{display:flex;gap:0.5rem;}.menu-btn{display:none;}@media(max-width:768px){.navbar{flex-direction:column;align-items:flex-start;}.nav-links{display:none;flex-direction:column;gap:1rem;margin:1rem0;}.search-box{display:none;flex-direction:column;width:100%;}.menu-btn{display:block;position:absolute;top:1rem;right:2rem;}.nav-links.active,.search-box.active{display:flex;}}</style><script>constmenuBtn=document.querySelector('.menu-btn');constnavLinks=document.querySelector('.nav-links');constsearchBox=document.querySelector('.search-box');menuBtn.addEventListener('click',()=>{navLinks.classList.toggle('active');searchBox.classList.toggle('active');});document.querySelector('.search-btn').addEventListener('click',()=>{constkeyword=document.querySelector('input').value;alert(`搜索內(nèi)容：${keyword}`);});</script>```2.動態(tài)加載圖片功能實現(xiàn)：```html<divclass="image-container"><imgsrc="img1.jpg"alt="圖片1"><imgsrc="img2.jpg"alt="圖片2"><imgsrc="img3.jpg"alt="圖片3"></div><divclass="loading-tip"style="display:none;">加載中...</div><buttonid="loadMore">加載更多</button><script>letcurrentPage=1;consttotalPages=2;//假設最多2頁（初始3張+2頁×2張=7張）constimageContainer=document.querySelector('.image-container');constloadMoreBtn=document.getElementById('loadMore');constl