WEBTECH 網頁設計教學站
HTML a href 超連結
HTML a href 超連結是網頁設計非常重要的一個元素,透過 a href 的超連結功能,才能創造出整個網際網路串連在一起的網,也是搜尋引擎 spider 索引資料的尋找過程中非常重要的路徑,所有的瀏覽器都支援 a href 超連結的功能,這算是最基本 HTML 網頁設計基礎的一環,剛開始學習網頁設計的朋友,可能會透過一些網頁設計軟體如 Dreamweaver、Google Web Designer 這些好用的所見即所得設計軟體來做,其中會有製作超連結的功能,只要切換到原始碼,就可以看到超連結原來是透過 a href 的語法來完成的。

然而 a href 超連結有許多種不同的特性,我們可以透過修改 href 內容來改變連結的目的網址,也可以透過 target 的目標設定,來修改超連結是要直接開啟或是在新的瀏覽器頁面開啟,先來看看這個 a href 的語法規則。

HTML a href 超連結語法規則
<a href="連結網址" target="連結目標" title="替代文字">顯示內容</a>
HTML a href 超連結標籤內常用到的三個功能分別是 href、target 以及 title,其中 href 用來標示超連結要連到哪個網址,target 用來標示連結的目標,也就是要不要用新頁面開啟,這三項是比較常用到的連結目標。
  • target="_blank" - 意思是在新視窗開啟
  • target="_self" - 意思是在原本的視窗開啟
  • target="_parent" - 意思是在父層視窗開啟
title 是用來顯示替代文字用的,一般來說 title 盡量與顯示內容相同。

HTML a href 超連結範例
<a href="http://www.webtech.tw/" title="WebTech 網頁設計教學站">WebTech 網頁設計教學站</a><br>
<a href="http://www.webtech.tw/" target="_self">WebTech 網頁設計教學站</a><br>
<a href="http://www.webtech.tw/" target="_blank">WebTech 網頁設計教學站</a>
範例的效果範例總共準備了三個同樣的 a href 超連結,不過設定上有一點點的差別,只有第一條超連結有使用 title 的功能,接著第二條超連結使用了在原本視窗開起的目標設定(target="_self"),這其實與第一條超連結是一樣的效果,因為超連結預設是就是從本來的視窗直接連結過去目標網址,第三條超連結就使用了在新視窗開起的目標設定(target=""_blank)。

目標設定 target 還有一個 _parent 怎麼沒有在範例中呢?其實 target="_blank" 比較常用在框架網頁中,用來決定框架內的超連結要怎麼開啟,網站的框架是透過 iframe 來設計,請參考這篇:HTML iframe 框架語法

更多 HTML 語法

連絡我們