資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學描述在 HTML 的 <img> 標籤中使用 alt 屬性的用途
我們的網站頁面嚴重依賴影像。它們增強了網頁的視覺吸引力，更好地解釋了概念，以及許多其他功能。為了將影像新增到網頁中，我們使用 HTML 的 <img> 標籤。<img> 標籤的兩個必需屬性是：src，它指定圖片的路徑；以及 alt，它指定圖片的替代文字。如果由於某種原因影像無法顯示，則會顯示 alt 屬性。
儘管 <img> 標籤的 alt 屬性存在，但許多使用者選擇將其留空或使用與圖片無關的文字填充它。讓我們深入瞭解本文，學習更多關於 <img> 標籤中 alt 屬性的重要性。
HTML alt 屬性
alt 屬性被稱為替代文字或 alt 文字。它是一個簡短的、準確描述影像的描述。
當您在瀏覽器中訪問網頁時，不會顯示此文字。但是，如果由於某種原因您無法檢視影像，則 alt 文字會顯示出來。此文字需要足夠詳細和全面，以便為使用者或讀者提供影像需要傳達的資訊。
語法
以下是 HTML alt 屬性的語法
<img alt="text">
使用 alt 屬性的重要性
讓我們看看 HTML <img> 標籤中 alt 屬性的重要性。
如果連接出現問題或路徑錯誤，您的影像可能無法載入到您的網頁上。在這種情況下，將顯示 alt 文字值來代替圖片。
alt 文字提供了影像的描述性含義，搜尋引擎可以使用它來提高您網站的 SEO。使用合適的 alt 文字將有助於提高您網頁的排名，因為它為搜尋引擎提供了更好的資料來對您的網站進行排名。
對於視力障礙的螢幕閱讀器使用者來說，影像會被聲音描述出來。這體現了改善視力障礙或盲人可訪問性的價值。
當影像無法載入時，alt 文字被用作錨文字，將其連結到另一個頁面或文件。
示例
讓我們看看下面的示例，我們將使用 HTML <img> 標籤中的 alt 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #DE3163;
}
h2 {
color: #DE3163;
}
body {
text-align: center;
background-color: #D5F5E3;
font-family: verdana;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>The Best E-Way Learning.!</h2>
<img src="https://tutorialspoint.tw/cg/images/logo.png" alt="Tutorialspoint logo">
</body>
</html>
當我們執行上述程式碼時，它將生成一個輸出，其中包含顯示在網頁上的文字以及顯示的 alt 文字，因為我們提到的影像路徑是錯誤的。
65 次瀏覽
