超連結可以說是網際網路的一大特色，英文本名為 HyperLink，網路本來就是連來連去的，只要透過簡單的 HTML 超連結，就可以輕鬆的連結其它的網頁，常見的超連結有網頁超連結、電子郵件超連結、FTP、telnet 等，各種超連結的用途並不一樣，不過網路一直進化到現在，已經有許多的變化了，像是電子郵件超連結漸漸少人使用，因為蒐集 E-Mail 的機器人實在是太多，另外 telnet 在早年也是相當熱門的，因為當時許多大學生都會上學校的 BBS（電子佈告欄系統），但現在 BBS 使用量已經不像以前這麼多（PTT 除外），而且要上 PTT 也可以使用類似 PCman 這樣的軟體，不過我們這篇介紹還是把這幾個超連結範例都提供一下，至於 telnet 就不寫了。

各式超連結種類語法

超連結種類	超連結語法	呈現結果
網頁超連結語法	<a href="連結網址">連結名稱</a>	連結名稱
電子郵件連結語法	<a href="mailto:電子郵件信箱">寄信給我</a>	寄信給我
FTP 超連結語法	<a href="FTP 的網址">FTP 名稱</a>	FTP 名稱

以上三個較為常用，請自行嘗試寫寫看，表格最後一欄的呈現結果使用的是所謂的＂假連結＂，也就是寫成「a href="#"」這樣，瀏覽器會自動判斷為假連結，通常用來預覽使用，並沒有真正的超連結效果。

網頁超連結語法範例範例呈現結果如在範例中還使用了『 target』叫做連結目標的屬性，寫成『 target="_blank"』代表要另外開新視窗，HTML 超連結有許多不同的連結目標，例如 _self、_parent ... 等，可以用來控制超連結的開啟行態，關於詳細的連結目標可以參考此篇：HTML a href 連結屬性。另外我們還在範例中使用了『title』來顯示替代文字，功能是當滑鼠移經超連結的時候會顯示的文字，因為有的時候設計師會幫超連結做一些美化，透過替代文字可以清楚的表示出超連結的位置，替代文字必須與連結目的地有絕對的相關。

推薦給您的相關主題

• HTML a href 連結屬性
• img href 圖片連結
• HTML 圖片插入或加入連結語法
• 用 CSS 設計當滑鼠移經超連結時才顯示底線
• 隱藏超連結底線
• 修改超連結顏色
• HTML base 標籤

您可能會想看

• HTML div 標籤
• 設計 HTML 圖片與圖片邊框間的距離
• DIV 區塊內文字與邊框的距離調整
• HTML TABLE 表格內的文字行高
• DIV 區塊內的文字行高設計
• 替 HTML button 按鈕增加背景圖片
• HTML img title 與 img alt 的差別
• 用 CSS 設計 HTML 表格欄位內文字靠下對齊
• 用 CSS 設計 HTML 表格欄位內文字靠上對齊
• HTML Table colspan 屬性

今日熱門文章

• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法
• PHP mysqli_set_charset 函式設定字符編碼

即時熱門文章

• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法
• PHP mysqli_set_charset 函式設定字符編碼