超链接的扩展
扩展一:
超链接的打开方式
a标签中有一个target属性,用来指定超链接打开的位置
- target属性的属性值是一个可选值
- 可选值,也就是我们不能自定义的传入属性值,target属性的属性值是html为我们提前设置好的,我们只能是从中选择即可
- 当target属性的属性值为"_self"时 —> 在当前页面中打开超链接
- 超链接的默认打开方式就是self的方式,也就是在当前页面中打开
- 当target属性的属性值为"_blank"时 ----> 在一个新的页面中打开超链接
- blank是空白的意思 — 也即是重新在空白处打开这个超链接
- 很多国内的网站喜欢使用_blank的方式,也就是在一个新的窗口中打开,而很多的国外的网站喜欢使用 _self的方式
- 当target属性的属性值为"_self"时 —> 在当前页面中打开超链接
- 可选值,也就是我们不能自定义的传入属性值,target属性的属性值是html为我们提前设置好的,我们只能是从中选择即可
这里我们通过一个例子来讲解如何使用这两种打开网页的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接的打开方式</title>
</head>
<body>
<!-- 这种方式之下我们的超链接就是在我们的当前页面中打开 -->
<a href="http://www.baidu.com" target="_self">百度1</a>
<br />
<!-- 这种方式之下我们的超链接就是新建一个空白页面并打开 -->
<a href="http://www.baidu.com" target="_blank">百度2</a>
</body>
</html>
扩展二:
我们的超连接就是用来跳转到其他的页面或者跳转到当前页面的其他位置的,那么前面我们讲过了如果跳转到其他页面,但是我们如何跳转到当前页面的其他位置?
① a标签中的href属性设置为"#"的时候,这样我们点击这个超链接的时候不会跳转到其他页面中去,而是会跳转到当前页面的顶部位置
② 我们可以将超链接的href属性设置为: "#+目标元素的id属性值"的形式,这样就可以跳转到目标元素(标签)的位置
-
那么什么是标签的id属性?
我们通过一个例子来说明如何使用超链接跳转到当前页面的其他位置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用超链接跳转到当前页面的其他位置</title>
</head>
<body>
<!-- 这个时候为了清晰的看到我们是跳转到了页面中的指定位置,我们先创建几个段落
-->
<p>轻轻的我走了，<br>
正如我轻轻的来；<br>
我轻轻的招手，<br>
作别西天的云彩。<br>
</P>
<p>
那河畔的金柳，<br>
是夕阳中的新娘；<br>
波光里的艳影，<br>
在我的心头荡漾。<br>
</P>
<p id="p3">
软泥上的青荇，<br>
油油的在水底招摇；<br>
在康河的柔波里，<br>
我甘心做一条水草！<br>
</P>
<p>
那榆荫下的一潭，<br>
不是清泉，是天上虹；<br>
揉碎在浮藻间，<br>
沉淀着彩虹似的梦。<br>
</P>
<p>
寻梦？撑一支长篙，<br>
向青草更青处漫溯；<br>
满载一船星辉，<br>
在星辉斑斓里放歌。<br>
</P>
<p>
但我不能放歌，<br>
悄悄是别离的笙箫；<br>
夏虫也为我沉默，<br>
沉默是今晚的康桥！<br>
</P>
<p>
悄悄的我走了，<br>
正如我悄悄的来；<br>
我挥一挥衣袖，<br>
不带走一片云彩。<br>
</p>
<p>轻轻的我走了，<br>
正如我轻轻的来；<br>
我轻轻的招手，<br>
作别西天的云彩。<br>
</P>
<p>
那河畔的金柳，<br>
是夕阳中的新娘；<br>
波光里的艳影，<br>
在我的心头荡漾。<br>
</P>
<p>
软泥上的青荇，<br>
油油的在水底招摇；<br>
在康河的柔波里，<br>
我甘心做一条水草！<br>
</P>
<p>
那榆荫下的一潭，<br>
不是清泉，是天上虹；<br>
揉碎在浮藻间，<br>
沉淀着彩虹似的梦。<br>
</P>
<p>
寻梦？撑一支长篙，<br>
向青草更青处漫溯；<br>
满载一船星辉，<br>
在星辉斑斓里放歌。<br>
</P>
<p>
但我不能放歌，<br>
悄悄是别离的笙箫；<br>
夏虫也为我沉默，<br>
沉默是今晚的康桥！<br>
</P>
<p>
悄悄的我走了，<br>
正如我悄悄的来；<br>
我挥一挥衣袖，<br>
不带走一片云彩。<br>
</p>
<br>
<!-- 这个时候我们在网页的末尾创建一个超链接,点击这个超链接我们就可以跳转到网页的顶部 -->
<a href="#" >回到顶部</a>
<!-- 我们再创建一个超连接,当我们点击这个超链接的时候就会跳转到我们的第三自然段的位置处 -->
<a href="#p3">跳转到第三段的位置</a>
</body>
</html>
补充:
我们可以使用"javascript:;"作为超链接的路径占位符使用
- 也就是使用"javascript:;" 来作为a标签中href属性中的属性值,此时点击这个超链接是什么都不会发生的
如果我们的a标签不指明href属性的属性值,那么这个时候这个a标签不是一个真正的超链接
- 如果我们a标签不指明href属性我们可以发现我们的这个超链接是点不动的,也就是不是一个真正的超链接,没有跳转的功能
2698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
