超链接是什么?如何建立网页超链接

什么是 HTML 中的链接和超链接

链接是将网站内的页面和其他网站的页面连接起来的链。没有链接,我们就不会有任何网站。

例如,让我们看看这个 URL,https://www.abc.com/。当你在地址栏中输入它时,它会带你到官方的 freeCodeCamp 站点。

简单来说,我们可以说链接只是网页的网址,允许你连接不同的服务器。

也许你想知道超链接是什么?它们允许我们通过称为锚标记的引用将文档链接到其他文档或资源。它们是万维网背后的一个基本概念,它使通过链接在网页之间的导航变得更加容易。

超链接可以以不同的形式呈现,例如图像、图标、文本或任何类型的可见元素,单击这些元素后会将你重定向到指定的 url。

例如,如果你单击此处,你将进入我的个人资料,其中包含我的其他文章列表。那是一个超链接。

如何在 HTML 中创建链接

如何使用 <a> 链接

你可以通过将文本(或任何其他相关内容)包裹在 <a></a> 元素中,并使用包含地址的 href 属性来创建基本链接。

下面是示例:

<a href="https://www.abc.com">Visit: Freecode Camp!</a>

如何设计链接样式

通常在 .html 文件中插入链接,将链接到样式和功能文件。它们通常以 .css 和 .js 文件扩展名命名。

以下是链接到 CSS 文件的方法:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

这是链接到 JS 文件的方法。你可以将想要链接的内容放在 head 或 body 标签中。

<!DOCTYPE html>
<html>
<head>
  <script src="myScript.js"></script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

如何在站点内链接

链接到站点内的不同页面

你可以使用这种类型的链接将用户定向到同一站点上的不同页面。

以你的网站有 5 个页面的情况为例,你会希望用户能够从一个点访问所有页面,例如导航栏。

首先,你必须创建所有页面,然后链接它们。在这种情况下,我们将这样做:

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="pricing.html">Pricing</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

上面的示例将链接到网站的不同部分——“Home” 页面、“Services”、“Pricing” 和 “About”,按顺序排列。只写文件名就足够了,因为所有工作都在同一个工作文件夹中共享。

如何链接到网站的特定部分

假设在你网站的某个地方,你提到了一个特定的主题或页面,你希望读者或访问者通过单击直接跳转到该部分。

首先,你必须将 id 属性添加到页面的该部分,也许它是一个段落——如果是这样,它的外观是这样的:

<p id="detailed-info"> Read more on Upcoming Events </p>

在你的链接之后,在 href 中添加 id

<a href="#detailed-info"> Read more about upcoming events </a>

HTML 中其他类型的链接

如何链接到可下载文件

当你想要链接到用户需要下载而不是在浏览器中打开的资源时,你可以使用 download 属性。这提供了默认的保存文件名。

download 属性非常适合你希望用户保存在其计算机或移动设备上的 PDF、图像文件、视频和音频剪辑以及其他媒体内容。

这是一个带有 download 链接的示例:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

如何添加电子邮件链接

电子邮件链接允许我们创建指向电子邮件地址的超链接。你可以使用 HTML <a></a> 标签创建这些链接——但在这种情况下,我们传递收件人的电子邮件地址而不是传递 URL。

你可以使用 mailto 属性在锚标记中指定电子邮件地址。

例如:

<a href="mailto:abc@gmail.com">Send email to Me</a>

除了电子邮件地址,你还可以提供其他信息。事实上,任何标准邮件头字段都可以添加到你提供的 mailto URL。最常用的是“主题”、“抄送”和“正文”。

这是一个包含抄送、密送、主题和正文的示例:

<a href="mailto:abc@gmail.com?cc=larymak4@gmail.com&bcc=abb@gmail.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

HTML 链接属性

HTML 链接具有各种属性,你可以使用这些属性来提供更多特定信息。以下是一些最常用的。

1、href 属性

href 属性定义 HTML 链接的目标 URL 地址。它使标记的单词或短语可点击。href 属性创建到另一个网页的超链接,如果没有它,HTML 链接将无法按预期工作。

2、target 属性

target 属性定义了 HTML 链接的打开位置。曾经访问过一个网站,当你点击一个链接时,它会自动在一个新标签中打开吗?嗯,这就是这个属性的作用。

以下是你可以与 target 属性一起使用的所有可能选项:

  • -blank => 在新选项卡中打开链接。主要用于避免失去网站的访问者。默认情况下,当用户单击链接时,它会在同一选项卡中打开——但这会改变这一点。
<a href= "https://www.abc.com/" target="_blank"> freeCodeCamp</a>
  • _self => 在同一窗口或单击它的选项卡中加载 URL。这通常是默认值,不需要指定。
<a href="https://www.abc.com" target="_self">freeCodeCamp</a>
  • _parent => 加载父级框架的 URL,它只能与 frame 一起使用。
<a href="https://www.abc.com" target="_parent">freeCodeCamp</a>
  • _top => 在整个窗口中加载链接的文档。
<a href="https://www.abc.com" target="_top">freeCodeCamp</a>
  1. title 属性
    title 属性概述有关链接目的的额外信息。如果用户将鼠标悬停在链接上,则会出现一个工具提示,描述链接的目标、标题或任何其他信息:
<a href="https://www.abc.com" title="Link to free learning Resources">Learn to code</a>

HTML 链接快速提示和回顾

在本文中,我们了解了 HTML 中的所有链接和超链接。下面是一些帮助你处理链接的提示。

首先,当你使用图像作为链接时,最好在文本中包含 alt 标签。这提供了在图片未加载的情况下显示的替代文本。

其次,你应该练习使用 hreflang 属性指定锚链接到的文档的语言。

<a href="https://www.abc.com" hreflang="en">Freecode Camp</a>

Web 实际上只是一个超链接文档库,其中锚标记充当相关文档之间的桥梁。

我们已经了解了如何使用链接,如何创建它们,以及为什么它们在 Web 开发中很重要。

给TA打赏
共{{data.count}}人
人已打赏
网络生活

HTML教程:最简单的HTML入门教程,快速学会HTML代码

2024-3-29 14:54:25

网络生活

HTML标签大全:HTML教程:一篇文章了解HTML网页代码

2024-3-29 14:58:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索