HTML 图片
书签让你在文字之间跳转。图片则把照片、示意图和标志带进页面。HTML 的基本工具是空的 img 元素：在正常用法中，它不会在开闭标签之间包裹说明文字。它用 src 指向文件，并用 alt 提供文字替代。
img 做什么
img 是替换型（replaced）元素。浏览器按 src 拉取资源，并把它画进布局。如果文件缺失或被拦截，访客仍需要有用的 alt（或者，对纯装饰而言，明确写出空的 alt=""）。路径规则与你已经用于链接和网站图标的相对路径、绝对路径相同。
直接回答
写成 <img src="path/to/file.jpg" alt="short description">。
src— 图片文件所在位置alt— 看不见图片或加载失败时的文字替代
可选的width和height可以预留空间，减少布局跳动。与其把好几兆字节的文件发给每一位网速偏慢的学习者，不如先压缩过大的照片。
核心属性一览
📊 常用 img 属性
| 属性 | 作用 |
|---|---|
| src | 图片文件的路径或 URL |
| alt | 文字替代 / 在上下文中的含义 |
| width | 可选的显示宽度提示（HTML 示例中为像素） |
| height | 可选的显示高度提示 |
| loading | 现代浏览器上可选的懒加载提示（进阶内容稍后） |
一张基础的信息性图片
把图片放进清晰的文件夹，例如 images/，并在 alt 中写明真正重要的内容。
基础图片
html<img src="images/team.jpg" alt="Three teammates at a desk">解读基础示例
src="images/team.jpg"是相对于 HTML 文件的相对路径alt向屏幕阅读器和加载失败的情况说明照片含义- 正常 HTML 写法没有单独的闭合
</img>— 属性都写在同一个标签上 - 若文件夹或文件名写错，即便标签看起来完美，图片也会失效
width 与 height 提示
给出 width 和 height，有助于浏览器在字节到达之前预留空间。尽量匹配真实文件的宽高比，这样图片看起来不会被拉扁。只用 HTML 属性把超大照片“缩小显示”，仍然会下载那份超大文件 — 请为网页真正调整尺寸并压缩资源。
带 width 和 height 的图片
html<img src="images/logo.png" alt="Site logo" width="120" height="40">装饰性图片与空 alt
当图片不增加信息 — 纯装饰、且附近文字已经覆盖同一含义 — 请使用 alt=""。不要省略该属性。省略 alt 与写出空的 alt="" 并不相同：空值表示“在无障碍树中忽略我”，缺失往往表示“标记写错了”。
带空 alt 的装饰性图片
html<img src="images/divider.png" alt="" width="240" height="8">为含义写 alt，而不是堆砌关键词
好的 alt 是上下文中图片的简短替代：视力正常用户理解页面所需要的内容。糟糕的 alt 堆关键词、重复图片旁已经印出的说明，或只写“image”却毫无内容。若是图表，请概括结论；若标志同时充当首页链接，链接的无障碍名称通常来自图片 alt 或周围文字 — 保持诚实准确。
初学者会遇到的文件格式
JPEG（.jpg）适合照片。PNG 适合边缘清晰或需要透明的图形。SVG 适合简单图标和标志，且便于清晰缩放（之后会看到更多 SVG 模式）。先选适合内容的格式，再把文件体积控制在合理范围。
在编辑器中练习
- 在
images文件夹放入一张小的.jpg或.png。 - 添加
img，使用正确的相对src和清晰的alt。 - 添加与宽高比匹配的 width 和 height。
- 故意弄错一次路径 — 确认
alt（或破损图片界面）能帮你发现问题，然后再修好路径。 - 添加一张带
alt=""的装饰性图片，并确认你没有把该属性整个删掉。
容易犯的错误
- 信息性图片缺少
alt src中文件夹错误或拼写错误- 明明较小的网页尺寸就够用，却仍发布好几兆字节的相机原图
- 把
alt当成关键词垃圾场 - 用不匹配的 width/height 拉变形标志
- 把
src（图片）与href（链接）搞混
小结
- 图片使用带
src和alt的img - 路径规则与站点其他文件相同
alt支持无障碍与加载失败；仅对纯装饰使用alt=""- Width 和 height 可以预留空间；仍须优化真实文件大小
- 选择合适格式，并保持下载体积轻量
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部