一、超链接标签<a></a>
作用:实现页面的跳转功能
href
:控制跳转的目标位置
target
:_self
:再自身页面打开(默认效果也是在自身页面打开)
_blank
:在空白页打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--超链接标签-->
<!--跳转到本地资源-->
<a href="文本标签.html">超链接1</a>
<br />
<!--跳转的目标找不到,提示找不到资源-->
<a href="abc.html">超链接2</a>
<br />
<!--跳转到网络资源-->
<a href="http://www.sogou.com">超链接3</a>
<br />
<!--_blank:在空白页打开-->
<a href="http://www.sogou.com" target="_blank">超链接4</a>
<br />
<!--_self:再自身页面打开-->
<a href="http://www.sogou.com" target="_self">超链接5</a>
图片超链接
<a href="https://www.baidu.com" target="_blank"><img src="img/curry.jpg" /></a>
</body>
</html>
二、设置锚点
应用场合:当一个页面太长的时候,就需要设置锚点,然后可以在同一个页面的不同位置之间进行跳转。
同一个页面不同位置的跳转:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置锚点</title>
</head>
<body>
<a name="1F"></a>
<h1>手机</h1>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<a name="2F"></a>
<h1>化妆品</h1>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<a name="3F"></a>
<h1>母婴产品</h1>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<a name="4F"></a>
<h1>图书</h1>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<a href="#1F">手机</a>
<a href="#2F">化妆品</a>
<a href="#3F">母婴产品</a>
<a href="#4F">书籍</a>
</body>
</html>
不同页面利用锚点:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置锚点</title>
</head>
<body>
<a href="设置锚点.html#1F">超链接</a>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/74231.html