HTML Academy · 课时

img 元素：src、alt、width 与 height

Q: 「img 元素：src、alt、width 与 height」这节课中我会学到什么？

使用所有必需属性正确嵌入图像。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用所有必需属性正确嵌入图像。

img 元素：src、alt、width 与 height 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

img 元素

<img> 元素会在页面中嵌入图像：

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

src 属性

src 属性指定图像来源：

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

alt 属性

alt 属性为图像提供替代文本：

图像加载失败时显示
由屏幕阅读器朗读
由搜索引擎建立索引
无障碍访问所必需（WCAG）

编写优质的 alt 文本

编写有效替代文本的方法：

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

宽度和高度属性

始终为图像指定 width 和 height：

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

宽高比与 CSS

在 HTML 中设置宽度和高度，可以让 CSS 计算宽高比：

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

网络上的图像格式

常见图像格式及其适用场景：

JPEG/JPG——照片、包含许多颜色的复杂图像
PNG——需要透明效果的图像
WebP——现代格式：比 JPEG/PNG 更小，并支持透明效果
AVIF——新一代格式：压缩效果甚至优于 WebP
SVG——图标和插图（矢量图，可无限缩放）
GIF——简单动画（大多已被视频取代）

loading 属性

使用 loading 属性控制图像的加载时机：

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

decoding 属性

decoding 属性控制图像解码行为：

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

fetchpriority 属性

fetchpriority 属性提示图像加载优先级：

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

完整的 img 示例

一个完全支持无障碍访问且经过性能优化的图像：

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

快速检查

为什么应始终在 img 元素上包含 width 和 height 属性？

回顾：img 元素

图像嵌入要点：

src——图像网址（相对或绝对）
alt——必需的描述；装饰性图像使用空值
width 和 height——始终设置，以防止布局偏移
对于首屏以下的图像，使用 loading="lazy"
选择合适的格式：照片使用 WebP/AVIF，图标使用 SVG

常见问题解答

「img 元素：src、alt、width 与 height」课时是免费的吗？

是的 — 「img 元素：src、alt、width 与 height」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「img 元素：src、alt、width 与 height」这节课中我会学到什么？

使用所有必需属性正确嵌入图像。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「img 元素：src、alt、width 与 height」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy