4.3 图像（img元素）——让网页会说话的眼睛
朋友们，想象一下如果网页只有密密麻麻的文字，那该多枯燥啊！好在HTML给我们准备了一个神奇的标签——<img>，它就像给网页装上了一双双会说话的眼睛。今天，我们就来好好认识这位"图片搬运工"。
一、最基本的图片用法
<img src="小猫.jpg" alt="一只橘色的小猫在晒太阳">看，插入图片就这么简单！这里有两个关键信息：
- src（source的缩写）：告诉浏览器"图片在哪里"
- alt（alternative text）：当图片无法显示时，告诉用户"这里本来是什么"
小贴士：alt属性不是可有可无的装饰品！它对视障用户非常重要，屏幕朗读器会朗读这些文字。就像给图片配了一个"语音解说员"。
二、给图片加点"修饰"
我们可以给图片添加更多属性，让它更"懂事"：
<img src="风景.jpg"
alt="日落时分的海滩"
width="800"
height="600"
title="点击可以放大查看"
loading="lazy">这些属性就像给图片穿上了不同的"衣服"：
- width/height：设定图片的"身材尺寸"（单位是像素）
- title：鼠标悬停时显示的"小提示"
- loading：lazy表示"图片进入视线范围再加载"，网页加载更快
实用技巧：设置width和height时最好保持图片原始比例，否则图片会"变形"。就像把手机照片强行拉成电脑壁纸那样别扭！
三、图片路径的"寻宝游戏"
图片可以放在不同位置，我们需要用正确的"藏宝图"（路径）找到它：
- 同个文件夹：直接写文件名 <img src="logo.png" alt="网站标志">
- 子文件夹：用文件夹名/文件名 <img src="images/header.jpg" alt="网页顶部图片">
- 上级文件夹：用../返回上一层 <img src="../assets/icon.png" alt="返回图标">
- 网络图片：使用完整网址 <img src="https://example.com/pic.jpg" alt="网络图片示例">
注意：使用别人网站的图片可能涉及版权问题，就像不能随便拿商店里的商品一样！
四、现代网页的图片新玩法
现在图片也有"智能模式"了：
<!-- 响应式图片，根据屏幕大小自动选择 -->
<picture>
<source media="(min-width: 800px)" srcset="大图.jpg">
<source media="(min-width: 400px)" srcset="中图.jpg">
<img src="小图.jpg" alt="响应式图片示例">
</picture>
<!-- 支持高清屏的清晰图片 -->
<img src="普通图.jpg" srcset="高清图.jpg 2x" alt="高清图片示例">这些新特性就像给图片装上了"智能大脑"：
- picture元素：让图片会"自动变身"适应不同设备
- srcset：为高清屏幕准备更清晰的版本
五、必须知道的图片礼仪
- 格式选择有讲究：JPEG：适合照片（像手机拍的生活照）PNG：需要透明背景时使用（比如网站Logo）GIF：简单动画（比如会眨眼的表情）WebP：新一代格式，体积更小
- 尺寸优化很重要：大图会拖慢网页速度，就像背着沉重书包跑步可以用Photoshop或在线工具压缩图片
- 版权意识不能少：使用无版权图片网站（如Unsplash、Pixabay）或者自己拍摄/制作的图片
六、动手时间：做个图片展示墙
<!DOCTYPE html>
<html>
<head>
<title>我的旅行相册</title>
<style>
.photo-wall {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.photo {
width: 200px;
border: 3px solid #eee;
border-radius: 5px;
transition: transform 0.3s;
}
.photo:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<h1>我的旅行回忆</h1>
<div class="photo-wall">
<img src="travel/巴黎.jpg" alt="埃菲尔铁塔" class="photo" title="法国巴黎">
<img src="travel/东京.jpg" alt="东京塔" class="photo" title="日本东京">
<img src="travel/纽约.jpg" alt="自由女神像" class="photo" title="美国纽约">
</div>
</body>
</html>这个例子展示了：
- 用<img>标签显示多张图片
- 用CSS让图片排列整齐
- 添加了鼠标悬停放大效果
- 每张图片都有说明文字
记住，网页上的图片就像餐厅的菜单照片——既要美观吸引人，又要真实不夸张。现在，试着在你的网页上添加一些图片吧！下次我们会学习如何让这些图片变成可点击的链接，让它们真正"活"起来。