HTML图像教程

*发表于 2021-12-1 11:36:21* · 发表于 2021-12-1 11:36:21

<!DOCTYPE html>
<html>
<head>
<title>主页</title>
</head>
<body>
<img src="图片路径链接" alt="图片名称">
</body>
</html>
以上是用于将图像嵌入网页的代码示例。

HTML 图像的工作原理
在 HTML 中，您可以通过使用<img>标记和src用于指定图像位置的属性将图像添加到网页。像这样：

<img src="image.jpg" alt="Alternative text">
该<img>标签没有结束标签。只允许使用开始标签。

图像必须在指定的位置，否则最终会出现“损坏的图像”。这意味着，如果网络上尚不存在该图像，则您需要先上传它，然后它才能在网络上使用。您可以将图像上传到您自己的网站，也可以使用其他网站（例如图像存储服务）。只要它存在于网络上，您就可以链接到它（除非外部网站禁用了“热链接”——防止其他网站直接链接到他们的图片）。

稍后我们将讨论如何将网页和图像上传到网络。

该alt属性
图像必须具有alt指定的属性。此属性用于提供图像的描述。这很重要，因为可能并非所有用户都能看到图像。

以下是该alt属性可能有益的一些示例：

用户已禁用浏览器上的图像。
用户的 Internet 连接速度较慢，有时无法加载图像。
用户正在使用文本转语音软件或语音网络浏览器。这可能是因为用户有视力障碍，或者可能仅仅是因为用户选择使用此功能来让他/她的眼睛休息一下。也可能是用户发现听长文本块比阅读更容易。在这些情况下，软件会读出任何alt文本，图像对用户仍然有意义。
用户正在使用纯文本浏览器。
图像（或 HTML）存在问题，导致“图像损坏”。

属性
除了src和alt属性外，还有其他几个特定于该元素的（可选）属性（更不用说可用于所有 HTML 元素的全局属性和事件处理程序内容属性）。

要查看可与此标记一起使用的属性的完整列表，请参阅有关该<img>元素的更多信息。

关于图像位置
图像位置（随src属性一起提供）必须是有效的 URL。一个URL（代表统一资源定位器）是在网络上的资源的位置。这可以是网页、图像或其他一些文件。

嵌入图像时，您可以使用绝对 URL 或相对 URL（与创建超链接时相同）。

有关绝对 URL 与相对 URL 的说明，请参阅上一页HTML 链接。

图片尺寸
您应该尽量避免在 HTML 中调整图像大小。如果可能，首先将图像调整为正确的尺寸（使用图像编辑器），然后在 HTML 代码中使用这些尺寸。

因此，例如，如果您需要以 200x150 显示图像，请在图像编辑器中将其调整为该尺寸，使其恰好是这些尺寸。不要使用 300x200 的图像并使用 HTML 代码将其“压缩”为 200x150 的图像。

我推荐这样做的原因是，当你使用 HTML 调整图像大小时，浏览器仍然需要下载完整的文件——无论你的 HTML 指定它有多大。如果使用 HTML 使图像显示更小，那么下载大文件只是为了以小尺寸显示，从而浪费了用户的带宽。如果您使用 HTML 以更大的尺寸显示图像，它将像素化并降低质量。

最好先在图像编辑器中调整大小。

链接图像
您可以使用与链接文本相同的方式链接图像。只需在开始和结束<a>标记之间插入图像代码。

有关链接图像的示例，请参见练习 3。

背景图片
背景图像是出现在背景中而其他元素可以出现在前面的图像。

HTML 不提供背景图像的功能——它没有background-image标签或类似的东西。可以使用 CSS（层叠样式表）添加背景图像。这是使用 CSS<h1>通过 globalstyle属性向元素添加背景图像的示例。

<h1 style="background: url('图片链接');">
文字在前面，背景图片在后面...
</h1>

如果您不理解此代码，请不要担心。我们很快就会介绍样式表，所以这段代码会更有意义。