图像基础
img 标签 src/alt、宽高设置、常见格式 JPEG/PNG/GIF/SVG/WebP
HTML 图像
<img> 是空元素——不需要结束标签，通过 src 指定图片源。
学完本章你将： 掌握 img src/alt/width/height、常见格式、懒加载。
基本用法
html
<!-- 基本图片 -->
<img src="photo.jpg" alt="一张风景照">
<!-- 指定宽高（像素） -->
<img src="photo.jpg" alt="风景" width="300" height="200">
<!-- 仅指定宽度——高度按比例缩放 -->
<img src="photo.jpg" alt="风景" width="300">alt 属性的重要性
html
<!-- ❌ 无 alt——屏幕阅读器无法描述图片 -->
<img src="chart.png">
<!-- ✅ 有 alt——可访问性好，SEO 友好 -->
<img src="chart.png" alt="2024年销售增长柱状图">⚠️ 如果图片纯粹是装饰性的，用
alt=""（空字符串）。
常见图片格式
| 格式 | 特点 |
|---|---|
| JPEG/JPG | 照片，有损压缩，文件小 |
| PNG | 支持透明背景，无损压缩 |
| GIF | 支持动画，256 色 |
| SVG | 矢量图，缩放不失真 |
| WebP | Google 格式，兼顾质量和大小 |
懒加载
html
<!-- loading="lazy"：滚动到可视区域才加载 -->
<img src="large-photo.jpg" alt="大图" loading="lazy">