跳到主要内容

HTML 图片

提示
  1. <img>标签功能：HTML中的<img>标签用于在网页中嵌入图像，主要属性包括src和alt。
  2. src属性的作用：src属性指定图像的路径（URL），告诉浏览器从何处加载图像。
  3. alt和title属性的重要性：alt属性提供图像的文本描述，对SEO和屏幕阅读器用户有帮助；title属性显示鼠标悬停时的信息，但不是alt属性的替代品。

HTML <img> 标签用于在 HTML 网页中嵌入图像。例如，

<img src="logo.png" />

浏览器输出

mashangxue123 logo 的图像

这里，<img> 标签将图像 **logo.png** 插入到网页上。

HTML 图像标签有 2 个重要属性：

  • src 属性
  • alt 属性

注意：<img> 标签是一个空标签，即它不需要闭合标签。

HTML 图像 src 属性​

src 属性是 <img> 标签的必需属性。它指定图像的路径（URL）。它告诉浏览器在哪里查找图像。例如，

<img src="tictactoe.png" />

浏览器输出

一张图像

在上面的例子中，src 属性告诉浏览器从与网页位于同一目录的位置加载图像。

类似地，如果图像存储在一个子目录中，src 属性中的路径将被写为

<img src="images/tictactoe.png" />

如果图像位于另一台服务器上，或者我们想要使用网络上的图像，我们可以为图像提供一个绝对 URL。例如，

<img
  src="[https://www.example.com/images/tictactoe.png](https://www.example.com/images/22.png)"
/>

注意：虽然我们可以为位于自己的网络服务器上的图像提供绝对路径，但最好提供相对路径，因为它会导致更快的加载时间。因此，对于您自己服务器上的图像，始终使用相对路径。

HTML 图像 alt 属性​

alt 属性是图像的文本描述。alt 属性的值应该描述图像，以便即使图像加载失败，内容也是有意义的。

<img src="computer.png" alt="标准电脑" />

浏览器输出

显示 alt 值的损坏图像

如果用户无法查看图像（网络慢、src 属性错误或使用屏幕阅读器），则显示 alt 属性的内容。

它还有助于搜索引擎优化，因为它帮助搜索引擎了解图像的内容。

HTML 图像 title 属性​

title 属性在用户将鼠标悬停在图像上时显示有关图像的信息。例如，

<img src="tictactoe.png" alt="井字棋游戏" title="井字棋" />

浏览器输出

带有标题的井字棋游戏图像

注意：虽然 alt 和 title 属性看起来相似，但 title 属性不能用作 alt 属性的替代品。标题不会被屏幕阅读器读取，且在图像加载失败时不会显示。

HTML 图像的懒加载​

默认情况下，网页上的所有图像在初始加载时都会被加载。如果页面上有很多图像，这会导致页面加载缓慢。

我们可以通过使用 loading 属性改变 HTML 图像的这种行为。

<img src="dinosaur.png" alt="一只霸王龙" loading="lazy" />

现在，只有当用户滚动到图像位置附近时，图像才会加载。如果图像位于页面底部且用户从未在网站上向下滚动，图像将永远不会加载。

这降低了网站的初始加载时间并防止不必要的数据获取。

HTML 图像大小 - 宽度和高度​

我们可以使用 style 属性指定图像的高度和宽度。例如，

<img
  src="tictactoe.jpg"
  alt="井字棋游戏"
  style="width: 200px; height: 200px;"
/>

另外，我们也可以使用 height 和 width 属性来设置高度和宽度。例如，

<img src="tictactoe.jpg" alt="井字棋游戏" width="200" height="200" />

浏览器输出

设置了高度和宽度的游戏图像

我们应该始终设置图像的高度或宽度。否则，当图像加载时，网页上的内容将被移动。

注意：尽管上述两个代码示例给出的输出相同，但最好是使用 style 属性而不是 height 和 width。

常见的图像格式​

格式文件格式扩展名
GIF图形交换格式.gif
PNG便携式网络图形.png
SVG可缩放矢量图形.svg
JPEG联合图像专家组图像.jpg, .jpeg
WEBP网络图片.webp
最后于 更新