如何在 HTML 頁面中建立頁面連結?
連結是從一個網頁到另一個網頁的連線。
我們可以向網頁新增頁面連結。 HTML 連結 是超連結。 <a> 標籤定義了超連結,用於在頁面之間建立連結。 href 屬性與 <a> 標籤一起使用,指示連結的目標。
要在 HTML 頁面 中建立頁面連結,我們需要使用 <a> 和 </a> 標籤的 href 屬性。確保 <a></a> 標籤放置在 <body>…</body> 標籤 內。
連結文字是可見的。單擊連結文字將導航到指定的 URL 地址。預設情況下,連結在瀏覽器網頁上顯示如下。
未訪問的連結是下劃線和藍色的
已訪問的連結是下劃線和紫色的
活動的連結是下劃線和紅色的
語法
以下是建立網頁頁面連結的語法。
<a href="https://www.Google.com/"> text of the link </a>
示例
以下示例程式演示如何在網頁文件上建立頁面連結。
<!DOCTYPE html> <html> <body> <h1>HTML Article on Links </h1> <p><a href="https://www.Google.com/">Click this to navigate to the Google home page</a></p> </body> </html>
以下是未訪問連結的輸出。當我們單擊連結時,它將引導我們到谷歌搜尋引擎的主頁。因此,連結將被訪問並顯示為下劃線和紫色。
示例
在下面的示例中,我們在網頁文件上鍊接了 tutorialspoint 的官方頁面。
<!DOCTYPE html> <html> <head> <title>HTML Links</title> </head> <body> <h1>Click the link below and navigate the official page of tutorialspoint</h1> <a href="https://tutorialspoint.tw/index.htm">TUTORIALSPOINT</a> </body> </html>
如果我們單擊連結,它將重定向到目標頁面。當我們單擊連結時,它將引導我們到 tutorialspoint 網頁的主頁。
使用影像作為超連結
我們可以新增影像作為連結,以及其他 HTML 元素作為連結。
語法
以下是將影像新增為網頁連結的語法。
<a href="link address"><img src="image destination"></a>
示例
以下是如何將影像設定為連結的示例程式。
<!DOCTYPE html> <html> <body> <h1>HTML Article on Links </h1> <p><a href="https://www.Google.com/"><img src="https://tutorialspoint.tw/javafx/images/javafx-mini-logo.jpg" style="width:50px;height:50px;"></a></p> </body> </html>
以下是影像作為連結的輸出,單擊影像將引導我們到谷歌主頁。
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP