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 語法
© Copyright webtech.tw Since 2010