用记事本写html插入图片后 ？
时间：2024-01-28 14:35:01 | 来源：网站运营
时间：2024-01-28 14:35:01 来源：网站运营
用记事本写html插入图片后 ？：在很多的网页中我们经常会遇到点击一个图片就跳转到另一个页面的情况。那么这种效果到底是怎么来做的呢？其实原理是很简单的。和点击文字产生跳转是一样的原理。点击文字跳转是将文字设置成超链接也就是锚点，那么点击图片跳转就是将图片设置成超链接即可。
而在html中超链接的标签就是<a></a>标签。所以要点击图片实现跳转的功能，也是要依赖于<a></a>标签来实现的。将图片放在<a></a>标签里面即可。而图片又要依赖于<img/>标签。所以在html的标签结构上就涉及到<a></a>和<img/>标签的嵌套。
假设我点击图片跳转到百度，那么用两种非常简单的方式实现以下这个效果，适合初学者参考。
（一）html实现点击图片跳转1、html代码<a href="http://www.baidu.com"><img src="../image/01.png" alt=""></a>2、代码分析- <a></a>标签中有一个href属性，这个属性里面写的是跳转的路径，就是你点击图片的时候需要跳转到哪个地方去，就写跳转的目标路径，比如我这个案例中需要跳转到百度首页，而百度的首页路径网址为：“http://www.baidu.com”；所以我写的就是这个路径。
- <img/>标签中有一个src属性，这个属性里面写的是你引入图片的路径。我的图片通常是放在我的项目的image的文件夹中，所以我的图片路径为：“../image/01.png”；这个路径根据你具体的项目结构来写，如果不清楚可以去学习一下相对路径和绝对路径的知识点，这里不再赘述。
点击图片跳转（二）使用JavaScript实现点击图片跳转使用JavaScript来实现点击跳转的本质还是离不开<a></a>标签，html的代码结构和第一种方法一样。只是通过js获取这个元素后在对其的相关属性进行操作而已。然后绑定有个点击事件即可。
1、html代码<a href=""><img src="../image/01.png" alt=""></a>2、JavaScript代码 document.querySelector("a").onclick = function() { this.href = "http://www.baidu.com"; }3、代码分析- document.querySelector("a")是获取dom元素的方式之一，括号里面写“a”表示的查找的是a标签，这是JavaScript中固定的语法结构
- onclick是JavaScript中的点击事件，获取到a标签后给a标签绑定一个点击事件。
- 将点击事件添加一个匿名执行函数，函数中写需要执行的操作。当点击事件触发后就会执行这个函数。
- this在这个案例中表示的是当前对象，而获取到的a标签在被点击的时候会调用这个匿名函数，所以this表示的就是a标签。this.src=“http://www.baidu.com”。就是在当点击图片的时候将a标签中的href属性的值设置为百度首页的路径。从而实现页面跳转的功能。
（三）总结以上两种方式本质上还是给a标签中的href属性设置属性值，只是通过两种不同的代码来实现而已。只要理解了超链接的本质，实际上都是非常的简单的。实现一个功能的方法有很多，根据具体的需求使用最合适的就好了。关于实现这个功能的其他的方法，有兴趣的可以自行去探究学习一下。
在线咨询
