HTML 图像

图像是 HTML 内容的重要组成部分，图像可以改善网页的设计和外观。

图像是 HTML 内容的重要组成部分，图像可以改善网页的设计和外观。

HTML 图像语法

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

! 从技术上讲，图像不会插入到 HTML 文档中，HTML <img> 只是将指向了图像文件的 URL。

<img> 标签是空的，它只包含属性，并没有关闭标签。要在网页上显示图像，需要使用 src 属性设置图像文件的 URL。

<img> 标签有两个必需的属性：

  • src - 代表 source，意思是 “源”，意思是指定图像的源文件 URL。这个属性是必须的。
  • alt - 指定图像的替代文本

句法

<img src="图像的 URL" alt="图像的替代文本" />

src 属性

src 属性指定图像的路径 (URL)，这是个必须的属性。

当网页加载时；浏览器根据 src 属性的值从 Web 服务器获取图像并将其插入到页面中。因此，请确保图像实际上与网页相关的位置相同，否则您的访问者将获得破裂的图片图标。如果浏览器找不到图像，则会显示断开的链接图标和 alt 属性中的文本。

<img src="img_chania.jpg" alt="Flowers in Chania" />

alt 属性

alt 属性为图像提供替代文本。如果用户由于某种原因（因为连接速度慢、src 中的 URL 错误，或者如果用户使用屏幕阅读器）无法下载或查看图片，会显示替代文本。

! alt 的值不应该是随意填写，而应该是对图像的描述。这样即使图像无法显示，用户也会了解到此处图片的意义。对于屏幕阅读器的使用者，能听到对 alt 内容的阅读。

<img src="img_chania.jpg" alt="Flowers in Chania" />

如果浏览器找不到图像，显示该 alt  属性的值：

<img src="wrongname.gif" alt="这是图片加载失败的案例" />

图像宽度和高度

您可以使用 使用 width 和 height 属性来设置图像的宽度和高度，或者在 style 属性中通过 CSS 属性来指定。

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />

! width 和 height 属性的单位是像素(px)或者百分比(比如: 50%)

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" />

! 注意： 如果未指定宽度和高度，则加载图像时网页可能会闪烁。所以在图像上指定宽度和高度是一个很好的习惯，虽然他们不是必须的属性。

直接使用 width 和 height 属性，还是使用 style ？

width，height 和 style 属性都在 HTML 有效。但是，我们建议使用 style 属性，这样更有利于代码的维护。也符合 “HTML 负责内容 CSS 负责样式” 的设计原则。

<!DOCTYPE html>
<html>
  <head>
    <style>
      img  {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128" />

    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;" />
  </body>
</html>

另一个文件夹中的图像

如果您的图像位于子文件夹中，则必须在src属性中包含文件夹名称：

例子

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;" />

图像的绝对 URL 和相对 URL

<img> 元素的 src 属性是图像文件的 URL，和链接的 href 中的 URL 一样，也分为绝对 URL 和相对 URL 。

  • 绝对 URL，使用完整的网址（可以是本站的，也可以是网络上的任意图片），比如 https://www.gobeta.net/user/images/favicon/favicon-32x32.png
  • 相对 URL
    1. 当以 / 开头时，相对的是网站的根目录。
    2. 其他相对当前文件本身。

更多关于路径的描述，请参考章节： HTML 文件路径

常见图像格式

以下是所有浏览器（Chrome、Edge、Firefox、Safari、Opera）都支持的最常见的图像文件类型：

类型 文件后缀名
APNG .apng
GIF .gif
ICO .ico, .cur
JPEG .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG .png
SVG .svg

总结

  • 使用 HTML <img> 元素定义图像
  • 使用 HTML src 属性定义图像的 URL
  • 使用 HTML alt 属性为图像定义替代文本
  • 使用 HTML width 和 height 属性或 CSS width 和height  属性来定义图像的大小

HTML 图像标签

标签 说明
<img> 定义图片
<map> 定义一个图像映射(一个可点击的链接区域)
<area> 在图片上定义一个热点区域，可以关联一个超链接。<area> 元素仅在 <map> 元素内部使用。
<picture> 定义一个容器包含多个图像资源

如需所有可用 HTML 标签的完整列表，请访问 HTML 标签参考。

HTML 链接 HTML 表格