好嘞！在你刚才的 index.html 基础上，我们把它升级为带有图片的页面（图文混排的最小可运行示例）。这一步精准对应课标里“HTML 图像标签、相对路径和绝对路径”的要求与成果产出。

组件加练：图文混排（在首页插入一张图片）

学习目标（对齐课标）

• 会在已有页面中插入一张图片并正确显示（图像标签 <img>）。
• 说清相对路径与绝对路径差别，并能用相对路径管理项目内资源。
• 页面可见成果：标题 + 一段文字 + 一张图片（自适应不变形）。

一、准备素材（2 分钟）

1. 在项目根目录新建文件夹：images/
2. 放入一张图片，文件名例如：campus.jpg（建议英文小写、无空格；≈200–800KB）。

若暂时没有图片，可先用占位图地址（绝对路径）： https://picsum.photos/800/400（演示绝对路径的概念；正式提交请换成本地相对路径） 。

二、最小可运行代码（直接复制到你的 index.html 中 <body> 里）

在前一版“Hello Blog”下面追加以下代码块即可。

<h2>今天的校园一角</h2>
<p>这是我为博客准备的第一张图片，来自我的素材库。</p>

<!-- 相对路径示例（推荐） -->
<img src="images/campus.jpg" alt="校园操场与教学楼的清晨" width="800" />

<!-- 如果你暂时没有图片，可先用绝对路径（占位图），演示后改回相对路径 -->
<!-- <img src="<https://picsum.photos/800/400>" alt="占位图示例" width="800" /> -->

讲解要点

• <img> 是空标签，常用属性：src（来源）、alt（替代文本，提升无障碍/SEO）、width/height。
• 相对路径：images/campus.jpg 表示从当前页面出发去找 images 文件夹里的图片（项目内资源的常规做法）。
• 绝对路径：包含完整协议与域名，如 https://…，依赖网络；课堂可以临时演示，项目提交建议改回相对路径 。

三、让图片自适应（可选 2 行 CSS，美观不变形）

把下面 <style> 粘到你的 <head> 里，或稍后单独建 blog.css（下一节会系统讲 CSS）。