网站不同于任何传播媒介。 将网站与诸如印刷，广播甚至电视等以前的媒体格式区别开来的主要原因之一是“ 超链接 ”的概念。
超链接通常也被称为“链接”，它使Web变得如此动态。 与可以引用其他文章或其他资源的印刷出版物不同，网站可以使用这些链接实际将访问者发送到其他页面和资源。 没有其他广播媒体可以做到这一点。 您可以在广播中收听广告或在电视上观看广告，但是没有超链接可以通过网站轻松完成的方式将您带到这些广告中的公司。 链接真的是一个惊人的通信和交互工具！
通常，在网站上找到的链接是指导访问者访问同一网站其他页面的文本内容。 网站的导航是实践中文本链接的一个例子，但链接不需要基于文本。 您也可以轻松链接您网站上的图片。 让我们看看这是如何完成的，接下来是一些您想要使用基于图像的超链接的实例。
如何链接图像
你需要做的第一件事是将图像本身放置在HTML文档中。 基于图像链接的常见用法是网站的徽标图形，然后链接回该网站的主页。 在下面的示例代码中， 我们使用的文件是我们徽标的SVG 。 这是一个不错的选择，因为它可以让我们的图像在不同分辨率下缩放，同时保持图像质量和较小的整体文件大小。
以下是如何将图像放置在HTML文档中的方法：
在图片标签周围，您现在可以添加锚点链接，在图片之前打开锚点元素，并在图片之后关闭锚点。 这与您将链接文本的方式类似，只是将您希望与锚标记链接的文字包装起来，而不是包裹图像。 在下面的示例中，我们将链接回我们网站的主页，即“index.html”。
将此HTML添加到页面时，请勿在锚标记和图像标记之间放置任何空格。 如果你这样做，一些浏览器会在图像旁添加小滴，这看起来很奇怪。
标志图像现在也可以作为主页按钮，这几乎是当今的Web标准。 请注意，我们在HTML标记中不包含任何视觉样式，例如图片的宽度和高度。 我们将这些视觉样式留给CSS，并保持HTML结构和CSS样式的清晰分离。
一旦你开始使用CSS，你为这个标志图形编写的样式可能包括调整图像的大小，包括多设备友好图像的响应式样式以及任何想要添加到图像/链接的视觉效果，如边框或CSS放下阴影。 如果您需要额外的“钩子”来与您的CSS样式一起使用，您还可以给图片或链接一个类属性。
用于图像链接的用例
因此添加图像链接非常简单。 正如我们刚才所看到的，你必须做的就是用适当的锚标签来包装图像。 你的下一个问题可能是“除了前面提到的标识/主页链接例子之外，你什么时候可以在实践中做到这一点？”
这里有一些想法：
- 图库中的缩略图图像链接到这些图像的较大版本。
- 单独用于表示内容的图像，如电子商务网站的产品照片。
- 作为其他内容（如博客文章或新闻稿）的一部分的预告图片吸引人们注意到内容为他们提供了一个可点击或点击阅读完整文章的目标区域。
- 图标图像用作连接到网站内特定功能或页面的按钮。
- 社交媒体链接使用对该网站或公司很重要的各种社交媒体网站的可识别徽标。
- 用作某些功能按钮的图像，如表单提交（最佳实践注释 - 从网站性能角度来看，纯粹使用CSS设计的按钮是比图片按钮更好的选择）。
使用图像时的提醒
图像可以在网站的成功中发挥重要作用。 上面提到的一个例子提到了将图像和其他内容一起使用，以引起对内容的关注并让人们阅读它。
在使用图片时，您必须注意根据您的需要选择正确的图片 ，其中包括正确的图片主题，格式，并确保您在网站上使用的任何图片都针对网站传送进行了适当的优化 。 这可能看起来像添加图像很多工作，但回报是值得的！ 图片真的可以增加一个网站的成功。
请毫不犹豫地在您的网站上使用适当的图片，并在需要时将这些图片链接到您的内容中，并注意这些图片的最佳实践，并在您的网页设计工作中正确并负责任地使用这些图片/链接。