HTML a href 連結屬性

HTML a href 簡單來說就是超連結的語法,我們在另一篇已經做過基本的介紹(參考:HTML 超連結),這篇我們就分成兩個部分,首先還是先提一下 a href 的語法與範例,接著寫幾個用 CSS 美化超連結的範例。

HTML a href 基本語法

<a href="要連結的 URL 放這裡" target="連結目標" title="連結替代文字">要顯示的連結文字或圖片放這裡</a>


以上語法中,a href 等號右邊用來放置要前往的連結網址(URL),target 是連結目標的意思,可以用來設定用何種方式前往連結,常見的有另開視窗(_blank)、直接於現在的視窗開起(_self)、開啟於父層框架(_parent)等,target 在 HTML a href 屬性中為非必要項目。

另外要顯示的連結文字或圖片的部分,放一般文字比較沒有問題,如果想要放圖片,可以參考此篇:img href 圖片連結

HTML a href 實做範例
<a href="http://www.wibibi.com" target="_blank" title="Wibibi 網頁設計教學百科">Wibibi 網頁設計教學百科</a>
呈現結果:Wibibi 網頁設計教學百科

用 CSS 替 a href 做一點美化

簡單的美化就用 CSStext-decoration 來移除連結底線,並將顏色改為紅色。
<a href="http://www.wibibi.com" target="_blank" style="text-decoration:none;color:red;">Wibibi 網頁設計教學百科</a>
呈現結果:Wibibi 網頁設計教學百科

範例中的 style 就是告訴瀏覽器要用 CSS 語法的意思,text-decoration:none 代表移除底線,color:red 就是設定為紅色。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C