学生动手搭出标题区需要掌握的实际编码能力。

1. HTML 结构搭建（无CSS）

   • 使用 <header> 创建标题区容器。
   • 嵌入 Logo 图片并控制尺寸。
   • 添加站点名称并与 Logo 对齐。
   • 创建主导航列表并添加导航项。

   对应资料 E:\25-26-1\web前端与个人博客项目\博客拆解\HTML\我的博客复原\标题区\无CSS

2. CSS 样式实现

   • 布局技能：display: flex 实现 Logo + 标题 + 导航横向排列。
   • 对齐与间距：align-items: center、gap、padding。
   • 字体与颜色：字体粗细、大小、颜色的设置。
   • 悬停效果：导航链接 hover 状态（颜色变化、下划线、边框）。

3. 资源引用

   • 正确编写 <img src> 路径，确保 Logo 正常加载。
   • 在 <head> 里使用 <link rel="stylesheet"> 引入外部 CSS 文件。

   对应资料 E:\25-26-1\web前端与个人博客项目\博客拆解\HTML\我的博客复原\标题区\有CSS

4. 响应式适配（进阶）

   • 媒体查询（@media）在小屏设备下调整导航间距、字体大小。
   • 为移动端准备折叠菜单的 HTML 结构（为后续 JS 交互留接口）。

三、教学衔接建议

• 第一周（HTML 结构与语义化）
  • 完成标题区的 HTML 骨架（无样式），理解结构。
• 第二周（CSS 布局与表现）
  • 给标题区加样式：布局、配色、悬停效果、间距。
• 第三周（可访问性与优化）
  • 加 alt、aria-label，确保无样式下仍可使用。
• 第四周（响应式设计）
  • 添加媒体查询，让标题区在手机端也好看、可用。