HTML - 图像

HTML 图像为网页提供视觉内容，增强用户体验并传达信息。它们可以是照片、图形、图标或插图。要在 HTML 文档上插入图像，我们可以使用 <img> 标签。

使用图像的原因

HTML 提供了用于嵌入、操作和控制图像的各种元素，有助于网站的美学和功能。了解图像标签、属性和响应式设计原则对于有效的 Web 开发至关重要。我们通常在产品页面的 hero 部分使用图像，它需要 src 和 alt 属性。

提高可读性：使用适当的图像/图形可以提高我们网站的可读性，例如我们提供什么样的产品或服务。
SEO影响：如果我们可以使用具有适当属性的图像，而不会影响加载时间，那么对于改善网站SEO是有益的。

使用图像还有很多其他优点，我们将在本文中了解。

尝试运行以下 HTML 代码以查看输出。

HTML 图像示例

在下面的例子中，我们将看到如何设置宽度、高度、标题，如何使图像在网页上更具附加性！以及图像上的许多其他东西。

您可以根据自己的喜好使用 PNG、JPEG 或 GIF 图像文件，但请确保在 src 属性中指定正确的图像文件名。使用 alt 属性是一种很好的做法。如果无法显示图像，则为图像指定备用文本。

在 HTML 中插入图像

您可以使用 <img> 标签在网页中插入任何图像。<img> 标签是一个空标签，这意味着它只能包含属性列表，没有结束标签。


<DOCTYPE html>
<html>
<head>
	 <title>插入图像示例</title>
</head>
<body>
	 <p>简单插入图像</p>
	 <img src="/html/images/test.png" alt="图像说明" />
</body>
</html>

从其他文件夹导入图像

通常，我们将所有图像保存在一个单独的目录中。因此，让我们将 HTML 文件test.htm保存在我们的主目录中，并在主目录中创建一个子目录 images，我们将图像保留为test.png。假设我们的图像位置是“/html/images/test.png”，请尝试以下示例。


<!DOCTYPE html>
<html>
<head>
	 <title>插入图像示例</title>
</head>
<body>
	 <img src="/html/images/test.png" alt="图像说明" />
</body>
</html>

设置图像宽度和高度

您可以使用 width 和 height 属性根据需要设置图像宽度和高度。您可以根据像素或其实际大小的百分比来指定图像的宽度和高度。


<!DOCTYPE html>
<html>
<head>
	 <title>设置图像宽度和高度示例</title>
</head>
<body>
	 <p>设置图像宽度和高度</p>
	 <img src="/html/images/test.png" alt="图像说明" width="450" height="200" />
</body>
</html>

设置图像边框

默认情况下，图像周围会有一个边框，您可以使用边框属性以像素为单位指定边框厚度。border为 0 表示图片周围没有边框。


<!DOCTYPE html>
<html>
<head>
	 <title>设置图像边框示例</title>
</head>
<body>
	 <p>设置图像边框</p>
	 <img src="/html/images/test.png" alt="图像说明" border="3" />
</body>
</html>

设置图像对齐方式

默认情况下，图像将在页面左侧对齐，但您可以使用 align 属性将其设置在中心或右侧。


<!DOCTYPE html>
<html>
<head>
	 <title>设置图像对齐示例</title>
</head>
<body>
	 <p>设置图像对齐方式</p>
	 <img src="/html/images/test.png" alt="图像说明" border="3" align="right" />
</body>
</html>

免费网页图片

对于免费的 Web 图形，包括图案，您可以查看免费的网页图片

打印本页