轻松上手,快乐学习!

HTML 图像


通过使用 HTML,可以在文档中显示图像。图像可以改善网页的设计和外观。


实例

<img src="pic_trulli.jpg" alt="特鲁利">
亲自试一试 »

实例

<img src="img_girl.jpg" alt="穿夹克的女孩">
亲自试一试 »

实例

<img src="img_chania.jpg" alt="花在公园">
亲自试一试 »

HTML Images 语法

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

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

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

  • src - 指定图像的路径
  • alt - 指定图像的备用文本

语法

<img src="url" alt="alternatetext">

src 属性

必需属性 src 指定图像的路径(URL)。

注释: 当网页加载时,这时浏览器从web服务器获取图像并将其插入到网页中。因此,请确保图像实际上与网页保持在同一位置,否则您的访问者将得到一个断开的链接图标。如果浏览器找不到图像,则会显示断开的链接图标和 alt 文本。

实例

<img src="img_chania.jpg" alt="花在公园">
亲自试一试 »

alt 属性

如果用户由于某种原因无法查看图像(由于连接速度慢、src属性出错或用户使用屏幕阅读器),则需要 alt 属性为图像提供备用文本。

alt 属性的值应该描述图像:

实例

<img src="img_chania.jpg" alt="花在公园">
亲自试一试 »

如果浏览器找不到图像,它将显示 alt 属性的值:

实例

<img src="wrongname.gif" alt="花在公园">
亲自试一试 »

提示: 屏幕阅读器是一种读取HTML代码的软件程序,允许用户"听"内容。屏幕阅读器对视力受损或学习障碍的人很有用。


图像大小 - 宽度和高度

使用 style 属性指定图像的宽度和高度。

实例

<img src="img_girl.jpg" alt="穿夹克的女孩" style="width:500px;height:600px;">
亲自试一试 »

或者,可以使用 widthheight 属性:

实例

<img src="img_girl.jpg" alt="穿夹克的女孩" width="500" height="600">
亲自试一试 »

widthheight 属性始终以像素为单位定义图像的宽度和高度。

注释: 要指定图像的宽度和高度。如果未指定宽度和高度,则加载图像时网页可能会闪烁。


使用 Width 和 Height 或者 Style?

width, height, 和 style 属性在HTML中都有效。

但是,我们建议使用 style 属性。它防止样式表更改图像的大小:

实例

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 图标" width="128" height="128">

<img src="html5.gif" alt="HTML5 图标" style="width:128px;height:128px;">

</body>
</html>
亲自试一试 »

其他文件夹中的图像

如果图像位于子文件夹中,则必须在 src 属性中包含文件夹名称:

实例

<img src="/images/html5.gif" alt="HTML5 图标" style="width:128px;height:128px;">
亲自试一试 »

外部图像

有些图像在其他服务器/网站上。

要指向另一台服务器上的图像,必须在 src 属性中指定绝对(完整)URL:

实例

<img src="https://www.begtut.com/html/img_girl.jpg" alt="BEGTUT.COM">
亲自试一试 »

外部图像注释: 外部图像可能属于版权所有。如果你没有获得使用它的许可,你可能违反版权法。此外,您无法控制外部图像;它可以突然删除或更改。


动画图像

HTML 允许动画 GIF:

实例

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
亲自试一试 »

图像可作为链接

要使用图像作为链接,请将 <img> 标签放在 <a> 标签内:

实例

<a href="default.php">
  <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;">
</a>
亲自试一试 »

浮动图像

使用 CSS float 属性使图像浮动到文本的右侧或左侧:

实例

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
图像将浮动到文本的右侧。</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
图像将浮动到文本的左侧。</p>
亲自试一试 »

提示: 要了解有关CSS 浮动的更多信息: CSS 浮动教程


图像格式

以下是所有浏览器(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 属性定义图像的大小
  • 使用 CSS float 属性使图像向左或向右浮动

注释: 加载大图像需要时间和网络带宽,会降低网页速度。请注意图像大小。


HTML 实验

学习训练

练习题:

使用 HTML 图像属性将图像的宽高设置为 250 像素宽和 400 像素高。

<img src="scream.png" ="250" ="400">

开始练习


HTML Image 标签

标签 描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图中的可单击区域
<picture> 为多个图像资源定义容器

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