HTML 中的 Alt 標籤

HTML img 標籤包含 alt 屬性。此屬性指定有關圖像的信息，如圖像名稱、圖像連結、圖像作者、圖像規範等。該屬性的主要目的是當網路連接速度較慢時，圖像可能無法加載，但可以正常加載。因此，如果用戶將遊標從頁面上移開，它將顯示一些有關圖像的文本，而不是用戶從頁面返回；因此，他可以理解該頁面上有一些內容，並等待一段時間直到頁面加載。

即時場景：當我們在網路上顯示任何影像時，在不知道影像內容的情況下對最終使用者來說是不公平的。所以我們必須使用 alt 屬性為圖像指定一些內容。

Alt 屬性在 HTML 中如何運作？

Alt 屬性為影像提供替代資訊以識別影像的含義。該屬性僅允許文字。此屬性在標籤中可用：

這 3 個標籤 alt 屬性僅用於在圖像頂部顯示文字。

語法 #1 – ;標籤

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="HTML 中的 Alt 標籤">

語法 #2 – 標籤

<img src="/static/imghw/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/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>

輸出：

如果圖片資源可用：

如果圖片資源無法使用：

範例#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/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>

輸出：

如果圖片資源可用：

如果圖片資源無法使用：

範例#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中文網其他相關文章！