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中文网其他相关文章!