HTML如何设置图片超链接，代码要怎么写？

html-css020

HTML如何设置图片超链接，代码要怎么写？,第1张

你可以通过把某元素嵌套进a元素使其变成一个链接。

把你的图片嵌套进a元素。举例如下：

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

超链接是网页中的重要元素，超链接能使浏览者从一个页面跳转到另一个页面，实现文档和网页的互联工作。

了解超链接前还需要知道绝对路径和相对路径的概念。

绝对路径有两个缺点：

需要输入更多内容，

如果文件被移动，需要重新设置所有相关链接。

相对路径更适合网站内部链接。

相对路径使得同处站点文件夹内的相对地址可以自由在文件夹间构建连接，即使站点文件夹所在服务器发生改变，文件夹的所有内部链接都不会出现问题。 

超链接标记基本语法

<a href=”文件名”>链接元素</a>  

<a href=”URL”>链接元素</a>

可以使用input的click事件进行处理，这里假设点击转向的链接是百度，方法如下：

1、DOM0级事件处理:

1）html代码：<input name="注册" type="button" id="btn1" title="登注册" value="注册" o nclick="goToBaiDu()"/>

2）js代码：

function goToBaiDu(){

console.log('现在去百度啦！')

window.open('http://www.baidu.com')

}

效果如下：

2、DOM2级事件，绑定click事件，如下：

1）html代码：<input name="注册" type="button" id="btn1" title="登注册" value="注册"/>

2）js代码：

window.onload = function(){

document.getElementById('btn1').addEventListener('click',goToBaiDu)

}

function goToBaiDu(){

console.log('现在去百度啦！')

window.open('http://www.baidu.com')

}

效果如下：

3、上面的方式的打开一个新窗口，还有一个打开链接的方式，是在当前标签页下直接跳转到另一个页面，代码如下：

window.location.href="http://www.baidu.com"

HTML超链接可以用a标签来设置。

1、新建html文档，在body标签中添加a标签，为a标签添加“href”属性：

2、设置“href”属性的属性值为“page.html”，这时点击a标签会跳转到“page.html”页面：

3、为a标签设置“target”属性，属性值为“_blank”，这样“page.html”会在新标签打开，设置为“_self”则会在自身页面打开：