HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。24.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征，4.2常見(jiàn)CSS屬性表該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1） 塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級(jí)元素的特征（2） 常見(jiàn)CSS屬性表能力目標(biāo)：（1） 具備識(shí)別常見(jiàn)標(biāo)簽所屬類型的能力。（2） 能根據(jù)場(chǎng)景需要轉(zhuǎn)化為對(duì)應(yīng)的元素類型。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。（2）在編程過(guò)程中，引導(dǎo)學(xué)生學(xué)會(huì)質(zhì)疑、分析和評(píng)價(jià)問(wèn)題，培養(yǎng)其批判性思維能力。塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征。通過(guò)設(shè)置容器的不同類型，讓學(xué)生體會(huì)不同類型元素所具備的特性。記憶并理解常見(jiàn)的CSS屬性。鼓勵(lì)學(xué)生上機(jī)嘗試不同屬性，自行發(fā)掘css屬性作用，教師輔以解釋。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(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ù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)上一章節(jié)的知識(shí)點(diǎn)包括哪些？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入Css樣式種類繁多，在課程學(xué)習(xí)中，只要求我們掌握常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配，碰到一些陌生的屬性，可以回憶第1章百度搜索引擎用法去尋求答案。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授1. 塊元素block：常見(jiàn)的塊狀元素有<div>、?<p>、?<ul>、?<table>、?<form>等。知識(shí)點(diǎn)：塊元素特征記憶關(guān)鍵詞：橫行天下關(guān)鍵詞解析：塊元素占用一橫行，即便設(shè)置了寬度，也依然不允許后面的元素排上來(lái)，霸道至極，可謂武將?！钏颊v解：橫行天下，也可以說(shuō)源自自身的實(shí)力，亦是一種勇氣和自信。倘若自身實(shí)力不足，就變成了傲慢、自負(fù)。一時(shí)橫行，并不意味長(zhǎng)期成為一方霸主，站在頂峰也要有望向更高山峰的決心。楚霸王項(xiàng)羽的自負(fù)與傲慢，忽視了他人的建議和意見(jiàn)。與劉邦的比較，后者能團(tuán)結(jié)將士，集眾智眾力，虛心納諫。兩者性格上的較量，決定了垓下之戰(zhàn)的結(jié)果。2. 內(nèi)聯(lián)元素（行內(nèi)元素）inline： 常見(jiàn)的行內(nèi)元素有<a>、<span>、<br>、<i>、<em>、<strong>、<label>等。知識(shí)點(diǎn)：內(nèi)聯(lián)元素特征記憶關(guān)鍵詞：無(wú)孔不入關(guān)鍵詞解析：實(shí)力弱小，在塊級(jí)元素強(qiáng)者之間求生存發(fā)展，竭盡所能靠近“上層社會(huì)”，前排哪里有空位擠哪里，可謂文將。3. 內(nèi)聯(lián)塊級(jí)元素（行內(nèi)塊元素）inline-block： 常見(jiàn)的內(nèi)聯(lián)塊級(jí)元素有<img>、<input/>、<button></button>、<td></td>等。知識(shí)點(diǎn)：內(nèi)聯(lián)塊級(jí)元素特征記憶關(guān)鍵詞：文武兼?zhèn)潢P(guān)鍵詞解析：具備有內(nèi)聯(lián)元素不會(huì)霸占整行的特征，同時(shí)又可以像塊級(jí)元素一樣設(shè)置正常的內(nèi)外邊距?！钏颊庹f(shuō)1：論文武雙全，古有李白仗劍吟詩(shī)作對(duì)，今有毛主席兵法如神，詩(shī)詞豪邁?！钏颊庹f(shuō)2：內(nèi)聯(lián)元素如同冬天相互取暖的刺猬，與對(duì)方相處時(shí)，會(huì)保持合理，令人舒服的距離感，而不會(huì)被刺傷。4.2常見(jiàn)CSS屬性表一定要認(rèn)得常用的英文單詞，最起碼得要求也必須要記住每個(gè)單詞前幾個(gè)字母，敲代碼時(shí)根據(jù)Hbuilder的代碼提示功能找到眼熟的即可。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【練習(xí)1】?jī)?nèi)聯(lián)、塊級(jí)、內(nèi)聯(lián)-塊級(jí)相關(guān)轉(zhuǎn)化塊級(jí)元素轉(zhuǎn)內(nèi)聯(lián)。（2）內(nèi)聯(lián)元素轉(zhuǎn)塊級(jí)元素（3）轉(zhuǎn)內(nèi)聯(lián)-塊級(jí)元素上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目創(chuàng)建站點(diǎn)結(jié)構(gòu)正確10塊級(jí)元素轉(zhuǎn)內(nèi)聯(lián)Html及css代碼正確20內(nèi)聯(lián)元素轉(zhuǎn)塊級(jí)Html及css代碼正確20內(nèi)聯(lián)元素轉(zhuǎn)內(nèi)聯(lián)-塊級(jí)Html容器包含關(guān)系正確20Css樣式正確，整體效果接近原型。30總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課，要求我們掌握：（1）塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級(jí)元素的特征及相互轉(zhuǎn)化的操作。（2）CSS屬性表中常見(jiàn)屬性及屬性值。（3）能識(shí)別常見(jiàn)標(biāo)簽所屬類型（4）在編程過(guò)程中，學(xué)會(huì)質(zhì)疑、分析和評(píng)價(jià)問(wèn)題，培養(yǎng)批判性