二维码
搜索 ×

HTML 图像

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 图像

图像可以改进网页的设计和外观。

1
<img src="pic_trulli.jpg" alt="Italian Trulli">

1
<img src="img_girl.jpg" alt="Girl in a jacket">

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

HTML 图像语法

HTML 标记用于嵌入 网页中的图像。<img>

从技术上讲，图像不会插入到网页中;图片链接到网络 页面。该标签将创建一个持有 引用图像的空间。<img>

标记为空，仅包含属性，不包含属性 有一个结束标签。<img>

该标记有两个必需项 属性：<img>

  • src - 指定图像的路径
  • alt - 指定图像的替代文本
语法 
1
<img src="url" alt="alternatetext">

src 属性

required 属性指定图像的路径 （URL）。src

注意： 当一个网页加载时，它是浏览器，在那个 时刻，从 Web 服务器获取图像并将其插入到页面中。 因此，请确保图像实际上停留在同一位置 到网页，否则您的访问者将得到一个断开的链接图标。破碎的 如果浏览器找不到图像，则会显示链接图标和文本。alt

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

alt 属性

required 属性为图像提供替代文本，如果用户 某些原因无法查看它（由于连接速度慢，SRC 中的错误 属性，或者用户是否使用屏幕阅读器）。alt

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

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

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

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

提示： 屏幕阅读器是一种软件程序，它读取 HTML 代码，并允许用户“收听”内容。屏幕阅读器很有用 适用于视力障碍或学习障碍的人。

图像大小 - 宽度和高度

您可以使用该属性来指定宽度和 图像的高度。style

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

或者，您可以使用 和 属性：width``height

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

和属性始终定义 以像素为单位的图像。width``height

注意： 始终指定图像的宽度和高度。如果未指定宽度和高度，则 网页 加载图像时可能会闪烁。

宽度和高度，还是样式？

、 和 属性是 在 HTML 中都有效。width``height``style

但是，我们建议使用该属性。它可以防止样式表更改 图像的大小：style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>

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

<img src="logo.png" alt="LOGO" width="128" height="128">

<img src="logo.png" alt="LOGO" style="width:128px;height:128px;">

</body>
</html>

另一个文件夹中的图像

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

1
<img src="/image/logo.png" alt="LOGO" style="width:128px;height:128px;">

其他服务器/网站上的图像

某些网站指向另一台服务器上的图像。

若要指向另一台服务器上的映像，必须指定绝对值（完整） 属性中的 URL：src

1
<img src="http://www.adamsw.com/assets/img/adamlogo.png" alt="adamsw.com">

关于外部图像的注意事项： 外部图像可能位于 版权。如果您未获得使用它的许可，则可能违反了 版权法。此外，您无法控制外部图像;他们可以突然 被删除或更改。

动画图像

HTML 允许动画 GIF：

1
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

图像作为链接

要使用图片作为链接，请将标签放在标签内：<img>``<a>

1
2
3
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

图像浮动

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

1
2
3
4
5
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

提示： 要了解有关 CSS Float 的更多信息，请阅读我们的 [CSS Float 教程]。

常见图像格式

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

Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

本章小结

使用 HTML 元素定义图像<img>
使用 HTML 属性定义图像的 URLsrc
如果图像无法显示，请使用 HTML 属性定义图像的替代文本alt
使用 HTML 和属性 或 CSS 和属性来定义图像的大小width``height``width``height
使用 CSS 属性让图像浮动 向左或向右float

注意： 加载大图像需要时间，并且会减慢您的速度 网页。谨慎使用图像。

HTML Image标签

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

有关所有可用 HTML 标记的完整列表，请访问我们的 [HTML 标记参考]。

推荐教程