第2课 揭秘神奇的标记语言 教学设计
教学内容分析
本课处于单元“探秘—揭秘—编辑—优化—发布”链条的第二环，是对第1课“网页数据旅程”的纵深拆解：学生已知道“网页是一份被浏览器解释的数据”，接下来必须弄清“这份数据为什么能被解释得如此丰富多彩”。本课聚焦HTML标记语言与CSS样式表语言，既承担技术解码功能，也承担思维建模功能——HTML提供语义骨架，CSS负责视觉呈现，二者共同体现“结构—表现分离”的计算思维。掌握标记语言不仅让学生具备“写网页”的硬技能，更让他们理解“标准—兼容—共享”的互联网价值观念：只有遵循公共语法，信息才能跨设备、跨人群无障碍流动。已学的“网页加载流程”为本课提供了需求情境——学生将亲手改写加载流程中的那段文本数据，使其从单调文本变为结构清晰、样式美观的页面，形成“体验—原理—实践”的完整闭环。
学习者分析
学生已具备基本网页浏览经验，对网页构成有初步感性认识，但尚未接触HTML等标记语言的具体概念。他们好奇心强，乐于动手尝试，但可能对代码编写的严谨性感到陌生，需通过直观、有趣的任务引导，逐步建立标记与呈现的对应关系。
学习目标确定
通过“标签对对碰”游戏活动，掌握常见HTML标签的书写及配对规则，提升符号敏感度和细心观察能力。
通过“结构—表现分离”鱼骨图设计活动，掌握HTML搭建骨架、CSS添加样式的基本流程，提升系统化设计思维。
通过“学校名片”页面实操活动，掌握标题、段落、图片、链接四种核心标签及背景色、居中两种CSS属性的运用，提升用代码解决真实问题的能力。
通过同伴互评点赞墙活动，掌握发现并欣赏他人优点的表达方式，提升审美判断与交流合作素养。
教学重点和难点
教学重点：标题、段落、图片、链接四种核心标签及背景色、居中两种CSS属性的运用。
教学难点：HTML搭建骨架、CSS添加样式的基本流程。
教学活动设计
教师活动 学生活动 支撑的资源
环节一 聚焦
教师展示一张纯文字的“学校简介”，随后切换成同内容但经过美化的网页版本。提问：“为什么同一段文字，换件‘外衣’就能脱胎换骨？”抛出核心悬念，并板书课题。随后发放“今日任务卡”，明确三项任务：用标签搭骨架、用样式穿外衣、让网页开口说话。 学生观看对比效果，在便利贴上写下“我最想立刻改变的1个地方”贴到黑板上；浏览任务卡，确认个人角色（结构师/美工/文案）。 纯文字网页截图、美化后网页截图、便利贴、任务卡。
活动意图说明：通过强烈视觉反差激活审美与好奇心，让学生带着真实需求进入标记语言世界。
环节二 探索
教师发放打乱顺序的“标签对对碰”卡片（如

、

等），宣布2分钟配对挑战。 随后，教师演示，现场修改一段HTML代码，每加一行标签即刻呈现效果，引导学生观察“结构变化→页面变化”的对应关系。 四人一组快速配对卡片。 观看教师演示，并着在教师提供的半成品代码中尝试插入

。 标签卡片、Live Server 插件、半成品HTML、探索记录表。
活动意图说明：游戏化配对降低认知门槛，实时预览让学生直观感受标签语义，奠定“结构—表现分离”的初步印象。
环节三 设计
教师引导学生在A3纸上绘制“鱼骨图”：鱼头写“学校名片”，主骨依次列出header、nav、main、sidebar、footer，支骨写对应CSS关键词（背景色、字体、居中）。教师用颜色便签示范区分“结构蓝”和“样式红”，提醒留白区域稍后放图片与文字。 小组头脑风暴：结构师贴蓝色便签决定标签顺序，美工贴红色便签规划样式，文案草拟文字内容；完成后用手机拍照上传到班级群，形成可共享的设计蓝图。 A3鱼骨图模板、双色便签、记号笔、手机拍照上工具或平台。
活动意图说明：把抽象编码任务转化为可视化设计任务，既理清思路又训练系统思考，为后续敲代码扫清障碍。
环节四 实现
教师示范新建“school.html”和“style.css”，板书内部样式表格式，随后发布“错标签急救包”二维码，内含常见错误对照表。教师巡视，针对个别小组进行指导。 依据鱼骨图在本地文件夹完成“学校名片”雏形：至少包含一张校园图片、一段欢迎文字、一个回到顶部的锚链接；完成后把文件夹命名为“组号名片”拷入教室共享盘“今日成果”目录，并在电脑屏幕贴绿色完成签。 空白模板、校园图片素材库、内部样式表范例、错标签急救包二维码、共享盘、绿色完成签。
活动意图说明：学生在真实编码环境中迁移设计蓝图，体验“写一行、看一行”的即时反馈，培养代码调试与问题解决能力。
环节五 拓展
教师打开共享盘，用大屏轮播各组作品，现场生成点赞墙二维码。 为获得“最佳骨架奖”“最佳配色奖”的小组颁发纸质徽章。 布置家庭拓展任务：把页面压缩包通过微信发给家长，让家长用浏览器打开并语音反馈“最喜欢的设计点”，回执单第二堂课回收。 欣赏同伴作品，评价点赞。 领取徽章。 回家后收集家长语音或文字反馈并截图保存。
活动意图说明：把课堂评价升级为即时荣誉，再把学习场景延伸到家庭，形成家校共育的展示与激励网络，持续激发学生深入学习标记语言的兴趣。