如何在 HTML 中插入图片
使用 <img> 元素。src 是图片文件，alt 描述图片，width 和 height 以像素为单位给出尺寸。<img> 是空元素：它没有结束标签。
这里的 src 是直接写进 URL 的一小段 SVG（data URI），这样示例离线也能运行。在真实网站上，src 是指向文件的路径：
src | 加载的位置 |
|---|---|
photo.jpg | 与 HTML 文件同一文件夹中的 photo.jpg |
images/photo.jpg | HTML 文件旁边的 images 文件夹 |
../photo.jpg | 上一级文件夹 |
/images/photo.jpg | 网站根目录下的 images 文件夹 |
https://example.com/photo.jpg | 另一个网站（文件可能被移动或删除） |
大多数 Web 服务器上的路径区分大小写：Photo.JPG 和 photo.jpg 是两个不同的文件。
alt 文本
alt 文本用来代替图片。屏幕阅读器会把它读出来，图片无法加载时浏览器也会显示它。下面两张图片指向的文件都不存在：
第一张图片在原本显示图片的位置显示了它的 alt 文本“Coddy logo”。第二张的 alt 为空，所以没有文字可显示，屏幕阅读器也会跳过它。alt 的写法：
- 描述在上下文中重要的内容。 “柱状图：销售额从 3 月到 6 月翻了一番”比“图表”传达的信息多得多。
- 不要以“图片：”开头。 屏幕阅读器已经会说明这是一张图片。
- 装饰性图片用
alt=""（分隔线、背景花纹），让屏幕阅读器跳过它。 - 永远不要省略
alt。 没有它，有些屏幕阅读器会改为朗读文件名，比如“IMG 下划线 4032 点 jpg”。 - 链接里的图片，描述链接的目标：
<a href="/"><img src="logo.svg" alt="Home"></a>。
设置图片尺寸
width 和 height 属性以像素为单位，不写单位。CSS 设置的尺寸会覆盖它们。图片最实用的 CSS 是下面这一对，它让图片随容器缩小，但永远不会被拉伸到超过原本的宽度：
第一张图片保持 300 像素宽，溢出了 180 像素宽的盒子。第二张缩小到 180 × 120，保持 3:2 的比例。height: auto 很关键：没有它，height="200" 属性会让图片保持 200 像素高，图片就被压扁了。
即使是响应式图片，也要在 HTML 中写上 width 和 height。浏览器会在文件下载完成之前用它们预留出正确大小的空间，这样图片加载时下面的文字就不会往下跳。
用 object-fit 裁剪
当图片必须填满一个比例不同的盒子时（用宽幅照片做方形头像、等高的卡片），object-fit 决定多出来的部分如何处理：
原图是一张 2:1 的圆形图片，显示在正方形的盒子里：
fill（默认值）把图片拉伸到盒子大小，圆形变成了椭圆。contain让整张图片完整放进盒子，两侧留出空白。cover填满盒子并裁掉多余部分，圆形保持为圆。它是缩略图和头像的常用选择。
裁剪时，object-position 决定保留哪一部分可见，例如人像照片用 object-position: top。
用 figure 和 figcaption 添加图片说明
属于某张图片的说明文字放在 <figcaption> 中，二者一起放进 <figure>。这样屏幕阅读器就知道它们是一组，整个 figure 也可以作为一个整体设置样式：
图片说明不能代替 alt。alt 说明图片展示了什么；图片说明补充的是看得见图片的读者也需要的信息。
图片下方的空隙
图片像一个字母一样坐落在文字基线上，所以它的容器会在下方为 g、y 这类字母的下伸部分留出空间。加上边框，就能看到这条空隙：
第一个边框里，蓝色图片下方有一条白色空隙。给图片设置 display: block（第二个盒子）就能去掉它；如果图片必须保持行内，vertical-align: middle 也可以。
懒加载与响应式图片源
对于长页面靠下方的图片，loading="lazy" 会推迟下载，直到读者滚动到它们附近：
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
不要对页面顶部的主图使用懒加载；这会推迟读者最先看到的那部分页面。
要给小屏幕发送更小的文件，在 srcset 中列出几种尺寸，并用 sizes 告诉浏览器图片会以多宽显示。浏览器会自己挑选文件：
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> 更进一步，可以提供不同的格式，<img> 作为后备，同时承载 alt：
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
图片格式
| 格式 | 适合 |
|---|---|
| JPEG | 照片 |
| PNG | 截图，需要清晰边缘或透明背景的图片 |
| WebP | 照片和图形，比 JPEG 和 PNG 更小，支持透明 |
| AVIF | 照片，通常比 WebP 更小 |
| SVG | 标志、图标和示意图；缩放到任何尺寸都不会模糊 |
| GIF | 短动画，不过静音循环播放的 <video> 要小得多 |
常见错误
- 使用自己电脑上的路径，比如
src="C:\Users\me\photo.jpg"。它只在你的电脑上有效。把文件放在 HTML 旁边，使用相对路径。 - 缺少
alt。 每个<img>都需要它，装饰性图片就留空。 - 在 CSS 中同时设置
width和height，而且比例与图片不同。图片会被拉伸。只设置一个，另一个保持auto，或者使用object-fit。 - 没有
width和height属性，导致图片加载时页面跳动。 - 用 CSS 缩小超大文件。 一张 4000 像素的照片即使显示为 400 像素，也会完整下载。先缩小图片，或者使用
srcset。 - 写了结束标签
</img>。<img>是空元素，没有什么需要结束的。
上面示例中的图片都是内嵌的小 SVG。想用你自己的照片试试同样的代码，把它粘贴到 HTML 在线编辑器中。
常见问题
如何在 HTML 中插入图片？
使用 <img> 标签，在 src 中写图片文件，在 alt 中写描述：<img src="photo.jpg" alt="A red bicycle" width="600" height="400">。<img> 没有结束标签。
如何在 HTML 中修改图片大小？
设置以像素为单位的 width 和 height 属性，或者使用 CSS，例如 img { width: 300px; height: auto; }。只设置一个方向的尺寸，另一个保持 auto，就能保持图片比例。
为什么 HTML 中的图片显示不出来？
通常是 src 路径写错了：路径是相对于 HTML 文件的；大多数服务器上文件名区分大小写；而像 C:\photos\cat.jpg 这样的路径只存在于你自己的电脑上。直接在浏览器中打开图片地址就能检查。
HTML 中的 alt 文本是什么？
alt 属性是图片的替代文本。屏幕阅读器会朗读它，图片加载失败时浏览器会显示它。描述图片展示了什么或起什么作用；纯装饰性的图片使用 alt=""。
如何让图片自适应（响应式）？
在 CSS 中给图片加上 max-width: 100%; height: auto;。这样图片会缩小以适应较窄的容器，但永远不会超过它原本的宽度。
为什么图片下方有一条空隙？
图片默认是行内元素，坐落在文字的基线上，基线下方会为字母的下伸部分留出空间。给图片设置 display: block 或 vertical-align: middle 即可去掉空隙。
