如何在 HTML 中创建书签链接？

当您想记住网页以备将来参考时，书签很有用。您可以随时访问该书签以再次查看网页。

我们使用 HTML 链接来创建书签，以便我们可以跳转到网页的特定部分。

如果网页很长，书签可能很有用。当我们点击链接时，页面将向下或向上滚动到网页上指定书签的位置。

语法

首先，我们应该使用 id 属性来创建书签

<h2 id="id name or number">text…</h2>

然后，添加一个指向书签的链接，以跳转到同一页面或另一个页面。

<a href="#section id">heading of the section</a>

示例

以下是链接同一网页部分的示例。

<!DOCTYPE html>
<html>
<body>
   <a href="#RAJYA SABHA">Jump to RAJYA SABHA</a><br>
   <a href="#PRESIDENT OF INDIA">Jump to PRESIDENT OF INDIA</a>
   <h3>PARLIAMENT</h3>
   <p>The Parliament House in New Delhi is the seat of the Parliament of India. Its houses the Lok Sabha and the Rajya Sabha which represent lower and upper houses respectively in India's bicameral parliament. </p>
   <h3 id="PRESIDENT OF INDIA">PRESIDENT OF INDIA</h3>
   <p>Ram Nath Kovind is an Indian politician serving as the 14th and current President of India </p>
   <h3>LOK SABHA</h3>
   <p>Lok Sabha is composed of representatives of the people chosen by direct election.<br> The maximum strength of the House of the Constitution is 552.</p>
   <h3 id="RAJYA SABHA">RAJYA SABHA</h3>
   <p>The ‘Council of States’ which is also known as Rajya Sabha</p>
</body>
</html>

当我们点击“跳转到 Rajya Sabha”时，它将导航到同一页面上的 Rajya Sabha 部分。

当我们点击“跳转到印度总统”时，它将导航到同一页面上的印度总统部分。

示例

以下是链接同一网页部分的另一个示例。

<html>
<head>
   <title>HTML Bookmark Link</title>
</head>
<body>
   <h1>Tutorials</h1>
   <p>
      <a href="#z">Learn about Scripting Languages</a>
   </p>
   <h2>Programming</h2>
   <p>Here are the tutorials on Programming.</p>
   <h2>Mobile</h2>
   <p>Here are the tutorials on App Development</p>
   <h2>Design</h2>
   <p>Here are the tutorials on Website Designing</p>
   <h2>Databases</h2>
   <p>Here are the tutorials on Databases.</p>
   <h2>Networking</h2>
   <p>Here are the tutorials on Networking</p>
   <h2>Java Technologies</h2>
   <p>Here are the tutorials on Java Technologies.</p>
   <h2>Digital Marketing</h2>
   <p>Here are the tutorials on Digital Marketing.</p>
   <h2>
      <a name="z">Scripting Languages</a>
   </h2>
      <p>Here are the tutorials on Scripting Languages.</p>
</body>
</html>

当我们点击“了解脚本语言”时，它将导航到同一页面上的脚本语言部分。

示例

以下是链接同一网页部分的另一个示例。

<!DOCTYPE html>
<html>
<body>
   <p><a href="#C4">Jump to Module 4</a></p>
   <h2>Module 1</h2>
   <p>This Module explains Module 1</p>
   <h2>Module 2</h2>
   <p>This Module explains Module 2</p>
   <h2>Module 3</h2>
   <p>This Module explains Module 3</p>
   <h2 id="C4">Module 4</h2>
   <p>This Module explains Module 4</p>
   <h2>Module 5</h2>
   <p>This Module explains Module 5</p>
   <h2>Module 6</h2>
   <p>This Module explains Module 6</p>
</body>
</html>

当我们点击“跳转到模块 4”时，它将导航到同一页面上的模块 4 部分。

更新于： 2022-11-18

14K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告