HTML - Text Links - 極客書

一個網頁可以包含各種連結，這些連結可以將您直接帶到其他頁面，甚至是給定頁面的特定部分。這些連結稱爲超連結。

超連結允許訪問者通過單擊單詞、短語和圖像在網站之間導航。因此，您可以使用網頁上可用的文本或圖像創建超連結。

注意−我建議您通過一個簡短的教程了解url

Linking Documents

使用HTML標記<A>指定連結;。此標記稱爲「錨定標記」（anchor tag），打開標記和關閉標記之間的任何內容都將成爲連結的一部分，用戶可以單擊該部分以訪問連結的文檔。下面是使用標記的簡單語法。

<a href = "Document URL" ... attributes-list>Link Text</a>

Example

Live Demo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

這將生成以下結果，您可以在其中單擊生成的連結，以訪問教程點的主頁（在本例中）。

The target Attribute

我們在前面的示例中使用了target屬性。此屬性用於指定打開連結文檔的位置。以下是可能的選項&負;

Sr.No	Option & Description
1	空白在新窗口或選項卡中打開連結文檔。
2	_自我在同一框架中打開連結文檔。
3	_母公司在父框架中打開連結文檔。
4	_頂部在窗口的整個正文中打開連結的文檔。
5	目標幀打開名爲targetframe的連結文檔。

Example

嘗試下面的示例來理解爲目標屬性提供的幾個選項的基本區別。

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

這將產生以下結果，您可以在其中單擊不同的連結，以了解爲目標屬性提供的各種選項之間的差異。

Use of Base Path

連結與同一網站相關的HTML文檔時，不需要爲每個連結提供完整的URL。如果在HTML文檔頭中使用<base>標記，則可以將其刪除。此標記用於爲所有連結提供基本路徑。因此，您的瀏覽器將把給定的相對路徑連接到此基路徑，並生成一個完整的URL。

Example

下面的示例使用<base>標記指定基URL，稍後我們可以使用所有連結的相對路徑，而不是爲每個連結提供完整的URL。

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

這將產生以下結果，您可以單擊生成的連結HTML Tutorial來訪問HTML Tutorial。

Linking to a Page Section

您可以使用name屬性創建指向給定網頁特定部分的連結。這是一個兩步的過程。

注意−HTML5中不推薦使用的名稱屬性。不要使用此屬性。改用id和title屬性。

首先在網頁中創建一個指向您要訪問的位置的連結，並使用<a…>標記命名，如下所示&減號;

<h1>HTML Text Links <a name = "top"></a></h1>

第二步是創建一個超連結來連結文檔並將其放置在您要訪問的位置−

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

這將生成以下連結，您可以在其中單擊生成的連結轉到頂部以到達HTML文本連結教程的頂部。

Go to the Top

Setting Link Colors

您可以使用<body>標記的屬性設置連結、活動連結和已訪問連結的顏色。

Example

將以下內容保存在test.htm中，並在任何web瀏覽器中打開它，以查看屬性如何工作。

Live Demo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

這將產生以下結果。只需在點擊前檢查連結的顏色，然後在激活連結和訪問連結時檢查其顏色。

Download Links

您可以創建文本連結以使您的PDF、DOC或ZIP文件可下載。這非常簡單;您只需要給出可下載文件的完整URL，如下所示−

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

這將生成以下連結並用於下載文件。

File Download Dialog Box

有時，您希望提供一個選項，讓用戶單擊某個連結，它將彈出一個「文件下載」框給用戶，而不是顯示實際內容。這非常簡單，可以在HTTP響應中使用HTTP頭來實現。

例如，如果要使文件名可從給定連結下載，則其語法如下。

#!/usr/bin/perl # Additional HTTP Header print "Content-Type:application/octet-stream; name = \"FileName\"\r\n"; print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n"; # Open the target file and list down its content as follows open( FILE, "<FileName" ); while(read(FILE, $buffer, 100)){ print("$buffer"); }

注意−有關PERL CGI程序的更多詳細信息，請閱讀教程PERL和CGI。