web前端学习（四）——HTML5的超链接标签设置（页面间链接、锚链接以及邮件链接）

★★光亭★★

已于 2024-04-24 11:22:19 修改

阅读量1.4w

点赞数 9

分类专栏： # 【HTML+CSS+JavaScript】文章标签：前端学习 html5

于 2020-12-19 18:10:03 首次发布

本文链接：https://blog.csdn.net/weixin_43823808/article/details/111407978

版权

【HTML+CSS+JavaScript】专栏收录该内容

48 篇文章 55 订阅

订阅专栏

1.HTML5的超链接——页面间链接

<a href ="链接网址" target=“目标窗口位置”>文本或图像</a>
这里的 href代表的是链接路径（#代表空链接）。
target后面跟的如果是 -self，则打开自身窗口；如果是 -blank，则打开新建窗口。
下面我们来看一个页面间链接的小实例：👇👇👇

实例一：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>超链接的基本用法</title>
	</head>
	
	<body>
		<a href="hetao.html" target="_blank">无漂白薄皮核桃</a><br/><br/>
		<a href="hetao.html" target="_blank"><img src="image\hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a><br><br>
		<a href="https://www.tencent.com" target="_blank">腾讯</a><br><br/>
		<a href="#" target="_self">首页</a><br><br>
		<a href="https://blog.csdn.net/weixin_43823808" target="_blank"><img src="D:\1.jpg" width="600" height="400" alt="美国队长" title="美国队长"/></a><br><br><hr>
	</body>
</html>

运行结果如下：

2.HTML5的超链接——锚链接

锚链接主要有两种方式：

①从位置甲跳转到本页的位置乙。

②从位置甲跳转到其他页的位置乙。

锚链接的创建步骤如下：

①创建跳转标记：
<a name="maker">位置乙</a>
②创建跳转链接：
<a href="#maker">位置甲</a>
下面来看一个实例：👇👇👇

实例二：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>锚链接</title>
	</head>
	
	<body>
		<!-- href="..."中设置的是跳转链接 -->
		<p>
			<img src="E:\计算机专业学习资料和文件\HTML\image\logo.jpg" width="305" height="104" alt="logo"/>
			[<a href="#register" target="_self">新用户注册</a>]
			[<a href="#login" target="_blank">用户登录帮助</a>]
		</p>
		<h1>新手指南 - 登录或注册</h1>
		<h2>购物流程</h2>
		<img src="E:\计算机专业学习资料和文件\HTML\image\help_steps.jpg" width="752" height="67" />
		<!-- name="..."中设置的是跳转标记 -->
		<!-- 这里将直接跳转到当前网页中 “新用户注册” 的位置
			 name="..."这其中的内容必须与第12行 href="#..."中的内容保持一致 -->
		<h2><a name="register">新用户注册</a></h2>
		<h4>Step 1 点击页面右上方的“注册”按钮注册聚美优品账号。</h4>
		<img src="E:\计算机专业学习资料和文件\HTML\image\login_step1.jpg" width="550" height="132" />
		<h4>Step 2 注册前请仔细阅读《聚美优品用户协议》，如无异议请点击“同意以下协议并注册”。请根据相应提示在信息栏内填入您的注册信息。</h4>
		<img src="E:\计算机专业学习资料和文件\HTML\image\signup_step2.jpg" width="716" height="588" />
		<p>注册成功后系统将自动登录您的账号，并转至聚美优品首页。</p>
		<!-- 这里将直接跳转到新建网页(与原网页相同)中 “登录” 的位置
			 name="..."这其中的内容必须与第13行 href="#..."中的内容保持一致 -->
		<h2><a name="login">登录</a></h2>
		<h4>Step 1 如您已经拥有聚美账号，请点击页面右上方的“登录”按钮</h4>
		<img src="E:\计算机专业学习资料和文件\HTML\image\login_step1.jpg" width="550" height="132" />
		<h4>Step 2 在登录页面的信息栏内填入对应信息，点击“登录”按钮进行登录，或通过选择登录框下方的合作账号进行快速登录。登录成功后，系统将自动跳转至聚美优品首页。</h4>
		<img src="E:\计算机专业学习资料和文件\HTML\image\login_step2.jpg" width="716" height="528"/>
	</body>
</html>

运行结果如下：

这其中的 href="#A" 和 name="B"，如果想实现点击跳转链接可以跳转到相应的跳转标记的位置，那么A和B必须设置为一样的值（可以理解为字符串）；否则将不会实现跳转。

下面是博主正确设置了跳转链接和跳转标记，之后跳转到相应的位置的截图：👇👇👇

3.HTML5的超链接—— 邮件链接

这里的邮件链接可以为电子邮件、QQ、MSN等。其相应的地址在这里就不做说明了。

直接来看下面的实例吧！！！

实例三：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>邮件链接</title>
	</head>
	
	<body>
		<p>
			<img src="E:\计算机专业学习资料和文件\HTML\image\logo.jpg" width="305" height="104" alt="logo"/>
			[<a href="https://mail.qq.com">发邮件</a>]
		</p>
	</body>
</html>