当您想要链接到一张图片时，可以在`＜img＞`标签内部设置`src`属性，它定义了图片的URL

本文链接：https://blog.csdn.net/blog_programb/article/details/106968600

本文主要探讨HTML5中<img>标签的应用，详细讲解src属性如何设置图像文件的URL，包括绝对路径和相对路径的使用，教你创建带有链接的图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5中，图像通常通过<img>标签来添加链接。当您想要链接到一张图片时，可以在<img>标签内部设置src属性，它定义了图片的URL，而alt属性则提供了一种可替代的文本描述，如果图片无法加载或对视觉障碍者来说很重要。

下面是一个示例代码，展示了如何在HTML5中创建一个指向图片并带有标题描述的超链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像链接示例</title>
</head>
<body>
    <a href="C:\Users\wodey\Desktop\web前端\1\2.图片\img-src\风景1.jpg" title="这是一张美丽的风景图片">
        <img src="C:\Users\wodey\Desktop\web前端\1\2.图片\img-src\风景1.jpg" alt="美丽的风景图片">
    </a>
</body>
</html>

在这个例子中，点击文本"这是一张美丽的风景图片"会带你跳转到指定的图片文件。如果图片链接失效，alt文本将显示出来，提供视觉上的替代信息。

img标签的 src 属性是必需的。
它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

 	<html>
 	<head>
 	<title>图像的链接</title>
 	</head>
 	<body>
 	<h3>图像的链接</h3>
 	<a href="苏轼简介.html">
 	<img src="图片/吏部陈公诗跋.jpg">
 	</a>
 	</body>
 	</html>

在HTML中，如果你只想显示图片而不想让其成为一个可点击的链接，你可以直接使用<img>标签，但不包括src属性后面的URL后面通常跟的"#"或其他链接标识。下面是如何实现这个的示例：

<img src="foo.jpg">

这里src属性指定了图片的路径，但是由于缺少了href或者其他链接相关的属性，图片不会被视为一个超链接。这样，浏览器就会仅显示图片，而不是让用户可以点击跳转到其他页面。

HTML中的alt属性有两个主要作用：

提供图像描述: 当图片无法正常加载或浏览器不支持图像查看时，alt文本会作为替代内容显示出来，使得视障人士可以通过屏幕阅读器理解图片的内容。
SEO优化: 对于搜索引擎而言，alt标签也起到了关键的角色。搜索引擎通常抓取并解析alt文本来理解页面内容，如果图片与页面主题相关且alt标签编写得当，可以提高搜索引擎排名，增加关键词密度，有利于搜索引擎爬虫的理解。

所以，良好的alt标签不仅可以增强用户体验，还有助于网站的可访问性和搜索引擎优化。
在这里插入图片描述