HTML网页设计：四、超链接

小白教程 · 发表于 2021-4-16 12:14:32

超链接

HTML中通过使用<a>标签来创建链接，当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手，点击相应的文本或图片会跳转至新的页面或者当前页面中的某个位置。

1.a标签

HTML 链接连接语法如下：

\<a href="url" target="打开方式" name="锚的名称" title="">Link text\</a>

复制代码

href属性规定链接的目标，是a标签的必须属性。

target属性规定在何处打开链接文档。它有五个选项：

（1）_blank：在新窗口中打开被链接文档。

（2）_self：默认。在相同的框架中打开被链接文档。

（3）_parent：在父框架集中打开被链接文档。

（4）_top：在整个窗口中打开被链接文档。

（5）framename：在指定的框架中打开被链接文档。

name属性规定锚的名称，HTML5 中不支持。

title属性说明了鼠标指针悬停所显示的文字。

开始标签和结束标签之间的文字被作为超级链接来显示，即上面一行的代码显示为Link text。

<a> 标签的使用有如下两种方式：

(1)通过使用 href 属性 - >创建指向另一个文档的链接。

(2)通过使用 name 属性 - >创建文档内的书签。

一些简单的超链接代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的超链接合集</title>
</head>
<body>
<a href="https://www.hao123.com/">点击跳转至360浏览器页面</a>
<a href="../图像标签学习/图像标签学习.html" target="_blank">点击跳转图像标签学习页面</a>
<a href="https://www.baidu.com/" target="_self" title="跳转至百度">
<img src="../图像标签学习/7908.jpg" alt="许嵩" width="100px" height="80px">
</a>
</body>
</html>

复制代码

网页示例如下：

2.锚链接

锚链接可以链接到本页面的特定位置，也可以链接到另一个页面的特定位置，其实现方式是添加锚标记。html5不支持name属性，以下用id属性示例，name属性用法大致一样。

（1）当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。

其代码格式如下：

<a href="#标记名">跳转到本页面的标记处</a>

复制代码

（2）当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。

其代码格式如下：

<a href="url#标记名">跳转到另一个页面的标记处</a>

复制代码

"#标记名"为页面中某一个标签的id属性值，即若想要跳转到网页的某个位置，就先在这个位置所在的标签设置id属性，然后才能通过锚链接跳转到该位置。

（3）当href属性的值为一个“#”时，直接跳转至本页面顶部。

其代码格式如下：

复制代码

锚链接部分代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接学习</title>
</head>
<body>
<a href="https://www.hao123.com/" name="第一个链接">点击跳转至360浏览器页面</a>
<a href="https://www.baidu.com/" target="_blank">
<img src="../图像标签学习/7908.jpg" alt="许嵩" id="图片1" width="100px" height="80px">
</a>
<a href="https://www.baidu.com/" target="_self" id="图片2">
<img src="../9736.jpg" alt="许嵩" width="100px" height="80px">
</a>
<a href="https://www.baidu.com/" target="_blank" title="跳转至百度">点击跳转至百度页面</a>
<a href="https://www.baidu.com/" target="_blank" title="跳转至百度">点击跳转至百度页面</a>
<a href="https://www.baidu.com/" target="_blank" title="跳转至百度">点击跳转至百度页面</a>
<a href="#第一个链接">点击跳转至链接1</a>
<a href="#图片1">点击跳转至图片1</a>
<a href="#图片2">点击跳转至图片2</a>
<a href="#">点击跳转至顶部</a>
</body>
</html>

复制代码

3.功能性链接（1）邮箱链接

<a href="mailto:邮箱号">点击向我发送邮件</a>

复制代码

（2）QQ链接

需要在QQ推广里面加载生成链接然后复制粘贴即可

本帖寻求最佳方案

，目前已有 0 个回复我要奖励

		自动登录	找回密码
密码			立即注册

[好文分享] HTML网页设计：四、超链接

本帖寻求最佳方案

本帖子中包含更多资源