HTML 中的链接页面

链接简单地定义为可单击的文本，因此只要单击此文本，它就可以帮助从一个页面移动到另一个页面。您可以提供指向页面、图像或网站等任何元素的链接，以便从一个页面移动到另一页面。 HTML 链接使用 带有 href 属性的标签，其中包含实际上要跳转的路径。默认情况下，HTML 代码中包含的任何链接都以蓝色显示。如果该链接之前已被用户访问过，它将显示为紫色。我们也可以使用 CSS 来更改此链接的颜色。在本主题中，我们将学习 HTML 中的链接页面。

HTML 链接页面的语法

让我们看看如何使用 HTML 来实际完成页面链接，如下所示：

语法：

<a href="url"> Text_Content </a>

在上述语法中，锚标记有助于使用目标链接等定义的属性来定义和打开新的目标页面或文档。

这与我们之前在 HTML 文件路径内容中看到的绝对文件路径完全一样。

语法：

<a href="url"></a><strong>></strong>

我们还可以通过使用相同的语法定义该内容的简单路径来打开网站的特定页面或部分。

如果我们必须打开特定页面，那么也可以使用相对文件路径，例如

语法：

<a href="page_name.html"></a>

我们可以使用 HTML 链接做一件更有趣的事情，因为我们可以使用语法打开一个空白浏览器窗口或在新窗口中打开网页。

语法：

<a href="Browser's%20_URL" target="_blank"></a>

如果我们想在父窗口中打开网页，那么也可以使用如下语法：

语法：

<a href="path" target="_parent"> </a>

如何使用 HTML 链接页面？

如前所述，我们已经了解了如何使用带有 href 属性的锚标记来链接网页、图像和其他文档，即定义绝对路径和相对路径等文件路径。

我们还熟悉如何处理链接的目标来执行功能，例如打开新的空白窗口、在父窗口中打开网页、在自身窗口中打开页面（就像我们默认使用的那样）、打开文档在完整的浏览器窗口中使用 _top 属性和更多东西。

创建书签的链接

让我们看看如何使用 HTML 中的链接创建书签锚点。这些功能可用作我们网页的书签；每当我们想要从大页面数据中查找某些内容时，只需定义一些文本或文档作为链接即可直接跳转到该目标位置。

要定义书签，我们必须将 id 作为属性添加到特定元素，通过传递名为“#”的符号（包含在标签 内的 href 中）来跳转到比其值实际要跳转的位置。 。如下图所示：

示例：

<a href="#home"> Homepage </a>
<h4 id="home"> Home 
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>
</h4>

还可以直接从另一个页面打开特定部分，只需将该页面的 url 定义到带有 href 属性的锚标记中即可；如下：

示例：

<a href="Demo.html%20#contactus"> Contact US </a>

下载文档的链接

借助 HTML 链接，我们还可以创建帮助我们下载文档的链接。它与将文本定义为链接相同，只是将目标文件的路径添加为 URL，因此每当我们单击此链接时，就会自动下载连接的文档或网页。所以我们可以下载PDF、zip、jpg等文件类型

示例：

<a href="downloads/demo.pdf"> This will download file in PDF format </a>
<a href="downloads/brochures.zip"> This will download file in zip
Format </a>
<a href="downloads/dinjo.jpg"> This will download file as a Image</a>

图像作为 HTML 链接：HTML 链接的另一个功能是将图像视为 HTML 文档中的链接；这可以定义如下：

示例：

<a href="demo.html"> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543989912696.png?x-oss-process=image/resize,p_40" class="lazy" alt="Travel"> </a>

按钮作为链接：也可以在 HTML 中将按钮定义为链接；此外，我们还必须添加一些 JavaScript 代码。因此，每当发生点击事件时，就会打开链接的页面。

HTML 链接页面示例

以下是下面提到的示例

示例#1

在此示例中，我们向一个网站添加一个简单的 HTML 链接，另一个是本地存储在我们系统中的网页。

代码：

<title>Linking Pages in HTML</title>


<h2 id="HTML-Page-Link">HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4 id="a-href-https-timesofindia-indiatimes-com-Latest-News-and-Updates-a"><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4 id="a-href-Webpage-Design-HTML-html-To-browse-new-webpage-click-Here-a"><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>

输出：

对于第一个链接，它将打开网站

对于第二个链接，它将打开本地系统中存储的网页

示例#2

这个示例说明我们使用链接在单击时在新选项卡中打开网页，并使用图像作为链接来打开新文档。

代码：

<title>Linking Pages in HTML</title>


<h2 id="linking-Pages-in-HTML">linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4 id="a-href-https-www-educba-com-target-blankwindow-More-About-US-a"><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2 id="HTML-Image-as-Page-Link">HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<a href="Webpage%20Design%20HTML.html">
<img src="/static/imghwm/default1.png" data-src="t3.jpg" class="lazy" alt="HTML tutorial"   style="max-width:90%">
</a>

输出：

The first link to open another page in the new target window:

Image as a link to open another webpage:

Example #3

In this example, we are using Button as a link.

Code:

<h4 id="Linking-Pages-in-HTML-Using-Button-as-a-Link">Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>

Output:

Whenever we are going to click on the button, it will work as a link to open another page:

Conclusion

Finally, linking pages in HTML can be done by using tag with a href attribute. This element is useful in various features to create a bookmark, open the document in the target blank tab, the same thing in parent tab, self tab, create the image as a link, and create a button as a link and many more others.

以上是HTML 中的链接页面的详细内容。更多信息请关注PHP中文网其他相关文章！