HTML 图像标签
- WBOY原创
- 2024-09-04 16:20:161274浏览
HTML 是一种纯文本文档，允许多种格式的编程语言来实现基于 Web 的应用程序，这些应用程序使用标签来描述网页的功能。其中一个重要标签是图像标签，它允许开发人员将图像文件合并到代码中，以便在网页上显示相应的图像。此语法为 ，其中“image”是标签名称，“src=”应分配有所需图像的 URL。在本主题中，我们将学习 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 页面的一个有趣的事实是，当您使用 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中文网其他相关文章！