【Web前端】深入了解HTML链接：从基础到进阶

一条晒干的咸鱼

发布于 2024-11-19 11:33:27

70300

代码可运行

文章被收录于专栏：learnlearn

运行总次数：0

代码可运行

超链接是互联网中最有趣的创新之一，自互联网诞生起，它们就一直是互联网的一个核心特性，使网络成为一个互联的系统。超链接允许我们将文档连接到其他文档或资源，甚至是文档中的特定部分。通过一个简单的网址，可以提供应用程序。几乎所有网络内容都可以被转换为链接，点击或激活这些超链接会使浏览器跳转到其他网址。

一、HTML 超链接

HTML 使用超链接来连接网络上的不同文档。在 HTML 中，链接是用于在网页之间进行导航的元素。这些链接通常将一个网页与另一个网页或资源（如文档、图像、音频文件等）关联起来。通过点击文本或图像上的链接，用户可以在浏览网页时跳转到其他位置，从而实现网页间的互联。

下面就以百度新闻的主页为例，里面就包含了非常多的链接，各自连到不同新闻、网站的其他地方（导航功能），或者登入/注册页面（用户工具）等。

HTML 使用 <a> 标签来创建超文本链接。

这些超链接可以是单个字、词语、一组词或图像，点击它们可以跳转到新的文档或当前文档的某个部分。

当鼠标指针悬停在网页中的链接上时，箭头会变成小手形状。

<a> 标签中的 href 属性用于指定链接的地址。

默认情况下，链接在浏览器中的显示形式如下：

未访问过的链接为蓝色字体并带有下划线。
访问过的链接为紫色并带有下划线。
点击后的链接变为红色并带有下划线。

如何在 HTML 文档中创建超链接呢？下面我将用一个实例来描述：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>web开发06</title> 
</head>
<body>

<p>
<a href="https://www.baidu.com">本文本</a> 是一个指向百度搜索首页网站中的一个页面的链接。</p>
<p><a href="http://news.baidu.com">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>

二、HTML 链接语法

在 HTML 中，创建链接的核心元素是 <a>元素。以下是该元素的基本语法和主要属性：

href: 这是链接的关键属性，用于指定目标 URL，可能是网页、文件或其他资源的地址。
target : 决定链接在浏览器中如何打开。常见的值有 _blank（在新标签页或窗口中打开）和 _self（在当前标签页中打开）。
title : 提供额外的信息，通常在鼠标悬停时显示为提示。
rel : 定义与链接目标的关系，例如 nofollow、noopener 等。

1、块级链接

就像之前提到的那样，任何内容，甚至块级内容都可以作为链接出现。如果想让标题元素变为链接，就把它包裹在锚点元素（<a>）内，像这个代码段一样：

<a href="https://www.baidu.com">
    <h1>百度一下</h1>
  </a>
  <p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>

它将标题转化为了链接：

2、图片链接

如果你需要将图片设置为链接，可以使用 <a> 元素来包裹 <img> 元素。这样，当用户点击图片时，浏览器会导航到指定的链接地址。以下是相关的 HTML 代码示例：

<a href="目标网址">
  <img src="图片地址" alt="图片描述">
</a>

假设你有一张图片，点击它会引导用户到一个示例网站：

<a href="https://search-operate.cdn.bcebos.com/e8cbce1d53432a6950071bf26b640e2b.gif">
  <img src="e8cbce1d53432a6950071bf26b640e2b.gif" alt="示例图片">
</a>

在这个例子中，<a> 元素包裹了 <img> 元素。当用户点击图片时，浏览器将导航到 https://search-operate.cdn.bcebos.com/e8cbce1d53432a6950071bf26b640e2b.gif。确保 src 属性指向图片的实际地址，alt 属性提供了图片的替代文本，这对于图像无法显示或使用屏幕阅读器的用户非常重要。

3、使用 <title>添加信息

title 属性可以用来为链接提供额外的说明信息。这个信息通常在用户将鼠标悬停在链接上时显示为工具提示。以下是如何在 <a> 元素中使用 title 属性的示例：

<p>
  我创建了一个指向<a
    href="https://www.baidu.com"
    title="了解全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。"
    >百度搜索引擎的主页</a
  >的超链接。
</p>

href 属性: 指定了链接的目标 URL，这里是 Mozilla 的主页。
title 属性: 提供了关于链接的附加信息，在用户将鼠标悬停在链接上时显示。
链接文本: “Mozilla 主页”，这是用户点击的可见文本。

注意：链接的标题信息只有在鼠标悬停时才会显示，这使得使用键盘导航的用户可能无法获得这些信息。如果标题信息对页面至关重要，应该采用所有用户都能轻松获取的方式进行呈现，比如直接在页面文本中展示。

4、统一资源定位符（URL）和路径（Path）的详细描述

以 URL https://photo.cctv.com/2024/08/10/PHOALvSCiHV8jrxHpOR1Pm8k240810.shtml?spm=C35449.P80754075394.S41437.35#GWL6xwtwXcXm240810_1 这个页面为例：

(1) 统一资源定位符（URL）

URL 是用来指定互联网上资源的地址，它的基本结构包括协议、域名、路径、查询参数和片段标识符。具体结构如下：

https://photo.cctv.com/2024/08/10/PHOALvSCiHV8jrxHpOR1Pm8k240810.shtml?spm=C35449.P80754075394.S41437.35#GWL6xwtwXcXm240810_1

协议（Protocol）: https
表示使用加密的超文本传输协议，确保数据的安全性。
域名（Domain）: photo.cctv.com
这是服务器的地址，photo 是子域名，cctv.com 是主域名。
路径（Path）: /2024/08/10/PHOALvSCiHV8jrxHpOR1Pm8k240810.shtml
指向服务器上特定资源的路径。包括目录结构和文件名：
/2024/08/10/: 目录部分，表示资源的日期组织结构（年、月、日）。
PHOALvSCiHV8jrxHpOR1Pm8k240810.shtml: 文件名部分，可能表示特定的图片或文章内容，.shtml 表示这是一个服务器端包含的 HTML 页面。
查询参数（Query String）: ?spm=C35449.P80754075394.S41437.35
spm 是查询参数的键，后面跟随的是参数值 C35449.P80754075394.S41437.35。查询参数用于传递额外信息，如跟踪来源、用户行为分析等。
片段标识符（Fragment Identifier）: #GWL6xwtwXcXm240810_1
用于标识页面的特定部分或元素。#GWL6xwtwXcXm240810_1 可能是页面上的一个锚点，用于直接定位到页面中的某一部分。

(2) 路径（Path）

在 URL 中，路径部分是从域名后面开始到查询参数或片段标识符之前的部分。路径指定了在服务器上资源的位置。

路径示例: /2024/08/10/PHOALvSCiHV8jrxHpOR1Pm8k240810.shtml这部分 URL 指向了一个具体的资源，详细说明如下：
/2024/08/10/: 表示资源按照日期组织的文件夹结构。通常，网站会按日期来整理内容，便于管理和检索。
PHOALvSCiHV8jrxHpOR1Pm8k240810.shtml: 表示资源的文件名。.shtml 文件扩展名通常指示这是一个包含服务器端脚本的 HTML 文件。

(3) 总结

URL 是一个完整的地址，用于在互联网上定位和访问资源。它包括协议、域名、路径、查询参数和片段标识符。
路径是 URL 中指示资源具体位置的部分，它从域名后面开始，直到查询参数或片段标识符之前。路径帮助服务器找到存储的特定资源。

5、下载链接

如果你想在 HTML 中使用该下载网易云音乐Windows客户端的链接 https://d1.music.126.net/dmusic/NeteaseCloudMusic_Music_official_3.0.1.202965_64.exe，可以创建一个下载链接如下：

<a href="https://d1.music.126.net/dmusic/NeteaseCloudMusic_Music_official_3.0.1.202965_64.exe" download="NeteaseCloudMusic_Installer.exe">Download Netease Cloud Music Installer</a>

在这个例子中：

href 属性指定了下载文件的实际 URL。
download 属性（可选）允许你为下载的文件指定一个不同的名称（NeteaseCloudMusic_Installer.exe）。如果省略，文件将以原始文件名下载。

点击该链接时，浏览器会开始下载 NeteaseCloudMusic_Music_official_3.0.1.202965_64.exe 文件，并将其保存为 NeteaseCloudMusic_Installer.exe（如果 download 属性被使用的话）。

6、电子邮箱链接

在 HTML 中创建电子邮件链接通常使用 <a> 标签和 mailto: 协议。这个链接允许用户点击后直接打开默认的电子邮件客户端，以便发送电子邮件。以下是一些示例和详细解释：

基本的电子邮件链接

<a href="mailto:wamtar@hotmail.com">Email Us</a>

mailto:wamtar@hotmail.com 是一个电子邮件链接，点击这个链接会打开用户的默认邮件客户端，自动将收件人设置为 wamtar@hotmail.com。
Email Us 是链接的显示文本。

电子邮件链接的扩展用法

你还可以通过在 mailto: 链接中添加更多参数来预填充主题和邮件正文：

<a href="mailto:wamtar@hotmail.com?subject=Inquiry&body=Hello, I would like more information about your services.">Email Us</a>

在这个例子中：

subject=Inquiry 设置邮件的主题为 "Inquiry"。
body=Hello, I would like more information about your services. 设置邮件的正文内容为 "Hello, I would like more information about your services."

带有多个收件人和抄送

<a href="mailto:recipient1@hotmail.com,recipient2@hotmail.com?cc=cc@hotmail.com&subject=Meeting&body=Dear Team,%0A%0APlease find the agenda for our upcoming meeting.">Send Email</a>

在这个例子中：

recipient1@hotmail.com,recipient2@hotmail.com 是主收件人列表，用逗号分隔。
cc=cc@hotmail.com 设置抄送的地址。
subject=Meeting 设置邮件的主题为 "Meeting"。
body=Dear Team,%0A%0APlease find the agenda for our upcoming meeting. 设置邮件的正文内容，其中 %0A 是换行符的 URL 编码表示。

注意事项

浏览器和客户端兼容性：电子邮件链接的行为取决于用户的默认邮件客户端。不同的客户端可能会有不同的处理方式。
URL 编码：如果邮件正文或主题中包含特殊字符，如空格或换行符，应该使用 URL 编码。例如，空格应该编码为 %20，换行符编码为 %0A。

通过使用 mailto: 链接，可以方便地创建电子邮件的触发点，简化联系过程。

下面是两个关于 HTML 的综合练习题，包括超链接、HTML 标题、图片链接和下载地址的使用，请自行练习：

练习题 1

题目：

创建一个 HTML 页面，包含以下内容：

一个标题，显示为 "My Awesome Website"。
一个段落，描述该网站并包含一个超链接到 "https://www.example.com"，显示文本为 "Visit Example"。
一张图片，图片 URL 为 "https://www.example.com/image.jpg"，替代文本（alt）为 "Example Image"。
一个下载链接，允许用户下载一个文件，下载地址为 "https://www.example.com/file.zip"，显示文本为 "Download File"。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Website</title>
</head>
<body>
    <h1>My Awesome Website</h1>
    <p>Welcome to my awesome website. For more information, <a href="https://www.example.com" target="_blank">visit Example</a>.</p>
    <img src="https://www.example.com/image.jpg" alt="Example Image">
    <p><a href="https://www.example.com/file.zip" download="file.zip">Download File</a></p>
</body>
</html>

练习题 2

题目：

设计一个 HTML 页面，其中包含：

一个标题，显示为 "Cool Stuff".
一个段落，说明页面上有一个有用的资源，并包含一个超链接到 "https://www.coolstuff.com"，显示文本为 "Check Out Cool Stuff"。
一张图片，图片 URL 为 "https://www.coolstuff.com/picture.png"，替代文本（alt）为 "Cool Stuff Picture"。
一个链接，允许用户下载一个软件，下载地址为 "https://www.coolstuff.com/software.exe"，显示文本为 "Download Software"。设置 download 属性，默认文件名为 "software.exe"。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool Stuff</title>
</head>
<body>
    <h1>Cool Stuff</h1>
    <p>We have a great resource for you. <a href="https://www.coolstuff.com" target="_blank">Check Out Cool Stuff</a>.</p>
    <img src="https://www.coolstuff.com/picture.png" alt="Cool Stuff Picture">
    <p><a href="https://www.coolstuff.com/software.exe" download="software.exe">Download Software</a></p>
</body>
</html>