如何为HTML页面的图片添加跳转链接？

实现图片跳转的核心逻辑很直接：将每个<img>标签嵌套在<a>跳转标签内部，通过<a>标签的href属性指定跳转目标地址即可。

操作要点 #

• 根据不同社交平台的跳转需求，在对应<a>标签的href位置填入目标跳转地址
• 如需点击图标后在新标签页打开跳转目标，给<a>标签追加target="_blank"属性即可
• 建议给每个<img>补充alt属性标注平台名称，避免图片加载失败时无有效提示，同时提升页面可访问性

修改后的可直接复用代码 #

<div class="social-media">
  <ul>
    <li>
      <a href="替换为对应Facebook页面的跳转地址" target="_blank">
        <img src="images/facebook.png" alt="Facebook 官方账号入口">
      </a>
    </li>
    <li>
      <a href="替换为对应Twitter页面的跳转地址" target="_blank">
        <img src="images/twitter.png" alt="Twitter 官方账号入口">
      </a>
    </li>
    <li>
      <a href="替换为对应LinkedIn页面的跳转地址" target="_blank">
        <img src="images/linkedin.png" alt="LinkedIn 官方账号入口">
      </a>
    </li>
    <li>
      <a href="替换为对应Instagram页面的跳转地址" target="_blank">
        <img src="images/instagram.png" alt="Instagram 官方账号入口">
      </a>
    </li>
  </ul>
</div>

常见兼容问题处理 #

如果使用后发现图标周围出现链接默认的蓝色边框，只需要针对该区域的图片追加一条样式规则即可解决：

.social-media img {
  border: none;
}

内容的提问来源于stack exchange，提问作者TechyoGaming