目标：把真实博客内容转译为可教、可练、可评的 HTML 部件清单，并与《项目执行进度》《课程标准》《12周教学方案》对齐，形成可落地的大作业装配图与第一步行动计划。 依据文件：《我的博客.xml》《项目执行进度安排》《课程标准》《12周教学方案》《个人博客与web前端技术的关系》。

一、网站信息 → 可教的“页面大装配图”

从 XML 抽取的关键信息（证据）

• 站点标题/描述/主页链接：<title>前端成长工坊</title>、<description>记录 ·呈现 ·看见</description>、<link><https://jane6406.wordpress.com></link>。
• 站点图标（favicon 位）：<image><url>…/wp-content/uploads/…/站点logo…w=32</url></image>。
• 多个“站点logo\*”“首页图”等附件，作为品牌与首屏素材库（有 attachment_url）。
• 页面《联系》包含 Jetpack 表单块（姓名/邮箱/信息/提交按钮），可映射为原生 <form> 练习。
• 页面/分类/标签项完整，可用于导航与信息架构示例（如“教学日志/学生作品/学生博客链接/标签：AI协作”等）。
• 若干表单提交记录（feedback），可用于表单 → 邮件模板 → 语义/可访问性教学（含完整 HTML 邮件骨架）。

装配图分区（教学入口）Header：站点名称 + 站点 Logo + 导航 Main：首屏图/文章列表/文章页内容 Aside：分类/标签/推荐文章 Footer：版权/社交/快速链接 （与《关系图》中 header/nav/main/footer 的语义化映射一致）。

二、按“博客部件”拆解（含：部件名｜证据｜教学用 HTML 代码（最小可运行）｜可组合的大模块）

提示：代码均为可直接贴入的“无样式原生 HTML”版本，便于与《12周教学方案》W1–W3 的语义与布局进度衔接。

1）站点名称（Site Title）

• 证据：<channel><title>前端成长工坊</title></channel>。
• HTML（教学版）：

<a class="site-title" href="/" aria-label="前端成长工坊-主页">
  <h1>前端成长工坊</h1>
</a>

• 可组合模块：与“站点 Logo”“主导航”一起组成 Header 标题区。

2）站点 Logo（Brand Mark）