首页 > 文章列表 > 如何在HTML中创建一个书签链接?

如何在HTML中创建一个书签链接?

HTML 链接 书签
139 2023-09-15

当您想记住网页以供将来参考时,书签会很有帮助。您可以随时访问该书签以再次查看该网页。

我们使用 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 部分。