HTML 图像标签-html教程-PHP中文网

HTML 图像标签

WBOY

发布： 2024-09-04 16:20:16

原创

1321 人浏览过

HTML 是一种纯文本文档，允许多种格式的编程语言来实现基于 Web 的应用程序，这些应用程序使用标签来描述网页的功能。其中一个重要标签是图像标签，它允许开发人员将图像文件合并到代码中，以便在网页上显示相应的图像。此语法为，其中“image”是标签名称，“src=”应分配有所需图像的 URL。在本主题中，我们将学习 HTML 图像标签。

向网页添加图像

您可以使用 HTML 图像标签将 IMG 添加到 HTML 页面。 HTML 文档中的标签；这是语法：

<img src= enter the IMG URL here >

登录后复制

这里，IMG 告诉浏览器该标签是关于将 IMG 添加到文档中，“src=”指定从哪里下载图像。

带有图像的页面示例

代码：

<!DOCTYPE html>
<html>
<head>
<title> Example HTML IMG Tag </title>
</head>
<body>
<img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg"
alt = " Software development icon " height = " 150 " width = "140" />
</body>
</html>

登录后复制

输出：

HTML 图像标签

关于这些 HTML 页面的一个有趣的事实是，当您使用 IMG 标签时，图像不会插入到所述网页中；相反，它会创建一个保存空间，下载后将图像放置在其中。

浏览器支持和属性兼容性

正如您所料，所有现代浏览器都支持图像和 IMG 标签的使用。有时，如果图像未设置为响应式，移动浏览器会调整图像大小以适合屏幕。

关于属性与 HTML 4.01 和更新的 HTML5 的兼容性，大多数标签都可以工作，但对齐、边框、hspace 和 space 除外，后者根本不支持这些标记。

图片作为链接：

有时，您会希望将图像用作另一个页面的链接。您可以通过在内添加 IMG 标签来完成此操作。标签。

设置图像作为网页背景

使用页面 Body 元素中的 background-image CSS 属性，您可以指定图像作为网页的背景图片。

<body style="background-image:url(‘car.jpg');">
<h1>Background Image </h1>
</body>

登录后复制

将图像设置为在浏览器中浮动

我们可以使用 CSS 属性“float”将图像设置为浮动在浏览器窗口中的任何位置。让我们看一个例子来帮助您理解。

<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">

登录后复制

在这里，汽车的图像将浮动到文本的右侧。

<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">

登录后复制

这里，汽车的图像将浮动到文本的左侧。

图像标签的属性

以下是图像标签的属性。

1) 对齐

可能的值： 上、下、中、左或右。

alight属性用于指定图片在网页上的对齐方式。

2) Alt

值类型： 文本

Alt用于指定网页图片的替代文本。如果无法显示 IMG，浏览器会向用户显示此文本。 Google 和 Bing 等搜索引擎使用此替代文本在图像搜索中显示结果。

3) 边框

值类型： 像素

它用于在图片周围创建用户定义厚度的边框。它在 HTML5 中不起作用。

4) 跨源

值类型： 匿名使用-凭证

当我们想要指定如何处理跨源照片时，可以使用此属性。这主要用于使用 JavaScript Web 应用程序的画布元素的情况。

5) 身高

值类型：百分比或像素

这个用于表示HTML网页中图像的高度。

6) hspace

值类型： 像素

hspace 属性在 HTML5 中不受支持，用于以像素为单位指定要在插入图像的左侧和右侧添加多少空白。

7) ismap

值类型： 页面的 URL

ismap 我们用来将所述图像定义为服务器端图像映射。当用户在图像内单击（或点击）时，浏览器会将点击（或点击）坐标作为 URL 发送到 Web 服务器。

8) 长描述

值类型： URL

Longdesc 使用 URL 给出图像的详细描述。属性中的 URL 用作图像的描述。

9) src

值类型： URL

src 代表源。用于指定浏览器检索图像的地址；此 URL 可以应用于同一服务器上目录内的图像。它还可以将图像存储在具有不同域名的第三方服务器中。

10) 使用地图

值类型： #mapname

usemap 属性定义客户端图像映射的图像。使用地图始终与地图和区域 HTML 标签一起使用。

11) 空间

值类型： 像素

Vspace 属性在 HTML5 中不受支持，用于设置网页图像顶部和底部用作空白的像素数。

12) 宽度

值类型： 像素

顾名思义，width 属性用于指定 HTML 网页内图片的宽度。

结论 – HTML 图像标签

现在我们已经了解了如何将图像添加到 HTML 页面以及如何设置其属性，我们可以在 Web 项目中创建美观的网页。

除了为网页添加视觉效果之外，图像也很有价值，因为它们有助于搜索引擎优化。在图像中添加适当的 alt 标签和描述可以帮助搜索引擎更好地理解网页内容，并在许多情况下提高网页的排名。

以上是HTML 图像标签的详细内容。更多信息请关注PHP中文网其他相关文章！