HTML 連結

連結或超連結是從一個 Web 資源到另一個 Web 資源的連線。

HTML 連結(超連結或 Web 連結)

連結允許使用者在世界任何地方的任何伺服器上無縫地從一個頁面移動到另一個頁面。連結有兩個端點,稱為錨點和方向。連結在源錨點處開始並指向目標錨點,目標錨點可以是任何 web 資源(例如,影象,音訊或視訊剪輯,HTML 文件或文件本身內的元素等)。

預設情況下,大多數瀏覽器中的連結將如下所示:

  • 一個未訪問連結的下劃線以藍色表示。
  • 一個訪問過的連結是下劃線以紫色表示。
  • 一個活動連結的下劃線以紅色表示。

但是,你可以使用 CSS 覆蓋它。詳細瞭解樣式連結

HTML 連結語法

使用 <a> 標記在 HTML 中指定連結。

連結或超連結可以是單詞,單片語或影象。

<a href="url">Text link</a>

源錨中的 href 屬性指定目標錨的地址。

<a href="http://www.tastones.com/">Tutorial Republic</a>
<a href="kites.jpg"><img src="kites-thumb.jpg" alt="kites"></a>
<a href="https://www.google.com/">Google Search</a>

連結的目標屬性

目標屬性告訴瀏覽器開啟連結文件的位置。有四個定義的目標。每個目標開始用下劃線(_): _blank_parent_self_top

<a href="http://www.tastones.com/" target="_top">Tutorial Republic</a>
<a href="sky.jpg" target="_self"><img src="sky-thumb.jpg" alt="Cloudy Sky"></a>
<a href="https://www.google.com/" target="_blank">Google</a>

建立書籤錨點

id 屬性用於以下列方式在網頁內建立書籤。

<a href="#balloons"><img src="balloons-thumb.jpg" alt="Balloons"></a>
<img src="balloons.jpg" alt="Hot Air Balloons" id="balloons">

name 屬性也可以通過以下方式實現相同的效果。

<a href="#ballons"><img src="balloons-thumb.jpg" alt="Balloons"></a>
<img src="balloons.jpg" alt="Hot Air Balloons" name="balloons">

注意: HTML5 標準建議使用 id 屬性而不是 name 屬性來指定錨點的名稱。

建立下載連結

放置可供下載的檔案的方式與放置文字連結完全相同,只需將目標 URL 指向你想要下載的檔案即可。

在這種情況下,它是一個名為 test.zip 的 Zip 檔案。

<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

注意: 單擊指向 PDF 檔案或影象檔案的連結不會導致它直接下載到你的硬碟驅動器。它只會在你的 Web 瀏覽器中開啟該檔案。此外,你可以將其儲存到你的硬碟驅動器。