HTML 零基础教程

HTML 图片 <img> 标签

在 HTML 中，嵌入图片的主要方式是使用 <img> 标签。

而要让这个标签工作，核心在于 src 属性——它负责告诉浏览器去哪里找这张图片。

1. <img> 标签：嵌入图像

<img> 标签是一个用来在网页中嵌入图像的 HTML 元素。

  • 空元素（Empty Element）：与 <p> 或 <a> 不同，<img> 是一个空元素（也称为自闭合标签）。这意味着它不需要结束标签。
  • 基本结构：
<img src="图片 URL 地址">
  • 行内元素：默认情况下，图片是行内元素（inline element）。这意味着它会和文本待在同一行，直到这一行排不下了才会换行。

1.1 为什么 <img> 标签很重要？

  • 视觉传达：比文字更有效地传达情感和品牌。
  • 用户参与：好看的内容能留住用户。
  • 内容澄清：图表和照片能让复杂的解释变得简单。

2. src 属性：指定图像来源

src 是 source（来源）的缩写，它是 <img> 标签最关键的属性。

如果没有 src，浏览器就不知道要显示什么，图片位置就会是一片空白。src 的值是一个 URL（统一资源定位符），它可以是绝对路径或相对路径。

3. alt 属性：描述你的图像

alt 属性为图像提供替代文本（Alternative Text）。

如果图像因为某些原因（链接失效、网络问题或用户关闭了图像显示）无法加载，这段文本就会显示出来。更重要的是，屏幕阅读器会朗读这段文本，让视障用户也能理解图像的内容。

注意：在标准的 HTML 中，alt 属性是强制性的（即使是空的）。

3.1 为什么 alt 属性如此重要？

  • 无障碍性（Accessibility）：屏幕阅读器使用 alt 文本向视障用户描述图像。
  • SEO（搜索引擎优化）：搜索引擎（如 Google）看不懂图片，它们靠 alt 文本来理解图像内容，这能提升你的搜索排名。
  • 用户体验：如果图像加载失败，alt 文本能提供上下文，防止用户看到一个莫名其妙的“破损图像”图标而没有任何解释。

3.2 编写 alt 文本的最佳实践

  • 描述性强且简洁：准确描述图像内容
  • 上下文至关重要：文本应与周围的内容相关。
  • 避免冗余：不要重复周围正文中已经存在的信息。

alt 文本示例

<img src="images/golden-retriever.jpg" alt="一只金毛猎犬在沙滩上奔跑">

这段文本准确描述了图像，为看不见它的用户提供了上下文。

4. width 和 height 属性：控制图像尺寸

width（宽度）和 height（高度）属性指定图像的尺寸，单位是像素。

虽然它们可以用来调整图像大小，但它们的主要目的是在图像加载时预留空间。这能防止页面布局随着图像的加载而发生跳动，从而改善用户体验。

4.1 为什么这两个属性很重要？

  1. 防止布局偏移（Layout Shift）：通过指定宽高，浏览器在下载图像之前就知道它占多大地方。这防止了所谓的“累积布局偏移（CLS）”——即页面内容在加载过程中突然跳动。
  2. 提升性能：虽然现代浏览器很聪明，但显式设置宽高仍然可以稍微提高渲染性能，尤其是在老旧设备上。

4.2 使用最佳实践

  • 使用原始宽高比：理想情况下，属性值应匹配图像的原始比例。如果你只指定其中一个（例如只写 width），浏览器会自动计算另一个以保持比例。如果你两个都写，确比例正确，否则图像会变形（被拉伸或压缩）。
  • 避免用于缩放：虽然你可以用这两个属性把大图缩小显示，但最好是用 CSS 来处理响应式大小。而且，让浏览器下载一张大图却只显示得很小，会浪费用户的流量和加载时间。
  • 不要带单位：在 HTML 属性中，值就是数字（代表像素），不要写 "px"。

示例 1：同时指定宽度和高度

<img src="images/landscape.jpg" alt="美丽的风景" width="600" height="400">

这告诉浏览器预留 600x400 像素的空间。确保这与原图比例一致。

示例 2：仅指定宽度

<img src="images/portrait.jpg" alt="人物肖像" width="300">

浏览器会自动计算高度以保持比例。

示例 3：配合 CSS 实现响应式设计

<img src="images/responsive.jpg" alt="响应式示例" width="800" height="600" style="width: 100%; height: auto;">

这是一个现代 Web 开发的常见技巧：

  • HTML 中的 width="800" height="600" 用于预留空间（防止布局跳动）。
  • CSS 中的 width: 100%; height: auto; 覆盖了 HTML 属性，让图像能够适应屏幕大小。(注：这里为了演示用了内联样式，实际开发中建议写在外部 CSS 文件里。)

5. 浏览器是如何渲染图像的？

了解幕后机制很有帮助：

  1. 浏览器遇到 <img> 标签。
  2. 它检查 src 找到图片来源。
  3. 关键步骤：如果有 width 和 height 属性，浏览器立即在页面布局中画出一个空白的矩形框（预留空间）。
  4. 浏览器向服务器请求下载图片。
  5. 图片下载完成后，填入那个矩形框。

如果没有这两个属性，浏览器一开始不知道图片多大，只能先渲染后面的文字。等图片下载完，浏览器发现“哦，这图有 500px 高”，于是不得不把后面的文字推下去。这就是为什么页面会突然“跳动”。