資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究HTML 中的超連結是什麼？
概述
簡單來說，超連結是指幫助客戶端重定向到使用者想要的資訊的連結。超連結可以將使用者重定向到其他頁面，或者在同一頁面上重定向到特定內容。在 HTML 中，錨標記元素允許開發者建立指向網頁的超連結。此錨標記是一個開始和結束標記，需要同時使用開始標記和結束標記。
語法
在 HTML 中建立超連結的語法如下所示。其中還包含一個“href”屬性，該屬性包含頁面連結或客戶端將被重定向到的位置的地址。
<a href="#"> Hyperlink </a>
演算法 1
<a> tutorialspoint </a>
現在為錨標記元素新增一個 href 屬性，並在其中新增地址。
<a href="https://tutorialspoint.tw/"> tutorialspoint </a>
現在超連結已準備就緒。
單擊超連結，您將被重定向到該頁面。
示例 1
在此示例中，我們將學習如何建立將使用者重定向到另一個網頁的超連結。
<html> <head> <title> Redirect to another page </title> </head> <body> Hyperlink: <a href="https://tutorialspoint.tw/"> tutorialspoint </a> </body> </html>
演算法 2
建立一個包含 HTML 基本結構的 HTML 檔案。
現在建立一個無序列表，其中包含一些列表項。
<nav> <li>About</li> <li>Articles</li> <li>Contact</li> </nav>
現在將列表項包含在一個錨元素中，併為其新增 href 屬性，其值為以“#”開頭的“id”名稱。
<nav> <a href="#about"> <li>About</li> </a> <a href="#articles"> <li>Articles</li> </a> <a href="#contact"> <li>Contact</li> </a> </nav>
現在建立三個 div 標記，並使用與錨標記“href”屬性中分配的相同的 id 名稱。
<div id="about" style="background-color: aquamarine;"> <p> About section </p> </div> <div id="articles" style="background-color: rgb(155, 241, 17);"> <p> Articles section </p> </div> <div id="contact" style="background-color: beige;"> <p> Contact section </p> </div>
如果要區分各個部分，則可以對頁面進行樣式設定。
同一頁面的超連結已準備就緒。
示例 2
在此示例中，我們將建立一個包含“關於”、“文章”和“聯絡”等部分的網頁。我們還將建立一個導航欄，其中包含用於重定向到該部分的超連結。因此，當用戶單擊特定連結時，使用者將被重定向到該頁面的該部分。例如，當用戶單擊“文章”連結時，使用者將被重定向到網頁的文章部分。
<html>
<head>
<title> Redirect to the content </title>
<style>
* {
margin: 0;
}
nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: fixed;
background-color: white;
width: 100%;
padding: 1rem;
}
div {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<nav>
<a href="#about">
<li>About</li>
</a>
<a href="#articles">
<li>Articles</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</nav>
<div id="about" style="background-color: aquamarine;">
<p> About section </p>
</div>
<div id="articles" style="background-color: rgb(155, 241, 17);">
<p> Articles section </p>
</div>
<div id="contact" style="background-color: beige;">
<p> Contact section </p>
</div>
</body>
</html>
結論
正如我們在上述示例中看到的，“href”是一個在構建超連結中起重要作用的屬性。因此，我們可以說“href”屬性是超連結的支柱。大多數情況下，它與導航欄專案一起用於導航欄部分。在簡單的 HTML 中，我們使用錨標記（<a>）來建立超連結，但在 ReactJs 中，我們使用<Link>標記在頁面之間進行路由。
更新於： 2023年8月16日
255 次檢視
廣告