資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 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+ 瀏覽量
廣告