資料結構
網路
RDBMS
作業系統
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 部分。
當我們點選“跳轉到 PRESIDENT OF INDIA”時，它將導航到同一頁面的 PRESIDENT OF INDIA 部分。
示例
以下是連結同一網頁一部分的另一個示例。
<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+ 次瀏覽
廣告