HTML5使用標簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。24.7圖像、視音頻類標簽該班人數(shù)M人，年齡約N歲，中技階段，學習本課程之前已有一定的計算機基礎(chǔ)認知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標：（1） Video、audio標簽的簡單用法。（2） Video、audio標簽的相關(guān)屬性。能力目標：具備在網(wǎng)頁中嵌入視音頻的能力。素養(yǎng)目標：（1）強調(diào)Video、audio英文單詞的拼讀，加強學生對英文的認識，為今后編程道路上克服心理畏懼。Video、audio標簽Video、audio標簽的簡單用法。通過觀看嵌有視頻的網(wǎng)頁激發(fā)學生興趣。Video、audio標簽的相關(guān)屬性。通過相關(guān)案例的屬性設(shè)置前后對比，讓學生加強理解與認識。運用實例演示法，通過實際案例或操作演示，讓學生直觀理解抽象概念。實施項目驅(qū)動教學，鼓勵學生獨立或分組完成任務(wù)，培養(yǎng)團隊協(xié)作與問題解決能力。利用在線實訓平臺，提供個性化學習路徑，滿足不同水平學生的學習需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關(guān)知識點的背景知識，然后講授具體的知識要點及任務(wù)實現(xiàn)的注意事項，通過任務(wù)實施環(huán)節(jié)讓學生各自或分組進行練習。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當?shù)难a充，根據(jù)學生接納情況選擇性講解任務(wù)擴展內(nèi)容，最后以學生自我評價或小組評價完成任務(wù)的檢測，教師最終進行點評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務(wù)要求復(fù)習img標簽，如果采用標簽屬性值的寫法，也就是在html結(jié)構(gòu)中<img>內(nèi)部書寫，規(guī)定圖片的寬高值，那應(yīng)該如何書寫？回答問題教師提問，演示。思維導圖法或問題導向法幫助學生整理知識結(jié)構(gòu)。引入HTML5作為最新的網(wǎng)頁標準，廣泛支持<video>標簽。這意味著在幾乎所有的現(xiàn)代瀏覽器上，都可以無需任何額外插件或擴展即可播放視頻。這種高度的兼容性確保了視頻內(nèi)容能夠在不同平臺和設(shè)備上無縫播放，為開發(fā)者提供了極大的便利。<video>標簽允許在網(wǎng)頁中直接嵌入視頻文件，使網(wǎng)頁內(nèi)容更加生動和豐富。無論是產(chǎn)品演示、教學視頻還是娛樂內(nèi)容，視頻元素都能極大地吸引用戶的注意力，提升用戶體驗。用戶無需離開當前網(wǎng)頁，即可觀看視頻內(nèi)容，這大大增強了網(wǎng)頁的互動性和吸引力。聽講講授，演示。任務(wù)驅(qū)動法，讓學生了解任務(wù)目標。思考教師引導、提示知識講授4.7.2video標簽帶寬提升，短視頻橫行，純文字已滿足不了部分人群需求，為了表現(xiàn)出更多的細節(jié)，烘托更濃烈的氛圍感，越來越多的網(wǎng)頁在局部引入視頻元素?！钏颊v解1：享受短視頻紅利的時代。網(wǎng)頁應(yīng)用紛紛加入短視頻功能，通過豐富的視頻內(nèi)容提升用戶體驗和粘性。同時，短視頻的算法推薦技術(shù)不斷優(yōu)化，使得內(nèi)容分發(fā)更加精準，滿足用戶的個性化需求。未來，短視頻將繼續(xù)在網(wǎng)頁應(yīng)用中發(fā)揮重要作用，推動互聯(lián)網(wǎng)行業(yè)的創(chuàng)新發(fā)展。☆思政講解2：切勿發(fā)布未經(jīng)審核、未經(jīng)授權(quán)、未經(jīng)證實的不明視頻來源，以免觸犯民法、刑法。H5引入的<video>標簽為瀏覽器提供了原生的視頻播放支持，不再需要依賴外部插件如Flash。HTML支持mp4、webm和ogg這三種格式。<video>標簽包含一個或多個帶有不同視頻源的<source>標簽。瀏覽器將選擇它支持的第一個源。用法常用格式：<videowidth=""height=""controlsloop><sourcesrc=""type="video/mp4"></video>講解<video>標簽對應(yīng)的屬性表。4.7.3audio標簽<audio>標簽定義聲音，比如音樂或其他音頻流。目前，<audio>元素支持的3種文件格式：Mp3、Wav、Ogg?？梢栽?lt;audio>和</audio>之間放置文本內(nèi)容，這些文本信息將會被顯示在那些不支持<audio>標簽的瀏覽器中。 audio標簽的相關(guān)屬性與video大致相同，用法示例如下：<audiocontrols> <sourcesrc="horse.ogg"type="audio/ogg"> <sourcesrc="horse.mp3"type="audio/mpeg"> 您的瀏覽器不支持audio元素。</audio>聽講演示任務(wù)達到的效果，講解代碼演示法讓學生明確分階段或最終的任務(wù)效果。講授法讓學生掌握完成本次任務(wù)需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。任務(wù)實施【案例15】在網(wǎng)頁中嵌入視頻。（1）把資源包內(nèi)的“unit4-img\banner_mv.mp4”放在站點根目錄下的“video”文件夾中。（2）編寫HTML代碼。（3）在本機各瀏覽器中預(yù)覽效果，網(wǎng)頁嵌入視音頻元素有時會出現(xiàn)或這或那的兼容問題，具體情況可百度相關(guān)異常原因。上機操作巡堂指導，提醒易出錯的事項實踐法旨在培養(yǎng)學生項目開發(fā)能力。任務(wù)擴展任務(wù)檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分項目搭建站點結(jié)構(gòu)正確，文件命名合理。10Video標簽Html結(jié)構(gòu)代碼正確，屬性值正確。90總分說明：評分項目為任務(wù)實施中要求學生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能力。總結(jié)通過本課，