HTML與CSS網(wǎng)頁設(shè)計課程復(fù)習(xí)題集引言核心知識點(diǎn)語義化標(biāo)簽：`<header>``<nav>``<main>``<section>``<article>``<footer>`等標(biāo)簽的場景化使用。常見元素：`<a>`（含`href`/`target`）、`<img>`（含`src`/`alt`）、列表（`<ul>`/`<ol>`）、表格（`<table>`/`<tr>`/`<td>`）、表單（`<form>`/`<input>`/`<textarea>`/`<select>`）。表單驗(yàn)證：`required`/`pattern`/`minlength`等原生屬性的作用。一、選擇題C.作用是告知瀏覽器使用何種文檔類型解析頁面2.語義化標(biāo)簽`<article>`最適合的使用場景是（）A.網(wǎng)站的頂部導(dǎo)航欄B.一篇獨(dú)立的博客文章C.頁面的側(cè)邊欄廣告區(qū)D.頁面的底部版權(quán)信息二、簡答題2.表單元素`<inputtype="email">`與普通文本輸入框的區(qū)別是什么？如何結(jié)合`pattern`屬性實(shí)現(xiàn)自定義郵箱格式驗(yàn)證？三、實(shí)操題頂部`<header>`（含網(wǎng)站標(biāo)題和導(dǎo)航`<nav>`）；主體`<main>`（左側(cè)為`<article>`承載文章內(nèi)容，右側(cè)為`<aside>`承載側(cè)邊欄信息）；底部`<footer>`（含版權(quán)聲明）。第二章CSS基礎(chǔ)與樣式應(yīng)用核心知識點(diǎn)引入方式：內(nèi)聯(lián)樣式（`style`屬性）、內(nèi)部樣式（`<style>`標(biāo)簽）、外部樣式（`link`標(biāo)簽）的優(yōu)先級與適用場景。選擇器：元素選擇器、類選擇器（`.`）、ID選擇器（`#`）、后代/子代選擇器（``/`>`）、偽類（`:hover`/`:first-child`）、偽元素（`::before`/`::after`）。盒模型：標(biāo)準(zhǔn)盒模型（`content-box`）與怪異盒模型（`border-box`）的計算邏輯，`margin`/`padding`/`border`的作用。文本與背景：`font-family`/`text-align`/`line-height`，`background-image`/`background-size`/`background-position`。一、選擇題1.以下CSS選擇器優(yōu)先級最高的是（）A.`div.box`（后代選擇器）B.`#header.nava`（后代+ID+類）C.`button:hover`（偽類）D.`p::first-line`（偽元素）2.若元素設(shè)置`box-sizing:border-box;width:200px;padding:10px;border:5pxsolid#000;`，則元素實(shí)際內(nèi)容寬度為（）A.200pxB.180pxC.170pxD.220px二、簡答題1.簡述CSS選擇器的“優(yōu)先級計算規(guī)則”，并舉例說明（如內(nèi)聯(lián)樣式、ID選擇器、類選擇器的優(yōu)先級對比）。2.對比`background-size:cover`與`contain`的區(qū)別，如何讓背景圖在容器內(nèi)水平垂直居中？三、實(shí)操題1.編寫一個類選擇器`.card`，要求：寬度200px，高度300px；內(nèi)邊距15px，邊框?yàn)?px實(shí)線#ccc，外邊距20px；背景色為#f9f9f9，文本居中對齊，行高與高度一致（實(shí)現(xiàn)垂直居中）。請計算該元素在標(biāo)準(zhǔn)盒模型下的總寬度和總高度。2.實(shí)現(xiàn)一個按鈕，要求：默認(rèn)背景色為#4285f4，hover時背景色變?yōu)?3367d6，過渡效果持續(xù)0.3秒；點(diǎn)擊時（`:active`）背景色變?yōu)?2557a7。需用CSS過渡實(shí)現(xiàn)顏色平滑變化。第三章布局技術(shù)與定位核心知識點(diǎn)浮動（`float`）：脫離文檔流的影響，`clear`屬性或偽元素（`.clearfix`）清除浮動的原理。定位（`position`）：`relative`/`absolute`/`fixed`/`sticky`的定位參考系與層級（`z-index`）。Flex布局：容器屬性（`flex-direction`/`justify-content`/`align-items`）、項(xiàng)目屬性（`flex-grow`/`order`）。Grid布局：二維布局的核心（`grid-template-columns`/`grid-gap`），與Flex的適用場景差異。一、選擇題1.以下關(guān)于浮動（`float`）的描述，錯誤的是（）A.浮動元素會脫離正常文檔流，導(dǎo)致父元素高度塌陷B.`clear:both`可清除元素左右兩側(cè)的浮動影響C.浮動元素的兄弟元素若為塊級元素，會自動占據(jù)其下方空間D.可通過給父元素設(shè)置`overflow:hidden`清除浮動2.Flex布局中，`justify-content:space-between`的作用是（）A.項(xiàng)目在主軸上居中，兩側(cè)留白相等B.項(xiàng)目在主軸上均勻分布，首尾項(xiàng)目貼邊C.項(xiàng)目在主軸上均勻分布，包括首尾項(xiàng)目的外側(cè)D.項(xiàng)目在主軸上堆疊，僅保留最小間距二、簡答題1.如何用Flex布局實(shí)現(xiàn)“子元素在父容器中水平+垂直居中”？寫出關(guān)鍵CSS代碼。2.對比Flex與Grid布局的適用場景，分別舉一個典型案例（如導(dǎo)航欄、儀表盤布局）。三、實(shí)操題1.用Flex布局實(shí)現(xiàn)一個“三列等高”的布局：左側(cè)寬度200px，中間自適應(yīng)，右側(cè)寬度150px，三列背景色分別為#f00、#0f0、#00f，要求高度隨內(nèi)容自動撐開且保持一致。2.用Grid布局實(shí)現(xiàn)一個響應(yīng)式卡片網(wǎng)格：PC端顯示3列，平板端（768px以下）顯示2列，手機(jī)端（480px以下）顯示1列，卡片之間的間距為20px，卡片包含標(biāo)題和內(nèi)容區(qū)域。第四章響應(yīng)式設(shè)計與高級特性核心知識點(diǎn)響應(yīng)式基礎(chǔ)：`viewport`元標(biāo)簽（`width=device-width,initial-scale=1.0`）、媒體查詢（`@media(max-width:768px){}`）。彈性單位：`rem`（基于根元素字體大?。?、`vw`/`vh`（基于視口寬高）、`em`（基于父元素字體大?。?。動態(tài)效果：過渡（`transition`）、動畫（`animation`）、變換（`transform:rotate()`/`scale()`）。一、選擇題1.以下關(guān)于`rem`的描述，正確的是（）A.`rem`的基準(zhǔn)是父元素的`font-size`C.`rem`無法用于設(shè)置寬度（`width`）屬性D.`rem`比`px`更適合做固定尺寸的布局2.媒體查詢`@media(min-width:768px)and(max-width:1024px){}`的作用是（）A.僅在屏幕寬度小于768px時生效B.僅在屏幕寬度大于1024px時生效C.在屏幕寬度768px~1024px之間時生效D.始終生效二、簡答題1.簡述響應(yīng)式設(shè)計的“移動優(yōu)先”原則，如何通過媒體查詢實(shí)現(xiàn)從移動端到PC端的布局適配？2.對比`transition`與`animation`的區(qū)別，各舉一個使用場景。三、實(shí)操題1.實(shí)現(xiàn)一個響應(yīng)式導(dǎo)航欄：PC端：導(dǎo)航項(xiàng)水平排列，間距20px；平板端（≤768px）：導(dǎo)航項(xiàng)變?yōu)閮尚?，每行最?個；手機(jī)端（≤480px）：導(dǎo)航項(xiàng)隱藏，顯示一個“漢堡菜單”按鈕（點(diǎn)擊可展開，此處只需寫樣式，交互邏輯用CSS偽類模擬即可）。2.用`transform`和`animation`實(shí)現(xiàn)一個加載動畫：一個圓形元素繞自身中心旋轉(zhuǎn)，同時放大縮?。╜scale`），動畫持續(xù)3秒，無限循環(huán)。第五章綜合應(yīng)用與調(diào)試核心知識點(diǎn)調(diào)試技巧：ChromeDevTools的“元素審查”“樣式調(diào)試”“網(wǎng)絡(luò)面板”定位問題（如樣式不生效、布局錯位）。代碼優(yōu)化：語義化標(biāo)簽提升可訪問性，減少重繪回流（如避免頻繁修改`width`/`height`，用`transform`替代）。一、簡答題1.當(dāng)CSS樣式不生效時，列舉3種可能的原因及排查方法（如選擇器錯誤、優(yōu)先級問題、文件引入失?。?。2.簡述“重繪”與“回流”的區(qū)別，如何通過CSS優(yōu)化減少性能消耗？二、實(shí)操題請完成一個完整的網(wǎng)頁結(jié)構(gòu)，要求：頁面結(jié)構(gòu)：`<header>`（含logo和導(dǎo)航，導(dǎo)航在PC端水平，移動端隱藏為漢堡菜單）、`<main>`（左側(cè)文章區(qū)用`<article>`，右側(cè)側(cè)邊欄用`<aside>`，移動端堆疊）、`<footer>`（居中顯示版權(quán)信息）。布局技術(shù)：使用Flex布局實(shí)現(xiàn)導(dǎo)航和主體的自適應(yīng)，用