HTML img 標(biāo)簽包含 alt 屬性。該屬性指定有關(guān)圖像的信息，如圖像名稱(chēng)、圖像鏈接、圖像作者、圖像規(guī)范等。該屬性的主要目的是當(dāng)互聯(lián)網(wǎng)連接速度較慢時(shí)，圖像可能無(wú)法加載，但可以正常加載。因此，如果用戶(hù)將光標(biāo)從頁(yè)面上移開(kāi)，它會(huì)顯示一些有關(guān)圖像的文本，而不是用戶(hù)從它們那里返回；因此，他可以理解該頁(yè)面上有一些內(nèi)容，并等待一段時(shí)間直到頁(yè)面加載。

實(shí)時(shí)場(chǎng)景：當(dāng)我們?cè)诰W(wǎng)絡(luò)上顯示任何圖像時(shí)，在不知道圖像內(nèi)容的情況下對(duì)最終用戶(hù)來(lái)說(shuō)是不公平的。所以我們必須使用 alt 屬性為圖像指定一些內(nèi)容。

Alt 屬性在 HTML 中如何工作？

Alt 屬性為圖像提供替代信息以識(shí)別圖像的含義。該屬性?xún)H允許文本。此屬性在標(biāo)簽中可用：

這 3 個(gè)標(biāo)簽 alt 屬性?xún)H用于在圖像頂部顯示文本。

語(yǔ)法 #1 – ;標(biāo)簽

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="HTML 中的 Alt 標(biāo)簽">

語(yǔ)法 #2 – 標(biāo)簽

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="HTML 中的 Alt 標(biāo)簽" 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 標(biāo)簽">
</map>
<input> tag

語(yǔ)法 #3 – ;標(biāo)簽

<input type="image" alt="HTML 中的 Alt 標(biāo)簽">

在 HTML 中實(shí)現(xiàn) Alt 標(biāo)簽的示例

以下是提到的示例：

示例#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>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>Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

è????o???

?|??????????èμ??o???ˉ??¨???

?|??????????èμ??o??????ˉ??¨???

?¤o???#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>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>Images with area tag and alt attribute</h1>
<img src="/static/imghw/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>

è????o???

?|??????????èμ??o???ˉ??¨???

?|??????????èμ??o??????ˉ??¨???

?¤o??? #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>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>Images with input tag and alt attribute</h1>

è????o???

?|??????????èμ??o???ˉ??¨???

?|??????????èμ??o??????ˉ??¨???

???è?o

Alt??ˉarea???img???input????-???-??ˉ??¨????±???§????-¤ alt ?±???§??¨?o????????????3??????????????ˉ???????|?????1???ˉ?????????????????????????????????è???-????

以上是HTML 中的 Alt 標(biāo)簽的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！