HTML5使用標簽創(chuàng)建網(wǎng)頁結構，設置CSS屬性完成網(wǎng)頁布局。120HTML5基礎語法與文檔結構，語義化標簽及多媒體元素的應用，理解盒子模型和常見布局流技術，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。27.3掌握更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學習本課程之前已有一定的計算機基礎認知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關概念及技術有一些簡單的了解。知識目標：（1） 鞏固外部樣式表知識。（2） 理解選擇器的優(yōu)先級別。（3） 掌握關系選擇器，如子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器。能力目標：（1） 具備合理使用關系選擇器的意識。（2） 具備分辨選擇器優(yōu)先級別的能力。素養(yǎng)目標：（1） 了解本章成語的出處，理解成語含義與知識點理解的結合。相鄰兄弟選擇器、兄弟元素選擇器相鄰兄弟選擇器、兄弟元素選擇器的概念。通過成語解析概念，融合思政元素講解，強化對選擇器概念的認識。相鄰兄弟選擇器、兄弟元素選擇器的應用。通過唐詩案例，加強難點知識的學習同時加強對中華文化的認同。運用實例演示法，通過實際案例或操作演示，讓學生直觀理解抽象概念。實施項目驅(qū)動教學，鼓勵學生獨立或分組完成任務，培養(yǎng)團隊協(xié)作與問題解決能力。利用在線實訓平臺，提供個性化學習路徑，滿足不同水平學生的學習需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關知識點的背景知識，然后講授具體的知識要點及任務實現(xiàn)的注意事項，通過任務實施環(huán)節(jié)讓學生各自或分組進行練習。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當?shù)难a充，根據(jù)學生接納情況選擇性講解任務擴展內(nèi)容，最后以學生自我評價或小組評價完成任務的檢測，教師最終進行點評及總結。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務要求復習回顧已學的選擇器，Css選擇器優(yōu)先級從高到低怎么排序？回答問題教師提問，演示。思維導圖法或問題導向法幫助學生整理知識結構。引入CSS包含了數(shù)十種選擇器，只要學習過程中我們碰到與我們所學知識不同的選擇器，屆時在百度搜索相關資料。除了前面練習的ID選擇器、類選擇器、標簽選擇器、通用選擇器以外，我們介紹一下另外一些選擇器。聽講講授，演示。任務驅(qū)動法，讓學生了解任務目標。思考教師引導、提示知識講授相鄰兄弟選擇器相鄰兄弟選擇器可選擇緊接在另一元素后的元素，強調(diào)后者與前者是相鄰關系，且二者有相同父元素?？梢岳斫獬桑盒珠L+第一個弟弟。例如，如果要增加緊接在h1元素（哥哥）后緊接著出現(xiàn)的段落p元素（弟弟）的文字顏色，可以這樣寫：h1+p{color:red;}知識點：相鄰兄弟選擇器特點記憶關鍵詞：近水樓臺關鍵詞解析： 兄弟元素選擇器只會選中與哥哥（“+”號前面的元素）緊挨著的弟弟，而且這個弟弟符合“+”號后方指定的類型。 請問如圖7-5所示的代碼，p段落的文字預覽后是什么顏聽講演示任務達到的效果，講解代碼演示法讓學生明確分階段或最終的任務效果。講授法讓學生掌握完成本次任務需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。色？為什么？2.兄弟元素選擇器兄弟元素選擇器是選擇當前元素的所有同級元素?？梢岳斫獬桑盒珠L~所有弟弟。例如，如果要增加緊接在h1元素后出現(xiàn)的所有段落p元素的行高，可以這樣寫：h1~p{line-height:1.5em;} 知識點：兄弟元素選擇器特點記憶關鍵詞：手足之情關鍵詞解析： 與相鄰兄弟選擇器不同，兄弟元素選擇器不僅關心緊挨著參考元素的下一個兄弟，還關心所有在參考元素之后的所有兄弟。正如二哥分糖果時，只要是他的任何弟弟妹妹，都會收到糖果，但這位哥哥并不會把糖果留給大哥和自己?！钏颊v解：在校園環(huán)境中，“手足之情”體現(xiàn)為同學們之間的相互扶持與關愛。無論是學習上的困難，還是生活中的挫折，同學們都能像兄弟姐妹一樣，伸出援手，共同面對。這種情感不僅加深了同學之間的友誼，更培養(yǎng)了大家的集體榮譽感和團隊協(xié)作精神。演示案例2的頁面效果，講解兄弟元素選擇器的用法。任務實施【案例1】請嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預覽效果?！景咐?】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式?！钏颊v解：唐詩是中華文化悠久歷史的見證與傳承。每一首唐詩都是那個時代社會風貌、人民情感與思想智慧的結晶，它們以優(yōu)美的語言、深邃的意境，展現(xiàn)了中華文化的博大精深與獨特魅力。世界上沒有第二種語言比漢語言文化更加靈活、精彩。比如有個漢語十級的笑話，阿呆給朋友送紅包時，兩人有如下對話:朋友:“你這是什么意思?”朋友:“沒什么，意思意思?！迸笥?“你這就不夠意思了?！卑⒋?“小意思，小意思?！迸笥?“你這人真有意思。”阿呆:“其實也沒有別的意思?！迸笥?“那我就不好意思了。”阿呆:“是我不好意思?！闭埥忉屔衔闹忻總€“意思”的意思。（1）編寫下圖所示的HTML代碼，如圖7-7所示。（2）編寫對應的CSS代碼，如圖7-8所示。（3）保存文件后預覽效果是否達到預期。上機操作巡堂指導，提醒易出錯的事項實踐法旨在培養(yǎng)學生項目開發(fā)能力。任務擴展任務檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結構文件及文件夾命名及位置正確。20練習1相鄰兄弟選擇器使用正確。40練習2兄弟元素選擇器使用正確。40總分說明：評分項目為任務實施中要求學生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能