太棒了！先上第一个组件的“讲义大纲”——组件 1：网页框架（Hello Blog）。我把它做成“45 分钟就能见成果”的格式：有目标、有步骤、有代码、有评价点，直接能带班用。

组件 1：网页框架（Hello Blog）

1）面向学生画像与课时

• 对象：零基础大一新生；不熟悉电脑与 VS Code
• 时长：45 分钟（演示 10’ → 跟做 20’ → 自主练习 10’ → 小结 5’）
• 可见成果：浏览器打开 index.html，页面显示 Hello Blog

2）SMART 学习目标

• S（具体）：能新建项目文件夹，使用 VS Code 创建并保存 index.html，写出 HTML5 文档骨架与页面标题、主标题。
• M（可衡量）：运行后地址栏显示本地文件，标签页显示自定义标题；页面中心出现“Hello Blog”与一段说明文字。
• A（可达成）：提供模板与演示，学生按步骤完成。
• R（相关性）：对应课标“认识网页/HTML5 语义化标签入门”，为后续图文混排与样式奠基（认识网页与 HTML 概念、浏览器解析呈现等内容可作为导入点 ）。
• T（时限）：单次 45 分钟内完成并提交页面截图（含标题与正文）。

3）核心知识点（与课标对齐）

• HTML 文档类型与标准模式：<!DOCTYPE html>（为什么要写、写在第一行、影响浏览器解析）
• HTML5 基本结构：<html> <head> <meta> <title> <body>；内容与样式、行为分离的基本观念（语义化的意义）
• “认识网页”：网页由文字/图片/链接等组成，经浏览器解析与渲染呈现给用户（从“能看网页”到“能写网页”的第一步） 。

说明：后续组件将引入外链 CSS（<link>）与基本样式；此处只需了解“样式以后再加”即可（外链 CSS 的标准用法示例供教师答疑参考 ）。

4）运行效果（教师展示）

• 浏览器标签显示：My First Blog