超链接是互联网中最有趣的创新之一,自互联网诞生起,它们就一直是互联网的一个核心特性,使网络成为一个互联的系统。超链接允许我们将文档连接到其他文档或资源,甚至是文档中的特定部分。通过一个简单的网址,可以提供应用程序。几乎所有网络内容都可以被转换为链接,点击或激活这些超链接会使浏览器跳转到其他网址。
一、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>
如有表述错误及欠缺之处敬请批评指正。