On this page

HTML 图像

category: HTML / CSS

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

例子

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

例子

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

例子

<img src="img_codewhy.jpg" alt="Flowers in codewhy">

HTML 图像语法

HTML<img>标签用于在网页中嵌入图像。 从技术上讲，图像并未插入网页；图像链接到网页。该<img>标签为引用的图像创建了一个保存空间。 该<img>标签是空的，仅包含属性，并且没有结束标签。 该<img>标签有两个必需的属性：

  • src - 指定图像的路径
  • alt - 指定图像的替代文本

句法

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

src 属性

必需的src属性指定图像的路径 (URL)。 注意：当网页加载时，浏览器会从网络服务器获取图像并将其插入到页面中。因此，请确保图像实际上保持在与网页相关的同一位置，否则您的访问者将看到一个损坏的链接图标。alt如果浏览器找不到图像，则会显示损坏的链接图标和文本。

例子

<img src="img_codewhy.jpg" alt="Flowers in codewhy">

alt 属性

alt如果用户由于某种原因无法查看图像（由于连接速度慢、src 属性中的错误或者用户使用屏幕阅读器），required 属性会为图像提供替代文本。 属性的值alt应该描述图像：

例子

<img src="img_codewhy.jpg" alt="Flowers in codewhy">

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

例子

<img src="wrongname.gif" alt="Flowers in codewhy">

图像尺寸 - 宽度和高度

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

例子

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

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

例子

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

和属性始终定义图像width的height宽度和高度（以像素为单位）。 注意：始终指定图像的宽度和高度。如果未指定宽度和高度，则加载图像时网页可能会闪烁。

宽度和高度，还是样式？

、和属性在 HTML 中width均有效。heightstyle 但是，我们建议使用该style属性。它可以防止样式表更改图像的大小：

例子

<!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 src：

例子

<img src="https://www.codewhy.net/images/codewhy_green.jpg" alt="codewhy.net">

动画图像

HTML 允许动画 GIF：

例子

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

图像作为链接

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

例子

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

图像浮动

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

例子

<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>

常见图像格式

以下是最常见的图像文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）均支持这些类型：
AbbreviationFileFormatFileExtension
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg

章节总结

  • 使用 HTML<img>元素定义图像
  • 使用 HTMLsrc属性定义图像的 URL
  • 如果无法显示图像，请使用 HTMLalt属性定义图像的替代文本
  • 使用 HTMLwidth和height属性或 CSSwidth和height 属性来定义图像的大小
  • 使用CSSfloat属性让图像向左或向右浮动