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知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。24.4結(jié)構(gòu)類標(biāo)簽該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標(biāo)：（1）掌握article、section、footer標(biāo)簽的寫法。（2）理解article、section的使用場景。能力目標(biāo)：（1）具備合理使用article、section及互相嵌套的設(shè)計能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。article、section、footer標(biāo)簽article、section、footer標(biāo)簽的寫法。通過案例講解，讓學(xué)生在不同場景中體會選擇適合的標(biāo)簽。實(shí)際應(yīng)用article、section標(biāo)簽完成文章詳情頁。通過具體案例練習(xí)，讓學(xué)生掌握對應(yīng)的標(biāo)簽用法。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動教學(xué)，鼓勵學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺，提供個性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識點(diǎn)，引入本次課的相關(guān)知識點(diǎn)的背景知識，然后講授具體的知識要點(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é)生自我評價或小組評價完成任務(wù)的檢測，教師最終進(jìn)行點(diǎn)評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)<nav>標(biāo)簽是否只能夠出現(xiàn)在網(wǎng)頁的主導(dǎo)航上？在頁面中經(jīng)常出現(xiàn)在什么位置上？回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識結(jié)構(gòu)。引入對于文章詳情頁來說，結(jié)構(gòu)性標(biāo)簽不僅僅體現(xiàn)在header、nav等等，其中大量的版面，大量的文字段落，都需要采用針對圖文混排的結(jié)構(gòu)性標(biāo)簽section，當(dāng)然section標(biāo)簽不僅僅可以定義圖文混排的場景，在商業(yè)網(wǎng)頁中經(jīng)常拿該標(biāo)簽用于定義大的版面。博客中的一篇文章，論壇中的一個帖子或者一段瀏覽者的評論等。因?yàn)閍rticle元素是一段獨(dú)立的內(nèi)容，所以article元素中，通常包含頭部（header元素）、底部（footer元素）。section元素的作用，是對頁面上的內(nèi)容分塊處理，例如對文章分段等，相鄰的section元素的內(nèi)容，應(yīng)當(dāng)是相關(guān)的，而不是像article那樣獨(dú)立。聽講講授，演示。任務(wù)驅(qū)動法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識講授4.4.3article標(biāo)簽<article>標(biāo)簽用于標(biāo)記獨(dú)立、完整的內(nèi)容塊，這通常表現(xiàn)為一個文章或者文章的一部分、論壇帖子、雜志或報紙文章、博客條目、用戶評論等。該標(biāo)簽的使用在結(jié)構(gòu)化語義上非常有幫助。例如，在博客中，每個帖子可以被標(biāo)記為一個<article>元素，其中包括標(biāo)題、作者、發(fā)布日期和文章內(nèi)容。這種做法增強(qiáng)了頁面的語義，便于搜索引擎和輔助技術(shù)更好地理解內(nèi)容的結(jié)構(gòu)，并按照其獨(dú)立性和完整性對其進(jìn)行索引。用法示例： <article> <header><h1>帖子標(biāo)題</h1><p>發(fā)布于1月1日</p></header><p>這里是文章的第一個段落。</p><footer><p>作者A</p></footer></article>4.4.4section標(biāo)簽section元素是HTML5中用于定義文檔結(jié)構(gòu)中獨(dú)立部分的元素。它表示文檔中的一個主題或內(nèi)容區(qū)域，并可以包含標(biāo)題、段落、圖像、列表和其他內(nèi)容元素。通常<section>標(biāo)簽表示為頁面中的版塊、文章的章節(jié)?？梢赃@么理解，一份報紙多個版面（section），每個版面可以有多篇文章（article），每篇文章里面又包含多個章節(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é)的頁腳。<footer>元素通常包含有作者信息、版權(quán)信息、聯(lián)系信息、站點(diǎn)地圖、返回頂部鏈接、相關(guān)頁面。您可以在一個文檔中包含多個<footer>元素，但對于本書練習(xí)中，通常只需要用一個footer容器即可。 用法示例：<footer> <p>作者：Rose</p> <p><ahref="mailto:rose@">rose@</a></p></footer>聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對個別難以理解的知識點(diǎn)有直觀的剖析。任務(wù)實(shí)施【練習(xí)1】一篇文章的html結(jié)構(gòu)輸入以下代碼：<article><header><h1>計算機(jī)各類語言介紹</h1></header><p>本文列舉了部分計算機(jī)語言的一些介紹</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è)置對應(yīng)的樣式，要求預(yù)覽后布局整齊、效果美觀。上機(jī)操作巡堂指導(dǎo)，提醒易出錯的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分項(xiàng)目搭建站點(diǎn)結(jié)構(gòu)正確，文件命名合理。10容器結(jié)構(gòu)結(jié)構(gòu)合理，標(biāo)簽正確。30樣式屬性值正確，選擇器命名合理。40整體預(yù)覽效果布局整齊、效果美觀20總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評作業(yè)抽樣點(diǎn)評分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課，要求我們掌握：（1）掌握article、section、footer標(biāo)簽的寫法。（2）理解article、section的使用場景。（3）具備合理使用article、section及互相嵌套的設(shè)計能力