一、博客功能 → 教学内容对照清单

依据：你的博客目标与使用场景（教学日志、学生作品、教学资源）已在站内文章中明确，这是我们教学目标对齐的基线。

A. HTML 模块（结构与语义）

学习重点

• 基本骨架：<!DOCTYPE> <html> <head> <body>
• 文档区域：<header> <nav> <main> <article> <section> <aside> <footer>
• 内容元素：<h1–h6> <p> <ul/ol/li> <a> <img> <figure> <figcaption> <table>
• 可访问性基础：alt、表单 label 关联、语义标签优先

来自博客的“结构”练习

• 导航与信息架构：把博客“教学日志 / 学生作品 / 教学资源”变成语义化导航与页面骨架（首页、列表页、详情页）。
• 文章页原型：标题、时间、作者、正文、上一篇/下一篇占位
• 资源清单页：无样式的纯 HTML 列表（先不管样式）

课堂任务（仅 HTML，不写 CSS/JS）

• 用语义化标签复刻首页骨架与导航占位
• 做一份“文章页”语义化原型（标题、段落、图片 + 图注）

AI Prompt（示例）

“请只用 HTML5 语义标签写一个博客首页骨架，包括 header/nav/main/footer、文章列表（每篇用 article+header+h2+time），不要写任何 CSS 或 JS。”

B. CSS 模块（表现与布局）