第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鱼骨图模板、双色便签、记号笔、手机拍照上工具或平台。 活动意图说明：把抽象编码任务转化为可视化设计任务，既理清思路又训练系统思考，为后续 ... ...