如何在HTML无序列表中为列表项内图片添加跳转超链接？

现有代码的问题根源 #

你当前的代码结构完全不具备实现图片跳转的基础条件，核心问题有两个：

• 代码里没有写<a>超链接的开标签，只留了两个位置错误的</a>闭合标签，根本没法形成有效的跳转作用范围
• 超链接的标签边界和图片完全错开了，哪怕写对了跳转地址，也没法触发图片的点击跳转效果
  你之前偶然一次操作成功的情况，是浏览器对错误HTML的容错解析刚好把错位的标签关联到了图片上，后续调整代码时破坏了这个错位结构，自然就没法复现之前的效果了。

可直接落地的实现方法 #

HTML本身就支持图片作为超链接的可点击内容，不需要额外写脚本。核心实现规则：只要把可点击元素完整放在<a>标签的包裹范围内，就可以触发对应跳转，给<a>标签的href属性填上要跳转的目标路径，点击图片就会自动完成跳转。

修正后的可用代码如下：

<ul>
  <li>
    <b>Goku</b>
    <br>
    <a href="替换为你实际需要跳转的目标页面路径">
      <img src="goku.jfif" alt="Goku 角色图">
    </a>
  </li>
</ul>

开发注意点 #

• 如果不希望图片在超链接中显示默认的蓝色边框，可以给<img>标签加style="border: none"消除默认样式
• 写HTML的时候尽量保持标签嵌套顺序清晰，不要把闭合标签散落在文本和图片中间，避免浏览器自动修正出不符合预期的页面表现
• <a>标签支持的所有通用属性，比如控制跳转打开方式的target、提示文本的title，都可以直接用在包裹图片的超链接上，和普通文本超链接的用法没有区别

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