教學(xué)設(shè)計(jì)一、基本信息課程名稱(chēng)Web前端開(kāi)發(fā)技術(shù)課題名稱(chēng)HTML標(biāo)記與文本排版——制作《七律·長(zhǎng)征》古詩(shī)文網(wǎng)頁(yè)授課班級(jí)授課時(shí)間授課類(lèi)型理實(shí)一體化、新授課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)，接入超星教學(xué)平臺(tái)）授課學(xué)時(shí)40分鐘*2學(xué)時(shí)教材分析本節(jié)選自單元2核心內(nèi)容，涵蓋HTML標(biāo)記、語(yǔ)義元素及文本排版，是HTML基礎(chǔ)的核心模塊。教材以古詩(shī)文、中國(guó)基建素材為案例，兼具知識(shí)性與思想性，需強(qiáng)化實(shí)操落地，通過(guò)具象案例幫助學(xué)生掌握標(biāo)簽用法，為后續(xù)超鏈接、圖像學(xué)習(xí)鋪墊。學(xué)情分析1.前置基礎(chǔ)：已掌握VSCode、HBuilderX等開(kāi)發(fā)工具使用，能創(chuàng)建基礎(chǔ)HTML文件并預(yù)覽，具備計(jì)算機(jī)基本操作技能，可銜接標(biāo)簽實(shí)操。

2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、具象思維突出，對(duì)古詩(shī)文、基建等素材興趣濃厚；抽象邏輯較弱，對(duì)標(biāo)簽語(yǔ)義、嵌套規(guī)則理解需實(shí)例引導(dǎo)。

3.潛在不足：缺乏代碼規(guī)范意識(shí)，易混淆標(biāo)簽用法與文本樣式，需通過(guò)分步實(shí)操與糾錯(cuò)訓(xùn)練強(qiáng)化。教學(xué)目標(biāo)【知識(shí)目標(biāo)】：

1.掌握HTML標(biāo)簽的語(yǔ)法規(guī)則、分類(lèi)及屬性用法，認(rèn)識(shí)塊級(jí)、行內(nèi)元素及HTML5新增語(yǔ)義元素。

2.熟練掌握常用文本標(biāo)簽的使用，能完成文本排版、樣式設(shè)置及特殊字符插入。

【能力目標(biāo)】：

1.能運(yùn)用標(biāo)記與文本標(biāo)簽編寫(xiě)古詩(shī)文網(wǎng)頁(yè)，實(shí)現(xiàn)規(guī)范排版與樣式美化。

2.能排查標(biāo)簽嵌套、語(yǔ)法錯(cuò)誤，培養(yǎng)自主糾錯(cuò)能力。

【素質(zhì)目標(biāo)】：

1.通過(guò)古詩(shī)文素材培養(yǎng)民族自豪感，結(jié)合基建情境認(rèn)識(shí)網(wǎng)頁(yè)宣傳價(jià)值。

2.養(yǎng)成規(guī)范編寫(xiě)代碼的習(xí)慣，提升細(xì)節(jié)把控能力。教學(xué)重點(diǎn)1.HTML標(biāo)簽的語(yǔ)法規(guī)則（閉合、嵌套）及常用文本標(biāo)簽的正確使用。

2.運(yùn)用文本標(biāo)簽完成網(wǎng)頁(yè)文本排版與基礎(chǔ)樣式設(shè)置。教學(xué)難點(diǎn)1.塊級(jí)、行內(nèi)元素的區(qū)別及正確嵌套邏輯，避免語(yǔ)法錯(cuò)誤。

2.特殊字符的合理運(yùn)用及文本標(biāo)簽的場(chǎng)景化選擇。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)、投影儀、音響。

2.軟件：超星教學(xué)平臺(tái)（上傳教材案例源碼、AI提示詞模板、糾錯(cuò)素材）、VSCode。

3.素材：《七律·長(zhǎng)征》原文及注釋、標(biāo)簽語(yǔ)法對(duì)照表、特殊字符清單、實(shí)操任務(wù)單。教學(xué)方法1.主導(dǎo)方法：項(xiàng)目引領(lǐng)任務(wù)驅(qū)動(dòng)教學(xué)法。

2.輔助方法：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、糾錯(cuò)訓(xùn)練法。板書(shū)設(shè)計(jì)核心內(nèi)容：1.標(biāo)簽（語(yǔ)法、閉合、嵌套；塊級(jí)/行內(nèi)元素）；2.文本標(biāo)簽（h1-h6、p、b、i等）；3.流程：編寫(xiě)→排版→預(yù)覽→糾錯(cuò)。二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：情境導(dǎo)入，項(xiàng)目發(fā)布（亮點(diǎn)：基建素材+AI輔助）1.情境導(dǎo)入：展示港珠澳大橋、北盤(pán)江大橋等基建工程網(wǎng)頁(yè)截圖，結(jié)合教材情境說(shuō)明網(wǎng)頁(yè)文本排版的重要性；引出《七律·長(zhǎng)征》古詩(shī)文素材，說(shuō)明本節(jié)課核心任務(wù)。

2.項(xiàng)目發(fā)布：明確核心項(xiàng)目“制作《七律·長(zhǎng)征》古詩(shī)文網(wǎng)頁(yè)”，拆解為3個(gè)子任務(wù)——搭建HTML結(jié)構(gòu)、運(yùn)用文本標(biāo)簽排版、優(yōu)化文本樣式與特殊字符。

3.AI輔助：展示超星平臺(tái)AI提示詞模板（如“HTML標(biāo)簽嵌套規(guī)則”“文本標(biāo)簽場(chǎng)景用法”），引導(dǎo)學(xué)生利用AI解決疑問(wèn)。教師：展示基建與古詩(shī)文網(wǎng)頁(yè)案例，講解項(xiàng)目目標(biāo)與成果要求；演示AI提示詞使用方法，強(qiáng)調(diào)AI輔助學(xué)習(xí)的作用。

學(xué)生：觀察案例，明確學(xué)習(xí)目標(biāo)；嘗試用AI查詢(xún)標(biāo)簽基礎(chǔ)用法，記錄核心要點(diǎn)。設(shè)計(jì)意圖：以基建、古詩(shī)文素材激發(fā)興趣，AI輔助貼合前沿教學(xué)，明確任務(wù)方向，銜接前置工具知識(shí)。時(shí)間：10分鐘。環(huán)節(jié)二：理論精講，案例演示（亮點(diǎn)：實(shí)例拆解+易錯(cuò)點(diǎn)標(biāo)注）1.HTML標(biāo)記基礎(chǔ)：

（1）語(yǔ)法規(guī)則：講解標(biāo)簽成對(duì)閉合、自閉合標(biāo)簽（如<br/>）用法，標(biāo)注“標(biāo)簽與<間無(wú)空格、推薦小寫(xiě)”易錯(cuò)點(diǎn)；演示屬性書(shū)寫(xiě)格式（屬性=“值”）。

（2）元素分類(lèi)：講解塊級(jí)（<p>、<h1>）、行內(nèi)元素（<b>、<a>）區(qū)別，演示嵌套規(guī)則（塊級(jí)可包含行內(nèi)，行內(nèi)不嵌套塊級(jí)）。

（3）語(yǔ)義元素：簡(jiǎn)要介紹<header>、<footer>等HTML5新增元素，說(shuō)明語(yǔ)義化優(yōu)勢(shì)。

2.文本標(biāo)簽演示：

（1）排版標(biāo)簽：演示<h1>-<h6>、<p>、<br/>、<hr/>用法，制作古詩(shī)文標(biāo)題、段落與分隔效果。

（2）樣式標(biāo)簽：演示<b>/<strong>、<i>/<em>、<u>等標(biāo)簽，設(shè)置文本加粗、斜體樣式。

（3）特殊字符：講解<、>等字符的實(shí)體表示，演示如何插入空格、版權(quán)符號(hào)。教師：采用理實(shí)一體化教學(xué)法，在VSCode中逐行編寫(xiě)代碼，實(shí)時(shí)預(yù)覽效果；標(biāo)注易錯(cuò)點(diǎn)，引導(dǎo)學(xué)生對(duì)比標(biāo)簽差異。

學(xué)生：跟隨演示仿寫(xiě)代碼，觀察標(biāo)簽效果；記錄語(yǔ)法規(guī)則與易錯(cuò)點(diǎn)，梳理元素分類(lèi)邏輯。設(shè)計(jì)意圖：以實(shí)例拆解抽象理論，易錯(cuò)點(diǎn)標(biāo)注降低失誤率，貼合職校生具象思維，夯實(shí)重點(diǎn)知識(shí)。時(shí)間：20分鐘。環(huán)節(jié)三：分步實(shí)操，突破難點(diǎn)（亮點(diǎn)：分層任務(wù)+自主糾錯(cuò)）分步實(shí)操任務(wù)（獨(dú)立完成，分層設(shè)計(jì)）：

1.基礎(chǔ)層（必做）：

（1）搭建結(jié)構(gòu)：新建HTML文件，編寫(xiě)完整文檔結(jié)構(gòu)，用<header>包裹標(biāo)題，<section>包裹正文。

（2）文本排版：用<h1>設(shè)置標(biāo)題，<p>分段編寫(xiě)詩(shī)句與注釋?zhuān)?lt;br/>換行、<hr/>分隔內(nèi)容。

2.提高層（選做）：

（1）樣式優(yōu)化：用<strong>、<em>設(shè)置標(biāo)題、注釋樣式；插入特殊字符調(diào)整排版間距。

（2）糾錯(cuò)訓(xùn)練：故意植入標(biāo)簽嵌套錯(cuò)誤（如行內(nèi)嵌套塊級(jí)），引導(dǎo)學(xué)生排查修正。教師：巡視指導(dǎo)，重點(diǎn)幫扶基礎(chǔ)薄弱學(xué)生；提供糾錯(cuò)清單，引導(dǎo)學(xué)生自主排查語(yǔ)法錯(cuò)誤；答疑解惑，強(qiáng)化難點(diǎn)突破。

學(xué)生：按分層任務(wù)編寫(xiě)代碼，實(shí)時(shí)預(yù)覽效果；自主排查錯(cuò)誤，記錄糾錯(cuò)方法；完成基礎(chǔ)任務(wù)后嘗試提高層內(nèi)容。設(shè)計(jì)意圖：分層任務(wù)兼顧不同水平學(xué)生，自主糾錯(cuò)強(qiáng)化難點(diǎn)突破，培養(yǎng)獨(dú)立實(shí)操與問(wèn)題解決能力。時(shí)間：25分鐘。環(huán)節(jié)四：小組互評(píng)，優(yōu)化提升（亮點(diǎn)：互評(píng)標(biāo)準(zhǔn)+案例點(diǎn)評(píng)）小組任務(wù)（4人一組）：

1.成果互評(píng)：每組對(duì)照互評(píng)標(biāo)準(zhǔn)（標(biāo)簽規(guī)范、排版合理、無(wú)語(yǔ)法錯(cuò)誤），交叉檢查網(wǎng)頁(yè)，標(biāo)注問(wèn)題并提出修改建議。

2.優(yōu)化完善：根據(jù)小組建議修改代碼，補(bǔ)充特殊字符與文本樣式，提升網(wǎng)頁(yè)美觀度。

3.案例分享：每組推選1份優(yōu)秀作品，上傳至超星平臺(tái)，由作者分享編寫(xiě)思路。教師：明確互評(píng)標(biāo)準(zhǔn)，引導(dǎo)小組聚焦重難點(diǎn)；點(diǎn)評(píng)優(yōu)秀作品，講解典型錯(cuò)誤（如標(biāo)簽嵌套混亂）的修正方法；總結(jié)文本標(biāo)簽使用技巧。

學(xué)生：小組內(nèi)交叉互評(píng)，主動(dòng)發(fā)現(xiàn)問(wèn)題并修正；學(xué)習(xí)優(yōu)秀作品亮點(diǎn)，優(yōu)化自身網(wǎng)頁(yè)；分享編寫(xiě)心得，深化知識(shí)理解。設(shè)計(jì)意圖：通過(guò)互評(píng)強(qiáng)化代碼規(guī)范意識(shí)，借助同伴互助解決個(gè)性化問(wèn)題，案例分享提升表達(dá)與總結(jié)能力。時(shí)間：15分鐘。環(huán)節(jié)五：課堂小結(jié)，布置作業(yè)1.小結(jié)：梳理本節(jié)課核心內(nèi)容（標(biāo)簽語(yǔ)法、元素分類(lèi)、文本標(biāo)簽、特殊字符），回顧重難點(diǎn)與易錯(cuò)點(diǎn)，強(qiáng)化“編寫(xiě)-預(yù)覽-糾錯(cuò)”流程。

2.作業(yè)布置：明確課后任務(wù)要求，強(qiáng)調(diào)代碼規(guī)范與成果提交節(jié)點(diǎn)。教師：引導(dǎo)學(xué)生自主總結(jié)，補(bǔ)充完善知識(shí)框架；通過(guò)超星平臺(tái)發(fā)布作業(yè)，附上拓展資料（語(yǔ)義元素進(jìn)階用法）。

學(xué)生：梳理知識(shí)要點(diǎn)與實(shí)操流程，記錄作業(yè)要求；保存網(wǎng)頁(yè)文件，預(yù)習(xí)下一課時(shí)超鏈接內(nèi)容。設(shè)計(jì)意圖：固化知識(shí)體系，強(qiáng)化實(shí)操思維；通過(guò)作業(yè)延伸鞏固重點(diǎn)，為后續(xù)學(xué)習(xí)鋪墊。時(shí)間：10分鐘。三、課后作業(yè)和教學(xué)反思課后作業(yè)1.優(yōu)化課堂編寫(xiě)的古詩(shī)文網(wǎng)頁(yè)，補(bǔ)充2個(gè)特殊字符，調(diào)整文本樣式，確保代碼規(guī)范、排版美觀，上傳至超星平臺(tái)。

2.熟記常用文本標(biāo)簽與特殊字符實(shí)體，完成超星平臺(tái)標(biāo)簽語(yǔ)