HTML超链接

最新推荐文章于 2024-09-10 13:43:16 发布

辰拾

最新推荐文章于 2024-09-10 13:43:16 发布

阅读量876

点赞数 12

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_74053974/article/details/136656122

版权

<a>元素是创造链接的主要元素。

<a>元素有以下属性：

1.href：指定链接目标的URL，是链接的重要属性。可以是另一个网页、文件的、照片的URL（可以理解为网址和路径（非官方））

例1：点击百度文字跳转到百度，如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--点击百度文字跳转到百度-->
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

例2：打开另一个本地链接：

href:后面跟的是相对路径

绝对路径：绝对路径是指文件在硬盘上真正存在的路径。例如“1.txt”这个文件是存放在硬盘的“C:\Users\”目录下，那么 “1.txt”这个文档的绝对路径就是“C:\Users\1.txt”

相对路径：相对于自己的目标文件位置。例如“1.htm”文件所在目录为“C:\Users\One”，而“1.txt”文件所在目录为“C:\Users\Two”，那么“1.txt”相对于“1.htm”文件来说，是在其所在目录的上级目录里。

在相同文件夹下，有day02.html、test1.html,那么对于test.html来所day02.html的路径是./day02.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="" target="_blank">
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://im.qq.com/index/">QQ</a>
    <a href="./day02.html">day02</a>
</body>
</html>

2. target（可选）：指定链接如何打开。常见的值包括_blank（在新标签或窗口中打开链接）、_self（在当前标签或窗口中打开链接（默认））、_parent(在父框架中打开链接文档)、_top（在窗口的整个主体中打开链接的文档）、framename（在指定的 iframe 中打开链接文档）

例：点击百度文字跳转到百度，百度网页在新页面打开如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>

扩展：多个网页要转链接，如下图：

<base>标签为页面上的所有的相对链接规定默认 URL 或默认目标。

在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。

如果href中有链接，该链接为默认链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="" target="_blank">
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://im.qq.com/index/">QQ</a>
</body>
</html>

3.除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该锚点。

例：跳转到Hello world

注：在<p>Hello World</p>上设一个唯一属性值id，id可以理解为锚点（个人理解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://im.qq.com/index/">QQ</a>
    <a href="../新建文件夹/day02.html">day1</a> 
    <a href="#tital">Hello World</a>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p id="tital">Hello  World</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
</body>
</html>

例2：回到顶部：在最上面设一个id（回到顶部）,或者#后面为空默认hui'dao'din（回到顶部1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/" id="baidu">百度</a>
    <a href="https://im.qq.com/index/">QQ</a>
    <a href="../新建文件夹/day02.html">day1</a> 
    <a href="#tital">Hello World</a>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p id="tital">Hello  World</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <a href="#baidu">回到顶部</a>
    <a href="#">回到顶部1</a>
</body>
</html>

4.图像链接

图像链接就是<a>和</a>标签之间的元素内容为<img>元素

..是返回上一级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://im.qq.com/index/">QQ</a>
    <a href="./新建文件夹/day02.html">day1</a> 
    <a href="#"><img src="../photo/OIP-C.jpg" alt=""></a>
</body>
</html>