HTML支持了多种超链接,今天先了解一下链接的方式。
- 在新窗口中打开
- 在当前页面打开
- 在页面内跳转
- 图像超链接
- 图像热区链接
在新窗口打开
之前我学习了超链接的格式:
<a href="http://www.w3school.com.cn">This is a link</a>
这里,我只需要链接后面增加 target:"_blank" 属性即可定义打开方式。
<a href="http://www.w3school.com.cn" target:"_blank">This is a link</a>
在本页面打开
其实target有多种属性,其中就有我们常用的网页内打开
<a href="http://www.w3school.com.cn" target:"_self">This is a link</a>
另外,这其实也是默认模式
页面内跳转(书签)
有时候我们会看到百度百科内部有直接跳转的部分。
如何做到呢?就需要网页内的超链接了。
首先,我们先建立书签。
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
提示:锚的名称可以是任何你喜欢的名字。
提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。
<a id="label">锚(显示在页面上的文本)</a>
使用超链接即可实现跳转
<a href="#label">有用的提示</a>
实例:(可以复制体会一下)
<html>
<head>
</title>决断力测试 </title >
</ head>
<body>
<p> 如果你意外地拿到一千元奖金,想去买一件很需要的大衣,但是钱不够;如果去买一双不急需要的运动鞋,则又多了数百元,你会怎么做? <p>
<a href="#a">1.直接买大衣</a>
<a href="#b"> 2.买运动鞋再去买些其它的小东西。</a>
<a href="#c">3.什么都不买先存起来。</a>
<br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
答案:
<a id="a">买大衣你的决断力还算不错,虽然有时也会三心二意、犹豫徘徊,可是总是在 重要关头作出决定,比起普通人来说已经算是杰出的了!你最大的特色是作了决定不再反悔。 </a>
<br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<a id="b">2、买运动鞋你是拿不定主意的人,做事没主见,处处要求别人给你意见,你很少自已做判断,因为个性上你有些自卑,不能肯定自已,你这种人一定曾经受过某些心理伤害,或者周遭的人物太优秀了,因此造成你老是有不如人的感觉。 </a>
<br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<a id="c">3、不买你是判断力超级强的人,不客气地说,你甚至有点莽撞,就是因为你冲动率直的个性,反而考虑不够周详,你常常后悔自己匆匆作决定,忽略了其它事情。</a>
</body>
</html>
创建图像链接
格式
<a href="链接"><img src="图片位置"></a>
以下代码提供参考
<a href="www.baidu.com"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif"></a>