玩Web無窮(Enjoy Web Tech): HTML基礎教學(5)--超連結與錨點

我想大家應該都知道什麼是超連結了, 就是在一般網頁上的某些文章或圖片, 點了它之後會載入另一個網頁, 這東西就是超連結, 例如你在各搜尋網搜尋之後, 列出結果中的各項目第一行, 通常就是一個超連結, 讓你可以藉由點擊它來進入該項目的網頁中

那麼, 要如何在網頁中加入超連結呢, 那就是要用到 A 標籤

<A></A>

我們先來看一下簡單的超連結語法

<A HREF="點此超連結後要載入的網頁網址">此超連結所要顯示的文字</A>

利用 HREF 屬性指定要載入的網址(URL), 再於標籤內寫上顯示的文字即可
例如要在網頁上加一個超連結, 連到"玩Web無窮"來, 就可以寫

<A HREF="http://enjoywebtech.blogspot.com/">參觀玩Web無窮</A>

非常簡單吧 ^_^

那麼, 什麼是錨點呢? 如果你熟悉微軟的 Word 的話, 錨點就像是書籤一樣, 也就是它是在網頁內容中的一個定位點, 讓我們可以快速地將畫面捲動到該錨點位置
現在我們就來看看錨點的語法

<A NAME="錨點名稱">此錨點所要顯示的文字</A>

沒錯, 它也是利用 A 標籤, 只不過將 HREF 屬性換成 NAME 屬性, 並在 NAME 屬性設定一個錨點名稱, 名稱可以任意取, 但建議用英數字或底線這些字元, 然後錨點內不一定要用文字, 下面就是一個簡單的錨點範例

設定好了錨點後, 我們可以用以下的語法來加一個超連結, 設定點此超連結後將畫面捲到我們所加的錨點位置

<A HREF="#section_3">捲動到section 3</A>

一般的超連結, HREF 是設定要載入的網址, 這裡改成設定成【#】字號再加錨點名稱, 如此就可以了, 底下是一個範例

<A HREF="#section_3">捲動到section 3</A>
 
 
 
 
 
<A NAME="section_3">錨點所在(這裡不見得要有文字)</A>

其實說到底, 這裡的 HREF 還是在設定要載入的網址, 假設我們練習錨點的網址是
http://enjoywebtech.blogspot.com/test.html
當你點了[捲動到section 3]這個超連結時, 網址會變成是原來的網址後面再加上 #section_3, 也就是
http://enjoywebtech.blogspot.com/test.html#section_3
你可以自行在上次的範例裡, 再加上這些語法來玩玩

好了, 超連結與錨點就先簡單介紹到這邊, 還有一些跟超連結有關的東西, 我們之後再陸續一一介紹, 另外, 在之前 [HTML基礎教學(4)--幫網頁加上顏色(上)]一文中, 有提到可藉由設定 BODY 標籤的 LINK、ALINK、VLINK 等屬性, 來設定超連結的文字顏色, 上次的範例裡因還沒講到 A 標籤, 故未寫入範例裡, 現在你可以自行加入來試試效果, 以下是個範例

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFF00" text="#FF0000" link="#00FF00" alink="#0000FF" vlink="#007700">
123
<A href="http://enjoywebtech.blogspot.com/">參觀玩Web無窮</A>
</BODY>
</HTML>

--gs--
{HTML基礎教學}{什麼是網址}{什麼是 URL}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。

最新文章

追蹤我的朋友

HTML基礎教學(5)--超連結與錨點

3 意見:

張貼留言

搜尋此網誌

最新回應

文章分類

更多的文章在這裡