HTML学习笔记9-HTML链接

最新推荐文章于 2022-07-14 20:27:25 发布

weeds606

最新推荐文章于 2022-07-14 20:27:25 发布

阅读量335

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/98841793

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

一、链接的定义

使用<a>标签定义链接，a标签的内容是需要展示给用户的信息。可以是文字也可以是图片

1.1.点击文字进行链接跳转，具体定义方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
</head>
<body>

<a href="https://blog.csdn.net/doulihang">这是我的博客地址</a>

</body>
</html>

具体实现效果，点击“这是我的博客”会跳转到链接“https://blog.csdn.net/doulihang”，注意：此时是在原有页面上跳转，页面显示如下

1.2.点击图片进行链接跳转，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
</head>
<body>
<a href="https://blog.csdn.net/doulihang">
    <img src="images/1.jpg" width="140">
</a>

</body>
</html>

1.3 a标签的href属性除了指定网络上的地址，还可以指定本地的地址，具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
</head>
<body>
<a href="折行练习.html">折行练习</a>
</body>
</html>

二、HTML链接target属性使用

HTML链接使用target属性，点击元素内容，会打开新的浏览器页面访问href关联的链接。

1.指定单个a标签的target属性。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
</head>
<body>
<a href="https://blog.csdn.net/doulihang" target="_blank">这是我的博客地址</a>

</body>
</html>

页面实现效果：

2.通过base标签target属性，指定html文档中所有a标签的target属性。注意：a标签和base标签同时指定target属性，以a标签指定的为准。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
    <!--指定base标签-->
    <base target="_blank">
</head>
<body>
<a href="https://blog.csdn.net/doulihang">这是我的博客地址</a>
<a href="https://blog.csdn.net/doulihang">这是我的博客地址</a>
<a href="https://blog.csdn.net/doulihang">这是我的博客地址</a>
<a href="https://blog.csdn.net/doulihang">这是我的博客地址</a>
</body>
</html>

三、HTML链接 name属性

在同一文档中的链接元素，A为<a name="tip">标题1</a>，B为<a href="#tip">跳转到标题1</a>。点击B时，会跳转到A所在的位置。该属性可以实现我们常见的“回到顶部”功能。

具体原理为：A创建了一个name为tip的锚，B的href属性为#锚名，就可以指向该锚。点击B就会跳转到该锚所在位置。

该功能用链接的id属性也可以实现。具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
</head>
<body>

<a name="tip">标题1</a>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<a href="#tip">跳转到标题1</a>
</body>
</html>

实现效果可以将代码复制下来，实际操作一下。

四、a标签title属性，当鼠标悬停时，显示title属性的值。具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签练习</title>
</head>
<body>
<a href="折行练习.html" title="这是我的折行练习地址">折行练习</a>

</body>
</html>

实现效果如下：