HTML - alt 属性

HTML 的alt属性用于在img元素中提供图像的文本描述，如果图像加载失败，则显示该描述。

当正确使用alt属性时，每个人都可以理解网站上图像的信息和上下文，包括残疾人士或互联网连接缓慢的人。这对搜索引擎优化、包容性设计和 Web 可访问性至关重要。

语法

<tag alt = "value"></tag>

应用于

以下列出的元素允许使用 HTML alt 属性。

元素	描述
<img>	HTML <img> 标签用于在文档中添加图片
<area>	HTML <area> 元素在 HTML 中用于定义图像地图中可点击的区域。
<input>	HTML <input> 元素在 HTML 中用于输入文本。

HTML alt 属性示例

以下代码描述了 alt 标签的各种用法。

带有 img 元素的 Alt 属性

以下代码显示了如何将 alt 属性与 img 标签一起使用。在第一种情况下，图像在没有任何错误的情况下显示，但在第二种情况下，由于在指定位置找不到图像，因此显示备用文本。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'alt' attribute</title>
   <style>
      img {
         width: 300px;
         height: 100px;
      }
   </style>
</head>

<body>
   <!--HTML 'alt' attribute-->
   <p>Example of the HTML 'alt' attribute</p>
   <p>Image without any error</p>
   <img src="https://tutorialspoint.com/images/logo.png?v3" 
      alt="Tutorialpoint logo">
   <br>
   <p>Images with error</p>
   <img src="Asset-2PP_.png" 
      alt="Tutorialpoint logo">
</body>

</html>

带有 input 元素的 Alt 属性

考虑另一种情况，我们将使用 alt 属性与 input type=image。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'alt' attribute</title>
   <style>
      img {
         width: 300px;
         height: 50px;
      }
   </style>
</head>

<body>
   <!--HTML 'alt' attribute-->
   <p>Example of the HTML 'alt' attribute</p>
   <p>Image with an error</p>
   <input type="image" 
      src="download1.png" 
      alt="Tutorialspoint old logo">
   <p>Image without any error</p>
   <input type="image" 
      src="https://tutorialspoint.com/images/logo.png?v3" 
      alt="Tutorialspoint logo">
</body>

</html>

带有 area 元素的 Alt 属性

让我们看看下面的示例，我们将使用 alt 属性与 area 标签一起使用。以下代码将生成一个包含网页上显示的图像的输出。当用户点击图像时，它会显示其 alt 文本。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'alt' attribute</title>
</head>

<body>
   <!--HTML 'alt' attribute-->
   <p>Example of the HTML 'alt' attribute</p>
   <!--<img src="images (1).png"
    usemap="#sep" 
    width = "400" 
    height="379">-->
   <img src="images (1).png" 
      alt="HTML CSS JS logo" 
      usemap="#sep" 
      width="200" 
      height="200">
   <map name="sep">
      <area shape="circle" 
      coords="30,44,270,350" 
      alt="HTML logo" 
      href="html logo.html">
   </map>
</body>

</html>

HTML logo.html 文件代码

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML</title>
</head>
<body>
   <img src="html log.jpg" alt="HTML logo">
</body>
</html>

支持的浏览器

属性
alt	是	是	是	是	是

html_attributes_reference.htm

打印页面