HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。24.3常見的選擇器類型該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識(shí)目標(biāo)：（1） 通配符選擇器、后代選擇器的用法。（2） 理解所學(xué)的選擇器的優(yōu)先級(jí)別。能力目標(biāo)：（1） 具備使用后代選擇器定義樣式的能力。（2） 具備合理調(diào)整選擇器權(quán)重的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。通配符選擇器、后代選擇器的用法后代選擇器的寫法，選擇器的優(yōu)先級(jí)別。通過成語解析概念，然后借助案例強(qiáng)化選擇器的寫法。選擇器的優(yōu)先級(jí)別。通過相關(guān)案例的選擇器設(shè)置的前后對比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)類選擇器對于id選擇器，兩者的使用場景有什么不同？基于后期的維護(hù)，哪種選擇器更便捷一些？回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入在我們接觸的案例中，幾乎每種標(biāo)簽都需要設(shè)置margin、padding為0，文字color屬性，行高等等。我們可以采用通配符選擇器將公共樣式定義，這個(gè)通配符，類似于window搜索文件時(shí)，采用“*”代表任何多個(gè)字符的韻味。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.3.4通配符選擇器（通用選擇器）用法格式：*{屬性:值；}body,ul,ol,li,h1,h2,h3,form,th,td{margin:0;padding:0}知識(shí)點(diǎn)：通配符選擇器范圍記憶關(guān)鍵詞：一呼百諾、一呼百應(yīng)關(guān)鍵詞解析：通配符選擇器，就是給所有的元素附加指定的樣式。如果確實(shí)需要使用通配符，一般設(shè)置大部分元素都有的margin、padding、font-size、color這幾個(gè)公共屬性。☆思政講解：加強(qiáng)學(xué)科間知識(shí)的融會(huì)貫通。通配符選擇器采用的*號(hào)，來源于操作系統(tǒng)的通配符“*”，在系統(tǒng)中可以通過通配符來實(shí)現(xiàn)快速查找特定文件名稱或擴(kuò)展名的操作。4.3.5后代選擇器用法格式：選擇器1選擇器2{屬性:值;}知識(shí)點(diǎn)：后代選擇器無視嵌套層次記憶關(guān)鍵詞：株連蔓引、株連九族關(guān)鍵詞解析：后代不僅僅是兒子，也包括孫子、重孫子，后代選擇器可以通過空格一直延續(xù)下去，但不需要把完整的族譜寫出來，比如可以聲明為“父親曾孫子”，而不需要申明為“父親我兒子孫子曾孫子”?！钏颊v解：株連九族是舊封建時(shí)代下的產(chǎn)物，社會(huì)主義制度下早已摒棄這種株連蔓引的制度。但重要部門、崗位的應(yīng)聘，也是需要政治審核。比如：公安招警政審除了對個(gè)人基本條件進(jìn)行審查外，還會(huì)對考生的家庭背景、社會(huì)關(guān)系等進(jìn)行深入調(diào)查?？忌改溉绻蟹磳艺?，或者是有過犯罪記錄及品質(zhì)不端的行為，例如流氓、偷竊等行為被記錄在案，都會(huì)對考生政審產(chǎn)生影響。提醒學(xué)生們，切勿以身試法，以免影響后代的教育、就業(yè)。4.3.6標(biāo)簽選擇器、ID選擇器、類選擇器的優(yōu)先權(quán)級(jí)別id選擇器>類選擇器>標(biāo)簽選擇器>通用選擇器知識(shí)點(diǎn)：優(yōu)先級(jí)別與權(quán)重值記憶關(guān)鍵詞：人微言輕、仗勢欺人關(guān)鍵詞解析： 當(dāng)申明選擇器時(shí)，想要樣式發(fā)揮出作用，就看選擇器的“背景”夠不夠雄厚。比如“我”這個(gè)選擇器沒什么份量，換一個(gè)說法“與企業(yè)有業(yè)務(wù)往來的我”，瞬間提高一個(gè)檔位；當(dāng)換成“與全球500強(qiáng)企業(yè)的中國銀行有業(yè)務(wù)往來的我”，我邊說這句話的時(shí)候，你是不是也認(rèn)真聽著？當(dāng)有不同選擇器指定了相同的屬性，我們一般采用給目標(biāo)選擇器增加id或類選擇器，增加它的權(quán)重值，一個(gè)不行再增加一個(gè)，父容器分不出勝負(fù)，再把爺輩容器搬出來，就是要依仗更大的“勢”?！钏颊v解1：人微言輕雖然聽上去是一個(gè)貶義詞，但從另外一個(gè)角度思考，如果一個(gè)人地位高，他從視野、戰(zhàn)略思考的問題，都不是普通人一般能考慮到的，所以想清楚這點(diǎn)，也就釋然了。如果要實(shí)現(xiàn)話語有份量，我們要加強(qiáng)實(shí)力的同時(shí)，爭取、把握表現(xiàn)自我能力的機(jī)會(huì)?！钏颊v解2：仗勢欺人，列舉現(xiàn)實(shí)生活中不少坑爹的案例，比如某著名演員的兒子仗著父親的名氣和地位，在中戲門口毆打自己的女朋友。某著名歌唱家兒子，依仗家庭背景顯赫而肆意妄為，無視法律法規(guī)和社會(huì)公德，最終因強(qiáng)奸罪被判刑。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例5】嘗試不同選擇器的優(yōu)先級(jí)別。（1）敲入如圖4-28所示的代碼，觀察樣式效果。圖4-28優(yōu)先權(quán)練習(xí)（2）有時(shí)候，恰好有多個(gè)樣式對某個(gè)屬性定義了不同數(shù)值，比如剛才的代碼中我們修改成這樣，文字將變成黃色，代碼如圖4-29所示。圖4-29后申明的樣式優(yōu)先權(quán)較高但.highlight樣式并不服氣，想把文字調(diào)回綠色，但.highlight和.other都是類選擇器，權(quán)重值相同，它想出一個(gè)主意，告訴瀏覽器“我爸是body標(biāo)簽，也就是body.highlight{color:green;}”，這時(shí)瀏覽器就會(huì)把它的權(quán)重增加，這段文字就會(huì)變回綠色。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10Html代碼容器結(jié)構(gòu)正確，縮進(jìn)整齊。30Css代碼樣式定義正確，樣式名稱合理。60總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)