超链接在日常生活中,我们经常见到,它让我们浏览网页更加直观与方便,日常开发中,超链接也必不可少。今天我们就来总结一下超链接及其用法。
什么是超链接
首先我们明确一下超链接的定义。超链接使我们的文档连接到任何其他文档,也可以链接到指定稳步。几乎所有网络内容转换为链接,当然最常见的就是网页地址。
创建一个超链接
<a href="https://www.baidu.com">百度</a>
这是一个简单的超链接,点击会跳转到百度。从上面代码不难看出超链接的标签是<a></a>,在初始HTML文章中我们提到过属性,对于超链接的属性,我们也要熟知。
- href:指定连接的地址。可以是本地地址、文章锚点、网络地址。上面我们指定的就是网络地址。
- target:跳转方式。用来设置打开链接的方式。
- _blank:在新的页面窗口打开
- _self:在当前打开,相当于覆盖了当前网页内容。(默认)
- _parent:在父窗口打开(跟框架有关)
- _top:在当前浏览器打开,框架消失(跟框架有关)
- title:提示文字,当鼠标放到超链接使提示的文字。
知道了这些属性,我们可以把超链接丰富一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank" title="跳转到百度"></a>
</body>
</html>
锚点链接
接下来我们来了解一下什么是锚点链接
- 概念:将长页面划分为多个模块,给每个模块做一个标记,点击锚点链接就能跳转到对应的模块中。注意锚点链接需要在同一页面中。
- 用法:href后面跟“#”就能快速回到顶部,如果是要到具体的位置,那么需要在跳转位置加上name或者id属性,然后“#”+name或id名字就行,一般a标签用name,其他的用id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="#">顶部</a>
<a name="mark">我用name标记锚点</a>
<div id="mark1">我用id标记锚点</div>
<a href="#mark">点击跳转</a>
<a href="#mark1">点击跳转</a>
</body>
</html>