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="这是图片加载失败的案例" />

图像宽度和高度

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

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

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

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

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

直接使用 widthheight 属性,还是使用 style

widthheightstyle 属性都在 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 widthheight 属性或 CSS widthheight  属性来定义图像的大小

HTML 图像标签

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

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