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章百度搜索引擎用法去尋求答案。聽講講授，演示。任務(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的代碼提示功能找到眼熟的即可。聽講演示任務(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)目開發(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é)作能力?？偨Y(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)批判性思維能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處?！揪毩?xí)2】自行嘗試CSS屬性表中的若干屬性?！境瓕懢毩?xí)】抄寫CSS屬性表，中文注釋可以寫簡(jiǎn)單些，英文單詞必須完整。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.3常見(jiàn)的選擇器類型該班人數(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） 標(biāo)簽選擇器的寫法及使用場(chǎng)景。（2） Id選擇器的寫法與應(yīng)用。能力目標(biāo)：（1） 具備使用h1標(biāo)簽完成logo區(qū)域的能力。（2） 具備使用id選擇器設(shè)計(jì)中華網(wǎng)框架容器的能力。素養(yǎng)目標(biāo)：（1） 了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。（2） 了解中華網(wǎng)案例，引導(dǎo)學(xué)生關(guān)注能源消耗、資源利用等社問(wèn)題，培養(yǎng)其環(huán)保意識(shí)和社會(huì)責(zé)任感。標(biāo)簽選擇器與id選擇器標(biāo)簽選擇器的寫法，id選擇器的寫法。通過(guò)成語(yǔ)解析概念，然后借助案例強(qiáng)化選擇器的寫法。在不同場(chǎng)景中選擇恰當(dāng)?shù)倪x擇器。通過(guò)案例講解，讓學(xué)生在不同場(chǎng)景中體會(huì)選擇器的用法。運(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í)元素類型主要分哪三種？分別有什么特點(diǎn)？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入樣式表，實(shí)際上就是針對(duì)某些元素，設(shè)置不同的屬性值。這項(xiàng)工作的執(zhí)行，關(guān)鍵在于如何去針對(duì)某些元素，也就是我們要想辦法選擇對(duì)應(yīng)元素，這就是最近需要講的選擇器。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.3.1標(biāo)簽選擇器標(biāo)簽選擇器以"標(biāo)簽名"來(lái)定義，用法示例：h1{color:red;}ul{list-style-type:none;}知識(shí)點(diǎn)：標(biāo)簽選擇器的意義記憶關(guān)鍵詞：同氣連枝關(guān)鍵詞解析： “同氣”指的是具有相同標(biāo)簽的元素，它們因?yàn)橄嗤膶傩裕礃?biāo)簽名）而被歸類在一起；“連枝”則形象地表達(dá)了這些元素通過(guò)標(biāo)簽選擇器被連接在一起，共同接受對(duì)應(yīng)樣式的影響。☆思政講解：（1）每個(gè)人都希望別人給自己打上一個(gè)“正直”、“善良”、“誠(chéng)信”的標(biāo)簽，而不是希望別人冠以“渣男”的標(biāo)簽。（2）共同維護(hù)班集體的利益，做到同氣連枝。因?yàn)楫?dāng)別人一說(shuō)起某某班，意味著所有班上的同學(xué)的“標(biāo)簽”。4.3.2ID選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來(lái)定義，用法示例：#box-red{color:red;}#bg{color:green;}知識(shí)點(diǎn)：id選擇器的應(yīng)用場(chǎng)景記憶關(guān)鍵詞：寡二少雙、獨(dú)一無(wú)二關(guān)鍵詞解析：每個(gè)標(biāo)簽都可以設(shè)置唯一一個(gè)id，id就相當(dāng)于人/標(biāo)簽的身份證，因此在同一頁(yè)面內(nèi)id選擇器絕不能重復(fù)?！钏颊庹f(shuō)：（1）身份證怎么體現(xiàn)全國(guó)人民的唯一身份？解讀身份證代碼：?地址碼：前6位數(shù)字，表示編碼對(duì)象常住戶口所在縣（市、區(qū)）的行政區(qū)劃代碼。出生日期碼：接下來(lái)的8位數(shù)字，表示編碼對(duì)象的出生年月日。順序碼：第15至17位數(shù)字，表示在同一地址碼所標(biāo)識(shí)的區(qū)域范圍內(nèi)，對(duì)同年同月同日出生的人員編定的順序號(hào)。奇數(shù)分配給男性，偶數(shù)分配給女性。校驗(yàn)碼：最后一位數(shù)字，根據(jù)前17位數(shù)字碼，按照ISO7064:1983.MOD11-2校驗(yàn)碼計(jì)算結(jié)果。如果最后一位計(jì)算結(jié)果為10，則用羅馬數(shù)字X表示?！景咐?】基于sec優(yōu)化排名，logo處采用h1標(biāo)簽，標(biāo)志圖片作為背景圖像。logo標(biāo)志是整個(gè)網(wǎng)站最重要的元素之一，如何能讓該頁(yè)面盡可能被搜索引擎收錄，識(shí)別出正確的站點(diǎn)信息。我們要思考幾個(gè)因素：在瀏覽網(wǎng)頁(yè)時(shí)，圖片有幾率刷不出來(lái)，尤其是大圖。圖片如果刷不出來(lái)的時(shí)候，怎么體現(xiàn)出這個(gè)位置放置了什么內(nèi)容？搜索引擎喜歡“標(biāo)題”語(yǔ)義，也就是喜歡收錄能概括整個(gè)頁(yè)面結(jié)構(gòu)的元素。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例1】基于sec優(yōu)化排名，logo處采用h1標(biāo)簽，標(biāo)志圖片作為背景圖像。（1）寫html結(jié)構(gòu)，我們采用h1標(biāo)題賦予給logo標(biāo)志，希望能收錄下網(wǎng)站名及網(wǎng)址。同時(shí)在文件頭<head>標(biāo)簽內(nèi)的<title>標(biāo)題上寫上對(duì)應(yīng)網(wǎng)站名、網(wǎng)址、宣傳語(yǔ)，代碼如圖4-1所示。（2）書寫對(duì)應(yīng)的CSS代碼，如圖4-2所示?！景咐?】中華網(wǎng)框架布局（1）擬定給如圖4-3所示的頁(yè)頭部分劃分區(qū)域，原則上一行視為一個(gè)大容器。（2）書寫對(duì)應(yīng)的html結(jié)構(gòu)。（3）書寫對(duì)應(yīng)的css樣式代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10練習(xí)1Html中容器結(jié)構(gòu)合理，選擇器命名規(guī)范。20Css樣式正確，預(yù)覽效果一致20練習(xí)1Html中容器結(jié)構(gòu)合理，選擇器命名規(guī)范。25Css樣式正確，預(yù)覽效果一致25總分說(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）標(biāo)簽選擇器的寫法及使用場(chǎng)景。（2）Id選擇器的寫法與應(yīng)用。（3）使用h1標(biāo)簽完成logo區(qū)域。（4）使用id選擇器設(shè)計(jì)中華網(wǎng)框架容器。了解中華網(wǎng)案例，培養(yǎng)環(huán)保意識(shí)和社會(huì)責(zé)任感。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。【案例3】使用手機(jī)打開某個(gè)APP，用A4紙，直尺繪制容器包含結(jié)構(gòu)圖，并輔以箭頭和文字給各容器命名id。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.3常見(jiàn)的選擇器類型該班人數(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） 類選擇器的特點(diǎn)，使用場(chǎng)合分析。（2） 比較id選擇器，明確類選擇器的優(yōu)勢(shì)所在。（3） 同一對(duì)象應(yīng)用多個(gè)類的權(quán)重分析。能力目標(biāo)：具備合理定義類選擇器的能力。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。（2）通過(guò)id選擇器和類選擇器的對(duì)比實(shí)踐，鼓勵(lì)學(xué)生在計(jì)算機(jī)領(lǐng)域不斷探索新知，勇于創(chuàng)新，培養(yǎng)批判性思維和解決問(wèn)題的能力。類選擇器的概念及運(yùn)用。類選擇器的特點(diǎn)，類選擇器的使用場(chǎng)合，同一對(duì)象應(yīng)用多個(gè)類的權(quán)重分析。通過(guò)成語(yǔ)解析概念，然后借助案例強(qiáng)化選擇器的相關(guān)知識(shí)。同一對(duì)象應(yīng)用多個(gè)類的權(quán)重分析。通過(guò)案例練習(xí)，讓學(xué)生在體會(huì)權(quán)重的含義。運(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í)對(duì)于一個(gè)企業(yè)頁(yè)面來(lái)說(shuō)，使用Id選擇器對(duì)頁(yè)面主體框架進(jìn)行命名，應(yīng)該如何命名？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入標(biāo)簽選擇器影響的范圍太廣，而id選擇器影響的作用太窄，實(shí)際應(yīng)用上，我們可以采用id+標(biāo)簽選擇器的組合來(lái)完成選擇目標(biāo)元素。但有時(shí)采用這種方式也不太適合，比如ul標(biāo)簽下的一組li元素，如何將其中某幾個(gè)li進(jìn)行樣式定義？如果采用每個(gè)li定義id選擇器，那在style標(biāo)簽內(nèi)書寫的樣式申明工作量太大，為解決這種問(wèn)題，今天我們了解“類選擇器”。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.3.3類選擇器用法示例：.center{text-align:center;color:red;}HTML元素也可以引用多個(gè)類。每個(gè)元素都可以設(shè)置一個(gè)或多個(gè)class（空格分隔），比如，<p>元素將根據(jù)CSS代碼區(qū)的"center"和"large"樣式進(jìn)行設(shè)置，那可以寫成：<pclass="centerlarge">本文文字會(huì)受到兩個(gè)樣式影響</p>知識(shí)點(diǎn)：類選擇器有利于代碼復(fù)用記憶關(guān)鍵詞：屢次三番關(guān)鍵詞解析：實(shí)際項(xiàng)目中一個(gè)元素為了能被多個(gè)樣式應(yīng)用對(duì)應(yīng)效果，樣式復(fù)用可以提高效率。簡(jiǎn)單地說(shuō)，就是一個(gè)元素可以擁有多個(gè)類，一個(gè)類也可以應(yīng)用到多個(gè)元素上?！钏颊庹f(shuō)：（1）所有編程語(yǔ)言中，追求代碼的重復(fù)利用，通常會(huì)將代碼進(jìn)行封裝為函數(shù)等等。如同一臺(tái)電腦的操作系統(tǒng)可以被多個(gè)用戶登錄，并非為不同用戶安裝多個(gè)同樣的操作系統(tǒng)。（2）代碼復(fù)用，類比“環(huán)保意識(shí)”，追求物品的重復(fù)利用。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例4】打開之前的“中華網(wǎng)”布局練習(xí)中，完成頁(yè)頭部分。（1）打開文件“第4章-常用選擇器-ID選擇器中華網(wǎng).html”，把id選擇器換成類選擇器。修改后的CSS代碼。（2）同樣道理，我們把后面的id選擇器改為類選擇器。對(duì)應(yīng)CSS代碼。（3）我們需要把其中一個(gè)div容器的高度調(diào)整為特殊的400px，那可以為該容器再加上一個(gè)class類名。對(duì)應(yīng)的CSS樣式代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10Html結(jié)構(gòu)容器結(jié)構(gòu)正確。30類選擇器的引用代碼正確，名稱合理。10多個(gè)類的引用類之間保留空格。10樣式的定義樣式順序正確，屬性值正確。40總分說(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é)作能力?？偨Y(jié)通過(guò)本課，要求我們掌握：（1）類選擇器的特點(diǎn)，使用場(chǎng)合分析。（2）比較id選擇器，明確類選擇器的優(yōu)勢(shì)所在。（3）同一對(duì)象應(yīng)用多個(gè)類的權(quán)重分析。（4）通過(guò)id選擇器和類選擇器的對(duì)比實(shí)踐，鼓勵(lì)學(xué)生在計(jì)算機(jī)領(lǐng)域不斷探索新知，勇于創(chuàng)新，培養(yǎng)批判性思維和解決問(wèn)題的能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.3常見(jiàn)的選擇器類型該班人數(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） 通配符選擇器、后代選擇器的用法。（2） 理解所學(xué)的選擇器的優(yōu)先級(jí)別。能力目標(biāo)：（1） 具備使用后代選擇器定義樣式的能力。（2） 具備合理調(diào)整選擇器權(quán)重的能力。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。通配符選擇器、后代選擇器的用法后代選擇器的寫法，選擇器的優(yōu)先級(jí)別。通過(guò)成語(yǔ)解析概念，然后借助案例強(qiáng)化選擇器的寫法。選擇器的優(yōu)先級(jí)別。通過(guò)相關(guān)案例的選擇器設(shè)置的前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。運(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í)類選擇器對(duì)于id選擇器，兩者的使用場(chǎng)景有什么不同？基于后期的維護(hù)，哪種選擇器更便捷一些？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(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è)公共屬性?！钏颊v解：加強(qiáng)學(xué)科間知識(shí)的融會(huì)貫通。通配符選擇器采用的*號(hào)，來(lái)源于操作系統(tǒng)的通配符“*”，在系統(tǒng)中可以通過(guò)通配符來(lái)實(shí)現(xiàn)快速查找特定文件名稱或擴(kuò)展名的操作。4.3.5后代選擇器用法格式：選擇器1選擇器2{屬性:值;}知識(shí)點(diǎn)：后代選擇器無(wú)視嵌套層次記憶關(guān)鍵詞：株連蔓引、株連九族關(guān)鍵詞解析：后代不僅僅是兒子，也包括孫子、重孫子，后代選擇器可以通過(guò)空格一直延續(xù)下去，但不需要把完整的族譜寫出來(lái)，比如可以聲明為“父親曾孫子”，而不需要申明為“父親我兒子孫子曾孫子”?！钏颊v解：株連九族是舊封建時(shí)代下的產(chǎn)物，社會(huì)主義制度下早已摒棄這種株連蔓引的制度。但重要部門、崗位的應(yīng)聘，也是需要政治審核。比如：公安招警政審除了對(duì)個(gè)人基本條件進(jìn)行審查外，還會(huì)對(duì)考生的家庭背景、社會(huì)關(guān)系等進(jìn)行深入調(diào)查。考生父母如果有反對(duì)國(guó)家政策，或者是有過(guò)犯罪記錄及品質(zhì)不端的行為，例如流氓、偷竊等行為被記錄在案，都會(huì)對(duì)考生政審產(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)鍵詞：人微言輕、仗勢(shì)欺人關(guān)鍵詞解析： 當(dāng)申明選擇器時(shí)，想要樣式發(fā)揮出作用，就看選擇器的“背景”夠不夠雄厚。比如“我”這個(gè)選擇器沒(méi)什么份量，換一個(gè)說(shuō)法“與企業(yè)有業(yè)務(wù)往來(lái)的我”，瞬間提高一個(gè)檔位；當(dāng)換成“與全球500強(qiáng)企業(yè)的中國(guó)銀行有業(yè)務(wù)往來(lái)的我”，我邊說(shuō)這句話的時(shí)候，你是不是也認(rèn)真聽著？當(dāng)有不同選擇器指定了相同的屬性，我們一般采用給目標(biāo)選擇器增加id或類選擇器，增加它的權(quán)重值，一個(gè)不行再增加一個(gè)，父容器分不出勝負(fù)，再把爺輩容器搬出來(lái)，就是要依仗更大的“勢(shì)”?！钏颊v解1：人微言輕雖然聽上去是一個(gè)貶義詞，但從另外一個(gè)角度思考，如果一個(gè)人地位高，他從視野、戰(zhàn)略思考的問(wèn)題，都不是普通人一般能考慮到的，所以想清楚這點(diǎn)，也就釋然了。如果要實(shí)現(xiàn)話語(yǔ)有份量，我們要加強(qiáng)實(shí)力的同時(shí)，爭(zhēng)取、把握表現(xiàn)自我能力的機(jī)會(huì)?！钏颊v解2：仗勢(shì)欺人，列舉現(xiàn)實(shí)生活中不少坑爹的案例，比如某著名演員的兒子仗著父親的名氣和地位，在中戲門口毆打自己的女朋友。某著名歌唱家兒子，依仗家庭背景顯赫而肆意妄為，無(wú)視法律法規(guī)和社會(huì)公德，最終因強(qiáng)奸罪被判刑。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例5】嘗試不同選擇器的優(yōu)先級(jí)別。（1）敲入如圖4-28所示的代碼，觀察樣式效果。圖4-28優(yōu)先權(quán)練習(xí)（2）有時(shí)候，恰好有多個(gè)樣式對(duì)某個(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ù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10Html代碼容器結(jié)構(gòu)正確，縮進(jìn)整齊。30Css代碼樣式定義正確，樣式名稱合理。60總分說(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é)作能力?？偨Y(jié)通過(guò)本課，要求我們掌握：（1）通配符選擇器、后代選擇器的用法。（2）理解所學(xué)的選擇器的優(yōu)先級(jí)別。（3）具備合理調(diào)整選擇器權(quán)重的能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.4結(jié)構(gòu)類標(biāo)簽該班人數(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）掌握article、section、footer標(biāo)簽的寫法。（2）理解article、section的使用場(chǎng)景。能力目標(biāo)：（1）具備合理使用article、section及互相嵌套的設(shè)計(jì)能力。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。article、section、footer標(biāo)簽article、section、footer標(biāo)簽的寫法。通過(guò)案例講解，讓學(xué)生在不同場(chǎng)景中體會(huì)選擇適合的標(biāo)簽。實(shí)際應(yīng)用article、section標(biāo)簽完成文章詳情頁(yè)。通過(guò)具體案例練習(xí)，讓學(xué)生掌握對(duì)應(yīng)的標(biāo)簽用法。運(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í)<nav>標(biāo)簽是否只能夠出現(xiàn)在網(wǎng)頁(yè)的主導(dǎo)航上？在頁(yè)面中經(jīng)常出現(xiàn)在什么位置上？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入對(duì)于文章詳情頁(yè)來(lái)說(shuō)，結(jié)構(gòu)性標(biāo)簽不僅僅體現(xiàn)在header、nav等等，其中大量的版面，大量的文字段落，都需要采用針對(duì)圖文混排的結(jié)構(gòu)性標(biāo)簽section，當(dāng)然section標(biāo)簽不僅僅可以定義圖文混排的場(chǎng)景，在商業(yè)網(wǎng)頁(yè)中經(jīng)常拿該標(biāo)簽用于定義大的版面。博客中的一篇文章，論壇中的一個(gè)帖子或者一段瀏覽者的評(píng)論等。因?yàn)閍rticle元素是一段獨(dú)立的內(nèi)容，所以article元素中，通常包含頭部（header元素）、底部（footer元素）。section元素的作用，是對(duì)頁(yè)面上的內(nèi)容分塊處理，例如對(duì)文章分段等，相鄰的section元素的內(nèi)容，應(yīng)當(dāng)是相關(guān)的，而不是像article那樣獨(dú)立。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.4.3article標(biāo)簽<article>標(biāo)簽用于標(biāo)記獨(dú)立、完整的內(nèi)容塊，這通常表現(xiàn)為一個(gè)文章或者文章的一部分、論壇帖子、雜志或報(bào)紙文章、博客條目、用戶評(píng)論等。該標(biāo)簽的使用在結(jié)構(gòu)化語(yǔ)義上非常有幫助。例如，在博客中，每個(gè)帖子可以被標(biāo)記為一個(gè)<article>元素，其中包括標(biāo)題、作者、發(fā)布日期和文章內(nèi)容。這種做法增強(qiáng)了頁(yè)面的語(yǔ)義，便于搜索引擎和輔助技術(shù)更好地理解內(nèi)容的結(jié)構(gòu)，并按照其獨(dú)立性和完整性對(duì)其進(jìn)行索引。用法示例： <article> <header><h1>帖子標(biāo)題</h1><p>發(fā)布于1月1日</p></header><p>這里是文章的第一個(gè)段落。</p><footer><p>作者A</p></footer></article>4.4.4section標(biāo)簽section元素是HTML5中用于定義文檔結(jié)構(gòu)中獨(dú)立部分的元素。它表示文檔中的一個(gè)主題或內(nèi)容區(qū)域，并可以包含標(biāo)題、段落、圖像、列表和其他內(nèi)容元素。通常<section>標(biāo)簽表示為頁(yè)面中的版塊、文章的章節(jié)?？梢赃@么理解，一份報(bào)紙多個(gè)版面（section），每個(gè)版面可以有多篇文章（article），每篇文章里面又包含多個(gè)章節(jié)（section）。用法示例： <sectionid="main"><sectionid="article"><!--文章內(nèi)容--></section><sectionid="sidebar"><!--側(cè)邊欄內(nèi)容--></section></section>4.4.5footer標(biāo)簽<footer>標(biāo)簽定義文檔或小節(jié)的頁(yè)腳。<footer>元素通常包含有作者信息、版權(quán)信息、聯(lián)系信息、站點(diǎn)地圖、返回頂部鏈接、相關(guān)頁(yè)面。您可以在一個(gè)文檔中包含多個(gè)<footer>元素，但對(duì)于本書練習(xí)中，通常只需要用一個(gè)footer容器即可。 用法示例：<footer> <p>作者：Rose</p> <p><ahref="mailto:rose@">rose@</a></p></footer>聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【練習(xí)1】一篇文章的html結(jié)構(gòu)輸入以下代碼：<article><header><h1>計(jì)算機(jī)各類語(yǔ)言介紹</h1></header><p>本文列舉了部分計(jì)算機(jī)語(yǔ)言的一些介紹</p><section><h2>JavaScript</h2><p>js是一門……</p></section><section><h2>HTML</h2><p>HTML是一門……</p></section><footer>版權(quán)所有</footer></article>【練習(xí)2】為以上容器設(shè)置對(duì)應(yīng)的樣式，要求預(yù)覽后布局整齊、效果美觀。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10容器結(jié)構(gòu)結(jié)構(gòu)合理，標(biāo)簽正確。30樣式屬性值正確，選擇器命名合理。40整體預(yù)覽效果布局整齊、效果美觀20總分說(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é)作能力?？偨Y(jié)通過(guò)本課，要求我們掌握：（1）掌握article、section、footer標(biāo)簽的寫法。（2）理解article、section的使用場(chǎng)景。（3）具備合理使用article、section及互相嵌套的設(shè)計(jì)能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處?！揪毩?xí)2】自行上網(wǎng)找一個(gè)能結(jié)合article、section標(biāo)簽應(yīng)用的網(wǎng)頁(yè)，并嘗試使用article、section、p等等文本類的標(biāo)簽將HTML結(jié)構(gòu)代碼書寫下來(lái)，不要求寫css樣式。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.4結(jié)構(gòu)類標(biāo)簽該班人數(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） 理解header標(biāo)簽的使用場(chǎng)景及寫法。（2） Nav標(biāo)簽的使用場(chǎng)景。（3） 橫向?qū)Ш綑凇⒖v向?qū)Ш綑诘脑O(shè)計(jì)。能力目標(biāo)：具備使用nav標(biāo)簽設(shè)計(jì)橫向、縱向?qū)Ш綑诘哪芰ΑＫ仞B(yǎng)目標(biāo)：（1） 了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。（2） 掌握Header、nav的讀法，加強(qiáng)學(xué)生英文聽說(shuō)能力。Header和nav標(biāo)簽Header、nav標(biāo)簽的使用場(chǎng)景及寫法。通過(guò)案例講解，讓學(xué)生在不同場(chǎng)景中體會(huì)標(biāo)簽的用法。橫向?qū)Ш綑?、縱向?qū)Ш綑诘脑O(shè)計(jì)。通過(guò)相關(guān)案例的浮動(dòng)屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)縱向和橫向排列的區(qū)別。運(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í)如何理解樣式表中的權(quán)重一詞？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入HTML（超文本標(biāo)記語(yǔ)言）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，包含各種標(biāo)簽，用于定義網(wǎng)頁(yè)的結(jié)構(gòu)、語(yǔ)義和格式。其中，HTML結(jié)構(gòu)類標(biāo)簽主要用于定義網(wǎng)頁(yè)的整體結(jié)構(gòu)和部分。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.4.1header標(biāo)簽<header>

標(biāo)簽是HTML5新引入的標(biāo)簽，用來(lái)表示網(wǎng)頁(yè)或一段內(nèi)容的頭部區(qū)域。它可以包含網(wǎng)站標(biāo)題、搜索表單、導(dǎo)航鏈接等。通常搜索引擎收錄網(wǎng)站時(shí)，并不會(huì)把頁(yè)碼所有內(nèi)容保存下來(lái)，開始部分是重點(diǎn)關(guān)注內(nèi)容。<header>……</header>的寫法，類似于<divid=”header”>……<divid=”header”>寫法，不過(guò)從語(yǔ)義上來(lái)說(shuō)，前者寫法更符合搜索引擎收錄的胃口。4.4.2nav標(biāo)簽<nav>標(biāo)簽定義導(dǎo)航欄鏈接的部分，一般來(lái)說(shuō)用于頁(yè)面中主要的導(dǎo)航鏈接組，如傳統(tǒng)的導(dǎo)航條，側(cè)邊導(dǎo)航欄，頁(yè)面導(dǎo)航欄等?！景咐?】完成如圖4-30所示的縱向排列的導(dǎo)航。圖4-30縱向排列的導(dǎo)航 欄目名稱前面的圖標(biāo)屬于裝飾用的，按H5標(biāo)準(zhǔn)來(lái)說(shuō)，裝飾用的原則上不應(yīng)該插入圖片，這里我們可以采取容器背景圖的方式實(shí)現(xiàn)。中文欄目對(duì)應(yīng)的英文詞組如果考慮為裝飾的話，我們也可以采用背景圖方式實(shí)現(xiàn)，但考慮到這個(gè)截圖來(lái)自于國(guó)內(nèi)百?gòu)?qiáng)企業(yè)，擁有一批國(guó)外客戶，那么我們也要適當(dāng)提供英文關(guān)鍵字的內(nèi)容，而不是作為一種裝飾?；谶@么考慮的話，我們把欄目中文名稱用<h3>標(biāo)簽，英文用<h4>標(biāo)簽來(lái)構(gòu)建框架。【案例7】完成如圖4-35所示橫向排列的導(dǎo)航。圖4-35橫向排列的導(dǎo)航 最大的容器設(shè)置淺灰背景色，布局采用“練習(xí)1”的結(jié)構(gòu)，不同之處就是將<li>標(biāo)簽進(jìn)行左浮動(dòng)即可，同時(shí)增加一個(gè)光標(biāo)浮在欄目上方時(shí)該元素底色變色、黑色線框圖標(biāo)換成另外一個(gè)白色線框圖標(biāo)。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例6】完成如圖4-30所示的縱向排列的導(dǎo)航。（1）先搭建大體的框架HTML代碼。（2）對(duì)應(yīng)的CSS代碼。（3）保存文件后運(yùn)行。（4）添加h3、h4標(biāo)簽的CSS樣式，完善其他樣式。【案例7】完成如圖4-35所示橫向排列的導(dǎo)航。（1）HTML結(jié)構(gòu)代碼依然采用“練習(xí)1”的代碼。（2）編寫布局靜態(tài)效果的CSS代碼。采用<a>標(biāo)簽設(shè)置背景圖標(biāo)的方式去完成，但在:nth-of-type()選擇器的參數(shù)設(shè)置與“練習(xí)1”不同。（3）保存文件，在瀏覽器中預(yù)覽運(yùn)行的效果。（4）添加元素在hover狀態(tài)下的代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10Html結(jié)構(gòu)nav標(biāo)簽內(nèi)部代碼正確，縮進(jìn)整齊。30精靈圖技術(shù)應(yīng)用設(shè)置準(zhǔn)確的x/y偏移值，效果一致。40快捷鍵的使用快速準(zhǔn)確完成大段的代碼塊。20總分說(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é)作能力?？偨Y(jié)通過(guò)本課，要求我們掌握：（1） 理解header標(biāo)簽的使用場(chǎng)景及寫法。（2） Nav標(biāo)簽的使用場(chǎng)景。（3） 橫向?qū)Ш綑?、縱向?qū)Ш綑诘脑O(shè)計(jì)。（4） 掌握Header、nav的讀法，加強(qiáng)英文聽說(shuō)能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.5文本類標(biāo)簽該班人數(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）強(qiáng)化<article>、<section>標(biāo)簽的應(yīng)用。（2）完成a錨點(diǎn)鏈接練習(xí)。能力目標(biāo)：具備完成一篇帶錨點(diǎn)鏈接的小說(shuō)頁(yè)面。素養(yǎng)目標(biāo)：（1）了解《活著》這部作品，其深刻描繪了生命的堅(jiān)韌與不屈，傳遞出在逆境中堅(jiān)守希望、積極面對(duì)生活的思政價(jià)值觀。a標(biāo)簽相關(guān)練習(xí)強(qiáng)化<article>、<section>標(biāo)簽的應(yīng)用，a錨點(diǎn)鏈接。通過(guò)案例將重點(diǎn)知識(shí)點(diǎn)串接，鞏固知識(shí)點(diǎn)。a錨點(diǎn)鏈接。通過(guò)演示及操作錨點(diǎn)鏈接，讓學(xué)生掌握頁(yè)面中、各頁(yè)面的鏈接跳轉(zhuǎn)。運(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í)文本類標(biāo)簽主要包括哪些？描述一下它們的使用場(chǎng)景?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入A標(biāo)簽不僅僅可以應(yīng)用于文本上，也經(jīng)常應(yīng)用在圖像上，此外，可以應(yīng)用到容器標(biāo)簽。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授<article>、<section>標(biāo)簽知識(shí)點(diǎn)。A標(biāo)簽的四種偽類狀態(tài)。a:link定義正常鏈接的樣式；a:visited定義已訪問(wèn)過(guò)鏈接的樣式；a:hover定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式；a:active定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式；【案例12】使用錨點(diǎn)鏈接完成下圖書籍目錄的跳轉(zhuǎn)功能?！钏颊v解1：《活著》這部小說(shuō)體現(xiàn)了生命的堅(jiān)韌與頑強(qiáng)、命運(yùn)的無(wú)常與人生的無(wú)奈、深刻的人文關(guān)懷以及儒家思想的體現(xiàn)等多種精神內(nèi)涵。這些精神不僅讓讀者深刻體會(huì)到生命的寶貴和珍貴，也讓我們更加珍惜當(dāng)下的生活，勇敢面對(duì)未來(lái)的挑戰(zhàn)。☆思政講解2：我國(guó)哪位作家的哪部作品獲得了諾貝爾文學(xué)獎(jiǎng)？聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例12】使用錨點(diǎn)鏈接完成下圖書籍目錄的跳轉(zhuǎn)功能。（1）使用<article>、<section>、<ul>標(biāo)簽寫下大體結(jié)構(gòu)。（2）稍微設(shè)置一下CSS樣式。（3）一一為目錄添加錨點(diǎn)鏈接。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10<article、<section>標(biāo)簽的應(yīng)用容器定義正確20Ul標(biāo)簽的應(yīng)用容器定義正確20錨點(diǎn)鏈接代碼正確，能正常跳轉(zhuǎn)40樣式定義預(yù)覽的文本效果美觀10總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課，要求我們掌握：（1）強(qiáng)化<article>、<section>標(biāo)簽的應(yīng)用。（2）完成a錨點(diǎn)鏈接練習(xí)。完成一篇帶錨點(diǎn)鏈接的小說(shuō)頁(yè)面。（3）了解《活著》這部作品，其深刻描繪了生命的堅(jiān)韌與不屈，傳遞出在逆境中堅(jiān)守希望、積極面對(duì)生活的思政價(jià)值觀。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.5文本類標(biāo)簽該班人數(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） 掌握P標(biāo)簽的用法和使用場(chǎng)景。（2） 掌握p標(biāo)簽的常見(jiàn)樣式設(shè)置。（3） 掌握h類標(biāo)簽的使用場(chǎng)景。能力目標(biāo)：具備對(duì)p標(biāo)簽容器設(shè)置合理、美觀的樣式的能力。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。p標(biāo)簽、h類標(biāo)簽設(shè)置文本段落的首行縮進(jìn)、行高、字體大小、字體樣式、顏色。通過(guò)引導(dǎo)學(xué)生聯(lián)想word操作來(lái)引入相關(guān)知識(shí)點(diǎn)。記憶常見(jiàn)屬性的英文單詞、區(qū)分h類標(biāo)簽的使用場(chǎng)景。采用演示及總結(jié)來(lái)強(qiáng)調(diào)h類標(biāo)簽。運(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í)article元素是一段獨(dú)立的內(nèi)容，通常包含頭部（header元素）、底部（footer元素）。section元素的作用，是對(duì)頁(yè)面上的內(nèi)容分塊處理，例如對(duì)文章分段等，相鄰的section元素的內(nèi)容，應(yīng)當(dāng)是相關(guān)的，而不是像article那樣獨(dú)立。回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入<p>標(biāo)簽是HTML中的一個(gè)塊級(jí)元素，全稱paragraph，即“段落”，主要用于定義一段文本或內(nèi)容。以下是一些具體的使用場(chǎng)景。 文章段落內(nèi)容：在網(wǎng)頁(yè)文章中，每個(gè)段落可以使用一個(gè)<p>標(biāo)簽來(lái)包裹，這樣有助于頁(yè)面的可讀性和維護(hù)性。例如，在一篇新聞文章中有3段文字，就可以把這3個(gè)段落分別放到3個(gè)<p>標(biāo)簽中。 列表簡(jiǎn)介信息：在無(wú)序列表或有序列表的旁邊，可以使用<p>標(biāo)簽添加一些簡(jiǎn)短的文字介紹或說(shuō)明。 簡(jiǎn)短文字介紹：對(duì)于網(wǎng)頁(yè)上的簡(jiǎn)短文字介紹，如產(chǎn)品描述、功能說(shuō)明等，也可以使用<p>標(biāo)簽。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.5.1p標(biāo)簽<p>標(biāo)簽定義段落。文字行高的原因，p元素會(huì)自動(dòng)在文字上下創(chuàng)建一些空白，瀏覽器會(huì)自動(dòng)添加這些空間。也可以在樣式表中規(guī)定行高（line-height）來(lái)縮小空白。4.5.2h1~h6標(biāo)簽h類標(biāo)簽一共有h1、h2、h3、h4、h5、h6六個(gè)，h1是最大的標(biāo)題，h6是最小的標(biāo)題,標(biāo)簽重要性依次下降，權(quán)重也依次下降。h標(biāo)簽對(duì)于搜索引擎優(yōu)化（SEO）很重要，因?yàn)樗兄谒阉饕胬斫忭?yè)面的內(nèi)容結(jié)構(gòu)。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例8】打開“第4章-常用標(biāo)簽-p標(biāo)簽-素材.html”，設(shè)置文本段落的首行縮進(jìn)、行高、字體大小、字體樣式、顏色等，提高瀏覽友好度?！景咐?】打開之前手繪的手機(jī)app布局效果圖，如圖4-45所示，將h標(biāo)簽合理應(yīng)用在企業(yè)首頁(yè)各欄目。（1）在內(nèi)容區(qū)域中，分為若干版面，每個(gè)版面都有特定的主題。那些主題就適合采用h類標(biāo)簽書寫用以強(qiáng)調(diào)。（2）編寫對(duì)應(yīng)的CSS代碼。（3）在瀏覽器中運(yùn)行，預(yù)覽效果?！景咐?0】h標(biāo)簽嵌套span標(biāo)簽（1）裝飾性的元素，我們通?？梢圆捎?lt;span>無(wú)語(yǔ)義的標(biāo)簽去定義樣式。（2）編寫對(duì)應(yīng)的CSS代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10練習(xí)1Html及css代碼正確，效果一致30練習(xí)2Html及css代碼正確，效果一致30練習(xí)3Html及css代碼正確，效果一致30總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課，要求我們掌握：（1）P標(biāo)簽的用法和使用場(chǎng)景。（2）p標(biāo)簽的常見(jiàn)樣式設(shè)置。（3）h類標(biāo)簽的使用場(chǎng)景。（4）具備對(duì)p標(biāo)簽容器設(shè)置合理、美觀的樣式的能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.5文本類標(biāo)簽，4.6a標(biāo)簽該班人數(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） 掌握br換行標(biāo)簽的使用。（2） 掌握Span、i無(wú)語(yǔ)義標(biāo)簽的應(yīng)用及使用場(chǎng)景。（3） 掌握strong、em強(qiáng)調(diào)類標(biāo)簽的區(qū)別。（4） 鞏固并深化a標(biāo)簽的用法。能力目標(biāo)：（1） 具備給文本段落合理使用與之對(duì)應(yīng)的Span、i、strong、em標(biāo)簽的能力。（2） 具備設(shè)置a標(biāo)簽及相關(guān)偽類狀態(tài)屬性的能力。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。br、Span、i、strong、em、a標(biāo)簽Span、i無(wú)語(yǔ)義標(biāo)簽的應(yīng)用及使用場(chǎng)景，strong、em標(biāo)簽的區(qū)別。通過(guò)語(yǔ)義的解釋來(lái)理解各標(biāo)簽的用法。a標(biāo)簽的用法。通過(guò)a標(biāo)簽的四個(gè)偽類來(lái)介紹鏈接的樣式應(yīng)用，結(jié)合上網(wǎng)經(jīng)歷來(lái)理解鏈接種類。運(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í)P標(biāo)簽對(duì)應(yīng)的樣式中，面對(duì)中文段落、英文段落，經(jīng)常使用的屬性值有哪些？簡(jiǎn)述h類標(biāo)簽的應(yīng)用場(chǎng)景?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入在以上文章段落中，我們經(jīng)常會(huì)見(jiàn)到字體加粗的外觀，有時(shí)還能見(jiàn)到斜體，或者段落中包含了外部鏈接的情況。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.5.3br標(biāo)簽 <br/>標(biāo)簽是為數(shù)不多的單獨(dú)標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽，它可插入一個(gè)簡(jiǎn)單的換行符。請(qǐng)使用<br/>標(biāo)簽來(lái)輸入空行，而不是分割段落。 <br>和<br/>具有相同作用，但前者是老的HTML規(guī)范，新的規(guī)范要求一切都應(yīng)像XML那樣有結(jié)束符，如果沒(méi)有也要硬加一個(gè)反斜杠。4.5.4span標(biāo)簽和i標(biāo)簽span標(biāo)簽是內(nèi)聯(lián)元素，不像塊級(jí)元素那樣有換行的效果。<i>標(biāo)簽也是內(nèi)聯(lián)元素，它定義與文本中其余部分不同的部分，并把這部分文本呈現(xiàn)為斜體文本。兩者經(jīng)常出現(xiàn)在p標(biāo)簽內(nèi)部，從語(yǔ)義角度來(lái)說(shuō)，這兩者都不包含什么含義，只是為了產(chǎn)生樣式上的變化。4.5.6em、strong標(biāo)簽<em>標(biāo)簽用于定義強(qiáng)調(diào)文本，標(biāo)簽內(nèi)的內(nèi)容通常以斜體顯示。屏幕閱讀器將以強(qiáng)調(diào)方式讀出<em>標(biāo)簽中的單詞，使用語(yǔ)音重音。 <strong>標(biāo)簽用于定義具有很強(qiáng)重要性的文本。其中的內(nèi)容通常以粗體顯示。如果只是要顯示無(wú)重要性的粗體文本，請(qǐng)使用<b>標(biāo)簽！em和strong的主要區(qū)別之處。4.6a標(biāo)簽<a>標(biāo)簽定義超鏈接，a元素最重要的屬性是href屬性，它指定鏈接的目標(biāo)，如果暫時(shí)沒(méi)有明確目標(biāo)，可以采用空鏈接。超鏈接的類型取決于href屬性設(shè)置的類型，包括以下幾種：相對(duì)鏈接：格式只包括"路徑/文件名"，它只能鏈接網(wǎng)站內(nèi)部的頁(yè)面或資源。例如href="image/logo.jpg"是鏈接image文件夾內(nèi)的logo.jpg文件。絕對(duì)鏈接：是嚴(yán)格書寫URL格式的鏈接，一般是指向站點(diǎn)外部的資源。例如，網(wǎng)頁(yè)中有一個(gè)超鏈接是要跳轉(zhuǎn)至百度首頁(yè)，則鏈接地址應(yīng)按照URL格式寫成href=""。一般網(wǎng)站中"友情鏈接"部分的超鏈接均為絕對(duì)鏈接。（3）文件鏈接：也可以直接指向文件。當(dāng)該文件的格式不能被瀏覽器識(shí)別，則會(huì)打開下載窗口提供該文件的下載。例如某鏈接地址為href="/abc.mp3"，則點(diǎn)擊該地址可以實(shí)現(xiàn)下載abc.mp3的功能。（4）空鏈接：不具備跳轉(zhuǎn)功能，但卻顯示為超鏈接的樣式?？真溄拥墓δ?，一是在設(shè)計(jì)制作階段，可以幫助設(shè)計(jì)師提前實(shí)現(xiàn)頁(yè)面效果；二是可以在空鏈接上添加腳本，通過(guò)腳本實(shí)現(xiàn)頁(yè)面互動(dòng)。空鏈接的地址用"#"表示。例如：<ahref=”#”>百度</a>。（5）電子郵件鏈接：鏈接地址為郵件地址，即郵箱號(hào)。當(dāng)點(diǎn)擊該鏈接時(shí)，會(huì)自動(dòng)打開電子郵件的創(chuàng)建向?qū)?。例如?lt;ahref=”mailto:88101010@”>……</a>（6）錨點(diǎn)鏈接：用于跳轉(zhuǎn)到當(dāng)前頁(yè)面或其他頁(yè)面的指定位置。如果目標(biāo)位置是頁(yè)面內(nèi)的一個(gè)特定id，你可以使用#后跟該id名稱來(lái)創(chuàng)建錨鏈接。例如：如果你有一個(gè)id為section2的元素，你可以這樣創(chuàng)建一個(gè)錨鏈接。<ahref="#section2">跳轉(zhuǎn)到第二部分</a>如果你想鏈接到另一個(gè)頁(yè)面的錨點(diǎn)，你需要在href中提供完整的URL加上錨點(diǎn)引用。例如：<ahref="/page.html#section2">跳轉(zhuǎn)到另一頁(yè)的第二部分</a> a標(biāo)簽通常會(huì)跟以下幾種偽類選擇器一起使用。a:link{……}/*未訪問(wèn)的鏈接*/a:visited{……}/*已訪問(wèn)過(guò)的鏈接*/a:hover{……}/*當(dāng)光標(biāo)懸停在鏈接上*/a:active{……}/*光標(biāo)點(diǎn)擊鏈接，不松開左鍵的期間*/通常在實(shí)際案例中，我們只需要設(shè)置a{……}樣式和a:hover{……}樣式即可。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例11】打開之前的“文本類標(biāo)簽-h標(biāo)簽.html”練習(xí)，增加一個(gè)文字類導(dǎo)航條。（1）編寫HTML代碼。（2）編寫對(duì)應(yīng)的CSS代碼。（3）繼續(xù)優(yōu)化一下導(dǎo)航條款式。（4）最后設(shè)置超鏈接的交互樣式，只需要設(shè)置a默認(rèn)樣式和a:hover樣式，a樣式必須在a:hover之前聲明。（5）去除掉導(dǎo)航條各容器的邊框，a容器的width屬性設(shè)置為200px。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展4.5.5sub、sup標(biāo)簽<sub>標(biāo)簽可定義下標(biāo)文本。<sup>可定義上標(biāo)文本。兩者經(jīng)常出現(xiàn)在公式、數(shù)學(xué)表達(dá)式或化學(xué)復(fù)合物的場(chǎng)合。但如果表達(dá)過(guò)于復(fù)雜，寧愿采用圖片的方式。任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10Html結(jié)構(gòu)Li與a標(biāo)簽的包裹關(guān)系正確。30Css樣式A標(biāo)簽的hover響應(yīng)區(qū)域完全覆蓋li元素。30頁(yè)面效果元素整齊，交互效果符合預(yù)期。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）掌握br換行標(biāo)簽的使用。（2）掌握Span、i無(wú)語(yǔ)義標(biāo)簽的應(yīng)用及使用場(chǎng)景。（3）掌握strong、em強(qiáng)調(diào)類標(biāo)簽的區(qū)別。（4）鞏固并深化a標(biāo)簽的用法。具備設(shè)置a標(biāo)簽及相關(guān)偽類狀態(tài)屬性的能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.7圖像、視音頻類標(biāo)簽該班人數(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）掌握?qǐng)D像路徑中的相對(duì)、絕對(duì)路徑。（2）掌握?qǐng)D像常用的樣式外觀設(shè)置。能力目標(biāo)：（1）具備設(shè)計(jì)常見(jiàn)形狀圖片的能力。（2）具備精確計(jì)算圖片在容器內(nèi)部采用的尺寸的能力。素養(yǎng)目標(biāo)：（1）在編程過(guò)程中，強(qiáng)調(diào)細(xì)節(jié)管理、質(zhì)量意識(shí)，培養(yǎng)學(xué)生追求卓越的工匠精神。圖像類標(biāo)簽相對(duì)、絕對(duì)路徑，img標(biāo)簽的類別。通過(guò)展示以往學(xué)生作業(yè)中圖片無(wú)法顯示的問(wèn)題來(lái)講述路徑的設(shè)置。完成一組圖片外觀的樣式定義。通過(guò)案例講解及實(shí)踐，讓學(xué)生掌握?qǐng)D片標(biāo)簽的用法。運(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í)a鏈接的四種偽類，以及四種偽類的定義順序。頁(yè)面實(shí)際操作中，通常定義哪些a標(biāo)簽偽類即可？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入隨著網(wǎng)絡(luò)帶寬的增加，越來(lái)越多的網(wǎng)頁(yè)頻繁使用各種尺寸的圖片，相對(duì)于文字簡(jiǎn)單外觀效果而言，圖片具備更多的操作空間，如何定義美觀、獨(dú)特的圖片外觀，我們要了解img標(biāo)簽的相關(guān)屬性。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.7圖像、視音頻類標(biāo)簽談到些標(biāo)簽，初學(xué)者容器出錯(cuò)的地方在于“src屬性”設(shè)置錯(cuò)誤，不明白相對(duì)路徑與絕對(duì)路徑的區(qū)別，經(jīng)常導(dǎo)致圖片刷不出。相對(duì)路徑：就是相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中一般表示路徑使用這個(gè)方法。相對(duì)路徑所常用的兩個(gè)特殊符號(hào)，"./"代表目前所在的目錄，"../"代表上一層目錄。絕對(duì)路徑：就是該文件在硬盤（主機(jī)）上真正的路徑，絕對(duì)路徑在網(wǎng)頁(yè)中實(shí)際很少用到，可以這么理解，在網(wǎng)頁(yè)中使用http://開頭的地址便是絕對(duì)路徑。4.7.1img標(biāo)簽<img>標(biāo)簽從視覺(jué)上常理感覺(jué)方方正正、大塊的圖像標(biāo)簽應(yīng)該是塊級(jí)元素，但與感覺(jué)相反，img是內(nèi)聯(lián)塊級(jí)標(biāo)簽。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例13】嘗試給如圖4-63所示的圖片增加不一樣的樣式效果，比如邊框、內(nèi)邊距的設(shè)計(jì)。（1）書寫HTML代碼。（2）編寫對(duì)應(yīng)的CSS代碼。【案例14】制作圖片在hover狀態(tài)下，圖片緩慢放大的效果。（1）編寫HTML代碼。（2）編寫對(duì)應(yīng)的CSS代碼。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10練習(xí)1能完成正確的靜態(tài)頁(yè)面效果，html及css代碼正確。50練習(xí)2能完成hover狀態(tài)下的交互，屬性值合理。40總分說(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é)作能力?？偨Y(jié)通過(guò)本課，要求我們：（1）掌握?qǐng)D像路徑中的相對(duì)、絕對(duì)路徑。（2）掌握?qǐng)D像常用的樣式外觀設(shè)置。（3）具備精確計(jì)算圖片在容器內(nèi)部采用的尺寸的能力。（4）在編程過(guò)程中，強(qiáng)調(diào)細(xì)節(jié)管理、質(zhì)量意識(shí)，培養(yǎng)學(xué)生追求卓越的工匠精神。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.7圖像、視音頻類標(biāo)簽該班人數(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） Video、audio標(biāo)簽的簡(jiǎn)單用法。（2） Video、audio標(biāo)簽的相關(guān)屬性。能力目標(biāo)：具備在網(wǎng)頁(yè)中嵌入視音頻的能力。素養(yǎng)目標(biāo)：（1）強(qiáng)調(diào)Video、audio英文單詞的拼讀，加強(qiáng)學(xué)生對(duì)英文的認(rèn)識(shí)，為今后編程道路上克服心理畏懼。Video、audio標(biāo)簽Video、audio標(biāo)簽的簡(jiǎn)單用法。通過(guò)觀看嵌有視頻的網(wǎng)頁(yè)激發(fā)學(xué)生興趣。Video、audio標(biāo)簽的相關(guān)屬性。通過(guò)相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。運(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í)img標(biāo)簽，如果采用標(biāo)簽屬性值的寫法，也就是在html結(jié)構(gòu)中<img>內(nèi)部書寫，規(guī)定圖片的寬高值，那應(yīng)該如何書寫？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入HTML5作為最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)，廣泛支持<video>標(biāo)簽。這意味著在幾乎所有的現(xiàn)代瀏覽器上，都可以無(wú)需任何額外插件或擴(kuò)展即可播放視頻。這種高度的兼容性確保了視頻內(nèi)容能夠在不同平臺(tái)和設(shè)備上無(wú)縫播放，為開發(fā)者提供了極大的便利。<video>標(biāo)簽允許在網(wǎng)頁(yè)中直接嵌入視頻文件，使網(wǎng)頁(yè)內(nèi)容更加生動(dòng)和豐富。無(wú)論是產(chǎn)品演示、教學(xué)視頻還是娛樂(lè)內(nèi)容，視頻元素都能極大地吸引用戶的注意力，提升用戶體驗(yàn)。用戶無(wú)需離開當(dāng)前網(wǎng)頁(yè)，即可觀看視頻內(nèi)容，這大大增強(qiáng)了網(wǎng)頁(yè)的互動(dòng)性和吸引力。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授4.7.2video標(biāo)簽帶寬提升，短視頻橫行，純文字已滿足不了部分人群需求，為了表現(xiàn)出更多的細(xì)節(jié)，烘托更濃烈的氛圍感，越來(lái)越多的網(wǎng)頁(yè)在局部引入視頻元素。☆思政講解1：享受短視頻紅利的時(shí)代。網(wǎng)頁(yè)應(yīng)用紛紛加入短視頻功能，通過(guò)豐富的視頻內(nèi)容提升用戶體驗(yàn)和粘性。同時(shí)，短視頻的算法推薦技術(shù)不斷優(yōu)化，使得內(nèi)容分發(fā)更加精準(zhǔn)，滿足用戶的個(gè)性化需求。未來(lái)，短視頻將繼續(xù)在網(wǎng)頁(yè)應(yīng)用中發(fā)揮重要作用，推動(dòng)互聯(lián)網(wǎng)行業(yè)的創(chuàng)新發(fā)展?！钏颊v解2：切勿發(fā)布未經(jīng)審核、未經(jīng)授權(quán)、未經(jīng)證實(shí)的不明視頻來(lái)源，以免觸犯民法、刑法。H5引入的<video>標(biāo)簽為瀏覽器提供了原生的視頻播放支持，不再需要依賴外部插件如Flash。HTML支持mp4、webm和ogg這三種格式。<video>標(biāo)簽包含一個(gè)或多個(gè)帶有不同視頻源的<source>標(biāo)簽。瀏覽器將選擇它支持的第一個(gè)源。用法常用格式：<videowidth=""height=""controlsloop><sourcesrc=""type="video/mp4"></video>講解<video>標(biāo)簽對(duì)應(yīng)的屬性表。4.7.3audio標(biāo)簽<audio>標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。目前，<audio>元素支持的3種文件格式：Mp3、Wav、Ogg?？梢栽?lt;audio>和</audio>之間放置文本內(nèi)容，這些文本信息將會(huì)被顯示在那些不支持<audio>標(biāo)簽的瀏覽器中。 audio標(biāo)簽的相關(guān)屬性與video大致相同，用法示例如下：<audiocontrols> <sourcesrc="horse.ogg"type="audio/ogg"> <sourcesrc="horse.mp3"type="audio/mpeg"> 您的瀏覽器不支持audio元素。</audio>聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例15】在網(wǎng)頁(yè)中嵌入視頻。（1）把資源包內(nèi)的“unit4-img\banner_mv.mp4”放在站點(diǎn)根目錄下的“video”文件夾中。（2）編寫HTML代碼。（3）在本機(jī)各瀏覽器中預(yù)覽效果，網(wǎng)頁(yè)嵌入視音頻元素有時(shí)會(huì)出現(xiàn)或這或那的兼容問(wèn)題，具體情況可百度相關(guān)異常原因。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10Video標(biāo)簽Html結(jié)構(gòu)代碼正確，屬性值正確。90總分說(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）Video、audio標(biāo)簽的簡(jiǎn)單用法。（2）Video、audio標(biāo)簽的相關(guān)屬性。（3）在網(wǎng)頁(yè)中嵌入視音頻元素。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。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.8列表類標(biāo)簽該班人數(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）dl標(biāo)簽的構(gòu)成和應(yīng)用。（2）多組dl標(biāo)簽的布局。能力目標(biāo)：具備制作企業(yè)網(wǎng)頁(yè)頁(yè)腳的能力。素養(yǎng)目標(biāo)：（1）了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合。dl標(biāo)簽的應(yīng)用dl標(biāo)簽的構(gòu)成。通過(guò)與ul標(biāo)簽的對(duì)比，結(jié)合title、data單詞理解dt、dd子容器。多組dl的布局。通過(guò)