《網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)》電子教案（第7周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)??教學(xué)課時(shí)??：理論2學(xué)時(shí)+實(shí)踐1學(xué)時(shí)??授課對(duì)象??：計(jì)算機(jī)相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第5章HTML5+CSS3移動(dòng)網(wǎng)站布局（5.1-5.2節(jié)）二、教學(xué)目標(biāo)（一）知識(shí)目標(biāo)了解HTML5的概念及核心特性（語(yǔ)義化、本地存儲(chǔ)、多媒體支持等）。掌握HTML5新增結(jié)構(gòu)性標(biāo)簽（<header>、<nav>、<section>、<article>、<aside>、<footer>）的語(yǔ)義及用法。掌握HTML5語(yǔ)義化標(biāo)簽（<hgroup>、<figure>、<time>、<datalist>、<details>、<meter>、<progress>等）的應(yīng)用場(chǎng)景及語(yǔ)法。熟悉CSS3新增偽類（以first/last/only為前綴的偽類、以nth為前綴的偽類、empty、not()、enabled/disabled/checked）的語(yǔ)法及使用。掌握CSS3偽元素::selection的用法，實(shí)現(xiàn)文本選中效果自定義。（二）思政目標(biāo)通過(guò)語(yǔ)義化標(biāo)簽的使用，培養(yǎng)規(guī)范編碼意識(shí)和對(duì)網(wǎng)頁(yè)結(jié)構(gòu)的邏輯梳理能力，理解“語(yǔ)義化即可讀性”的開發(fā)原則。結(jié)合偽類實(shí)現(xiàn)動(dòng)態(tài)樣式控制，體會(huì)“細(xì)節(jié)決定用戶體驗(yàn)”的前端開發(fā)理念，培養(yǎng)嚴(yán)謹(jǐn)細(xì)致的工匠精神。在案例實(shí)踐中，通過(guò)協(xié)作完成頁(yè)面布局，培養(yǎng)團(tuán)隊(duì)協(xié)作意識(shí)和問(wèn)題解決能力。三、教學(xué)重難點(diǎn)（一）教學(xué)重點(diǎn)HTML5結(jié)構(gòu)性標(biāo)簽（<header>、<nav>、<section>、<article>）的語(yǔ)義區(qū)分及嵌套規(guī)則。常用語(yǔ)義化標(biāo)簽（<time>、<datalist>、<details>、<progress>）的實(shí)際應(yīng)用。CSS3偽類（:nth-child()、:nth-of-type()、:checked）的用法及場(chǎng)景。（二）教學(xué)難點(diǎn)<section>與<article>的語(yǔ)義邊界（前者強(qiáng)調(diào)“區(qū)塊劃分”，后者強(qiáng)調(diào)“獨(dú)立內(nèi)容”）。:nth-child()與:nth-of-type()的區(qū)別（前者基于父元素所有子元素排序，后者基于同類型子元素排序）。偽類與偽元素的語(yǔ)法差異（單冒號(hào):用于偽類，雙冒號(hào)::用于偽元素）。四、教學(xué)方法講授法：系統(tǒng)講解HTML5標(biāo)簽語(yǔ)義、CSS3偽類語(yǔ)法及使用規(guī)則。案例演示法：結(jié)合“新聞頁(yè)面”“產(chǎn)品詳情頁(yè)”案例，實(shí)時(shí)演示標(biāo)簽和偽類的效果。對(duì)比分析法：對(duì)比傳統(tǒng)<div>布局與HTML5語(yǔ)義化布局的代碼可讀性，對(duì)比不同偽類的適用場(chǎng)景。任務(wù)驅(qū)動(dòng)法：實(shí)踐課通過(guò)“校園公告頁(yè)面”制作任務(wù)，綜合應(yīng)用所學(xué)標(biāo)簽和偽類。五、教學(xué)過(guò)程（一）第一學(xué)時(shí)：HTML5新增標(biāo)簽（40分鐘）導(dǎo)入（5分鐘）展示兩段代碼：提問(wèn)：“哪種代碼更易理解？為什么？”引出HTML5的核心優(yōu)勢(shì)——語(yǔ)義化。HTML5概述與結(jié)構(gòu)性標(biāo)簽（15分鐘）HTML5核心特性：簡(jiǎn)述語(yǔ)義特性、本地存儲(chǔ)、設(shè)備兼容等8大特性（參考教材5.1.1節(jié)）。結(jié)構(gòu)性標(biāo)簽詳解：<header>：頁(yè)面或區(qū)塊的頭部（如網(wǎng)站標(biāo)題、文章標(biāo)題），可嵌套使用。<nav>：導(dǎo)航鏈接區(qū)域（主導(dǎo)航、側(cè)邊欄導(dǎo)航），僅包含主要鏈接。<section>：文檔中的獨(dú)立區(qū)塊（章節(jié)、欄目），需包含標(biāo)題。<article>：獨(dú)立完整的內(nèi)容（文章、評(píng)論），可嵌套<section>。<aside>：輔助內(nèi)容（側(cè)邊欄、廣告），與主內(nèi)容相關(guān)。<footer>：頁(yè)腳（版權(quán)、聯(lián)系方式），可用于區(qū)塊級(jí)腳注。案例演示：展示教材例5-1的article嵌套section結(jié)構(gòu)，說(shuō)明標(biāo)簽語(yǔ)義優(yōu)先級(jí)。HTML5語(yǔ)義化標(biāo)簽（15分鐘）講解高頻標(biāo)簽及用法：<time>：定義時(shí)間/日期，支持datetime屬性（機(jī)器可讀）。<datalist>：與<input>配合提供輸入建議。<details>+<summary>：可折疊內(nèi)容（如產(chǎn)品詳情）。<progress>：進(jìn)度條（如文件下載進(jìn)度）。<meter>：度量衡（如磁盤使用率）。對(duì)比：<mark>（高亮文本）與CSS的background區(qū)別（語(yǔ)義化vs純樣式）。小結(jié)（5分鐘）回顧結(jié)構(gòu)性標(biāo)簽的嵌套原則：header/footer可用于頁(yè)面或article/section內(nèi)部。布置思考：“如何用HTML5標(biāo)簽規(guī)劃一個(gè)博客首頁(yè)的結(jié)構(gòu)？”（二）第二學(xué)時(shí)：CSS3新增偽類和偽元素（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對(duì)<article>與<section>的理解：“新聞列表中的單條新聞?dòng)媚膫€(gè)標(biāo)簽更合適？”引出問(wèn)題：“如何通過(guò)CSS選中列表中的第一個(gè)新聞項(xiàng)？”導(dǎo)入偽類。CSS3偽類詳解（25分鐘）第一類：first/last/only前綴偽類：:first-of-type：選中父元素中同類型的首個(gè)子元素。對(duì)比f(wàn)irst-child（父元素的首個(gè)子元素，不限類型）與first-of-type（限類型）。第二類：nth前綴偽類：:nth-child(n)：基于父元素所有子元素的序號(hào)（n為數(shù)字、odd/even或公式）。:nth-of-type(2n)：選中同類型子元素中的偶數(shù)項(xiàng)。第三類：其他偽類：:empty：選中無(wú)內(nèi)容的元素（如空段落）。:not(selector)：排除指定選擇器的元素（如p:not(.intro)）。:checked：選中被勾選的單選/復(fù)選框，常用于表單交互。偽元素::selection：自定義文本選中樣式。案例分析（7分鐘）展示教材“Tab選項(xiàng)卡”案例（5.2.4節(jié)），說(shuō)明如何用:checked偽類實(shí)現(xiàn)無(wú)JS的選項(xiàng)卡切換。小結(jié)（3分鐘）強(qiáng)調(diào)偽類的核心作用：動(dòng)態(tài)選擇元素，減少冗余類名。區(qū)分偽類（:）與偽元素（::）的語(yǔ)法。（三）實(shí)踐學(xué)時(shí)：綜合應(yīng)用（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作“校園公告頁(yè)面”，要求：用HTML5結(jié)構(gòu)性標(biāo)簽搭建框架（header+nav+section+footer）。使用<time>標(biāo)注公告發(fā)布時(shí)間，<details>展示公告詳情。用CSS3偽類實(shí)現(xiàn)：公告列表中首個(gè)項(xiàng)目加粗；偶數(shù)行背景色為淺灰；選中的文本背景為淺藍(lán)色。學(xué)生實(shí)踐（30分鐘）教師巡回指導(dǎo)，重點(diǎn)解決：標(biāo)簽嵌套錯(cuò)誤（如<nav>