html中超链接使用_HTML+CSS 基础知识-链接与图像

最新推荐文章于 2022-06-22 14:45:26 发布

彭鱼晏

最新推荐文章于 2022-06-22 14:45:26 发布

阅读量392

点赞数

文章标签： html中超链接使用

本文链接：https://blog.csdn.net/weixin_29486701/article/details/112479088

版权

一、链接

1、概述

HTML 页面使用超链接与网络上的另一个 HTML 页面相连。几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的 HTML 页面或者当前 HTML 页面中的某个部分。

当把鼠标指针移动到 HTML 页面中的某个链接上时，箭头默认会变为一只小手的样式。

2、链接元素

HTML <a> 元素用来定义 HTML 页面中的超链接，超链接可以创建跳转到其他 HTML 页面、文件、同一 HTML 页面内的另一个指定位置、电子邮件地址或任何其他 URL 的超链接。

使用 <a> 元素时，需要设置 href 属性，该属性的作用是用来设置跳转到指定 HTML 页面或其他链接的地址。如果使用 <a> 元素时没有设置 href 属性的话，那么 <a> 元素将是无效的。

如下示例代码展示了定义 <a> 元素时没有设置 href 属性的情况：

<a>这是一个没有设置href属性的a元素.</a>

注意：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。


如下示例代码展示了 <a> 元素的基本用法：

<a href="https://www.baidu.com">这是一个普通的链接元素.</a>

3、绝对路径

实质：就是从根目录开始

绝对路径就是指完整的描述目标文件位置的路径。简单来说，绝对路径就是无论你当前的位置在哪，找到目标文件的路径是不变的

无论是本地电脑也好，还是网络上的网站也好，系统盘符或者网络协议后面的 // 都称为根目录。也就是说，绝对路径是从根目录开始查找目标文件的路径。

绝地路径的优点如下所示：

防止网站被恶意抄袭。使用绝对路径，如果有人抄袭采集你的网站内容，里面的链接还会指向你的网站。
网页被移动位置，里面的链接还是指向正确的 URL。

绝对路径的缺点如下所示：
除非链接是动态插入的，不然没办法在测试服务器上进行测试。因为里面的链接将直接指向真正的域名 URL，而不是测试服务器中的 URL。
除非链接是动态插入的，不然移动内容页面将很困难。因为内容页面位置发生变化，在其他页面上的链接却可能无法跟着变化，还指向原来的已经硬编码的绝对路径。

4、相对路径

实质：相对于另外一个固定位置，而决定自己的位置

. 当前目录

.. 上级目录

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。简单来说，相对路径和你所在的位置是有关系的，你所在位置的不同会导致相对路径也会不同。

例如我们的本地电脑中的某个文件，如果我们想要找到它的话，可以通过相对路径的方式，如下所示：



相对路径的情况，可以总结如下所示：

如果当前页面与目标页面或资源处在同一个目录中的话，相对路径就是目标文件名称。
如果当前页面在目标页面或资源的父级目录中的话，相对路径就是目录名称/目标文件名称。
如果当前页面在目标页面或资源的子级目录中的话，相对路径就是../目标文件名称。
如果当前页面的父级目录与目标页面或资源的父级目录处在同一个目录中的话，相对路径就是../目录名称/目标文件名称。

5、打开方式

实质：跳转链接

当使用 <a> 元素设置跳转到指定的 HTML 页面或文件时，默认情况下是在当前浏览器页签中直接打开目标 HTML 页面或文件。

通过 <a> 元素的 target 属性可以用来设置以什么方式打开目标资源，该属性的值有如下 2 种常见的值：

_self：默认值，表示目标链接在当前页面打开。
_blank：表示目标链接在新窗口打开。
如下示例代码展示了在一个新的浏览器页签中打开目标资源：

<a target="_blank" href="https://www.baidu.com">这是一个普通的链接元素.</a>

6、Email 链接

HTML <a> 元素可以实现调用用户电脑的 Email 程序并自动填写指定 Email 地址来写 Email 的功能。该功能常出现在网站首页底部的联系我们。

注意：如果用户电脑中并没有安装任何 Email 程序的话，则会导致调用失败。

想要实现这种功能只需要在 <a> 元素的 href 属性值中增加 mailTo: 前缀即可，即格式为 mailTo: + Email地址。

如下示例代码展示了 <a> 元素实现调用 Email 程序的功能：

<a target="_blank" href="mailto:front-end@example.com">联系我们</a>

7、锚点

实质：通过id选择器，设定点击文本的跳转位置，所对应的元素

HTML <a> 元素的 href 属性与当前 HTML 页面中其他元素的 id 属性值配合使用，可以实现锚点功能。该功能常出现展示文档的网站或者电商网站的楼层效果。

所谓锚点，就是指当点击链接文本时，跳转到当前页面的指定元素位置。想要实现这种锚点功能只需要在 <a> 元素的 href 属性值设置为 #ID属性值 的格式即可。

如下示例代码展示了 <a> 元素实现锚点功能：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>锚点功能</title>
  <style>
    ul {
      margin-bottom: 600px;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#second">第二章</a></li>
  </ul>
  <h2 id="second">什么是前端开发</h2>
  <p>前端开发已经肯定不是你认为的页面开发了，具体能干嘛、要干嘛这是你要学习的。</p>
</body>

</html>

8、下载功能

在 HTML5 版本中为 <a> 元素新增了 download 属性，该属性用于设置下载文件的 URL。用户点击链接时，浏览器会提示用户将其保存到本地。

提示：如果 download 属性只有一个值的话，它将在保存提示中作为预定义的文件名。

如下示例代码展示了通过 <a> 元素的 download 属性实现下载功能：

<a href="files/fonts.zip" download="fonts.zip">下载文件</a>
如上述示例，用户在点击此链接时，浏览器会自动下载该文件。