HTML img 標籤包含 alt 屬性。此屬性指定有關圖像的信息,如圖像名稱、圖像連結、圖像作者、圖像規範等。該屬性的主要目的是當網路連接速度較慢時,圖像可能無法加載,但可以正常加載。因此,如果用戶將遊標從頁面上移開,它將顯示一些有關圖像的文本,而不是用戶從頁面返回;因此,他可以理解該頁面上有一些內容,並等待一段時間直到頁面加載。
即時場景:當我們在網路上顯示任何影像時,在不知道影像內容的情況下對最終使用者來說是不公平的。所以我們必須使用 alt 屬性為圖像指定一些內容。
Alt 屬性為影像提供替代資訊以識別影像的含義。該屬性僅允許文字。此屬性在標籤中可用:
這 3 個標籤 alt 屬性僅用於在圖像頂部顯示文字。
語法 #1 – ;標籤
<img src="image%20resource" alt="HTML 中的 Alt 標籤">
語法 #2 – 標籤
<img src="image%20resource" 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" src="image%20resource" alt="HTML 中的 Alt 標籤">
以下是提到的範例:
代碼:
<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="3.jpg" alt="First Bird" style="max-width:90%"> </div> <div class="column"> <img src="4.jpg" alt="Second Bird" style="max-width:90%"> </div> <div class="column"> <img src="5.jpg" alt="Third Bird" style="max-width:90%"> </div> </div>
輸åºï¼
å¦æåçè³æºå¯ç¨ï¼
å¦æåçè³æºç¡æ³ä½¿ç¨ï¼
代碼ï¼
<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="d2.jpg" 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>
輸åºï¼
å¦æåçè³æºå¯ç¨ï¼
å¦æåçè³æºç¡æ³ä½¿ç¨ï¼
代碼ï¼
<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>
輸åºï¼
å¦æåçè³æºå¯ç¨ï¼
å¦æåçè³æºç¡æ³ä½¿ç¨ï¼
Altæ¯areaãimgåinputæ¨ç±¤ä¸å¯ç¨ç屬æ§ãæ¤ alt 屬æ§ç¨æ¼æä¾æéååçä¿¡æ¯ï¼ä¾å¦ä»éº¼æ¯ååæåååæ¨ãååä½è çã
以上是HTML 中的 Alt 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!