HTML 中的 Alt 标签

HTML img 标签包含 alt 属性。该属性指定有关图像的信息，如图像名称、图像链接、图像作者、图像规范等。该属性的主要目的是当互联网连接速度较慢时，图像可能无法加载，但可以正常加载。因此，如果用户将光标从页面上移开，它会显示一些有关图像的文本，而不是用户从它们那里返回；因此，他可以理解该页面上有一些内容，并等待一段时间直到页面加载。

实时场景：当我们在网络上显示任何图像时，在不知道图像内容的情况下对最终用户来说是不公平的。所以我们必须使用 alt 属性为图像指定一些内容。

Alt 属性在 HTML 中如何工作？

Alt 属性为图像提供替代信息以识别图像的含义。该属性仅允许文本。此属性在标签中可用：

这 3 个标签 alt 属性仅用于在图像顶部显示文本。

语法 #1 – ;标签

<img src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="HTML 中的 Alt 标签">

语法 #2 – 标签

<img src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="HTML 中的 Alt 标签" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="HTML 中的 Alt 标签">
</map>
<input> tag

语法 #3 – ;标签

<input type="image" alt="HTML 中的 Alt 标签">

在 HTML 中实现 Alt 标签的示例

以下是提到的示例：

示例#1

代码：

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="HTML 中的 Alt 标签/css">
h1 {
color: blue;
HTML 中的 Alt 标签-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some HTML 中的 Alt 标签
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-img-tag-and-alt-attribute">Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghwm/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

输出：

如果图片资源可用：

如果图片资源不可用：

示例#2

代码：

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="HTML 中的 Alt 标签/css">
h1 {
color: green;
HTML 中的 Alt 标签-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some HTML 中的 Alt 标签
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-area-tag-and-alt-attribute">Images with area tag and alt attribute</h1>
<img src="/static/imghwm/default1.png" data-src="d2.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML 中的 Alt 标签" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

输出：

如果图片资源可用：

如果图片资源不可用：

示例 #3

代码：

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="HTML 中的 Alt 标签/css">
h1 {
color: green;
HTML 中的 Alt 标签-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some HTML 中的 Alt 标签
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-input-tag-and-alt-attribute">Images with input tag and alt attribute</h1>

First name:

输出：

如果图片资源可用：

如果图片资源不可用：

结论

Alt是area、img和input标签中可用的属性。此 alt 属性用于提供有关图像的信息，例如什么是图像或图像坐标、图像作者等。

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