HTML原始碼,超連結分為三個重要部份

1. 一般的超連結

2. 有指向指定框架目標的超連結

3. 指向錨點的超連結

以下一一介紹


1.一般的超連結

超連結的語法如下:

<a href = " 網址 "> 連結文字 </a>

實際範例:

<a href="http://dictionary.yahoo.com.tw">YAHOO奇摩字典</a>


輸出結果 --> YAHOO奇摩字典


2.有指向目標框架的超連結

此超連結的語法如下

<a href="網址" target="框架名稱">連結文字</a>


不過目前我們現在沒有框架可以作示範

所以用其他方式代替解說

例如:

<a href="http://www.pchome.com.tw" target="apple"> PCHOME </a>

輸出結果 --> PCHOME 

你去按按那個輸出結果,會發現其實沒有什麼不一樣,只是多跳出一個視窗

但是,按第一次之後,不要把視窗關掉

再按一次那個連結

你會發現,網頁又會在剛才跳出的同一個視窗開啟

為什麼?

原因是

因為我們的 target (目標框架) 設定為 apple

但是我們目前並沒有開啟任何 名為 apple 的框架

所以,瀏覽器會乾脆直接新開一個視窗,然後把他的名稱設定為 apple

然後,若是你沒有關閉那個視窗,那個名為apple的視窗就還留著

下次再按那個連結,瀏覽器就能夠找到 apple這個框架 -- 也就是你剛才開的視窗!!

並且在那個視窗開啟你的網頁!!




實際的用法是


如果你有一組框架網頁



然後,你的超連結都放在 menu 這個框架

你想要在 menu 框架按連結之後,把所有連結的網頁都顯示在 mainpage框架

那麼,你在menu框架的所有超連結應該設成

<a href="網址" target="mainpage"> 連結的字串 </a>




當然,target 除了指定連結到特定框架以外

還有一些預設的功能

如: _blank  _parent  _new  _self

舉幾個例子,你就能夠知道他們的功用

<a href="http://tw.yahoo.com" target=_blank>開啟於全新頁面</a>
-->開啟於全新頁面 
(每次按都有不同的新視窗)


<a href="http://tw.yahoo.com" target=_new>開啟於空白頁面</a>
-->開啟於空白頁面
(第一次次按會有新視窗,之後每次按都會跑到同一個視窗)


<a href="http://tw.yahoo.com" target=_self>開啟於自己框架頁面</a>
-->開啟於自己框架頁面
(和一般的超連結差不多,但是這個可以確保將連結到目前使用中的框架)


<a href="http://tw.yahoo.com" target=_self>開啟於父框架</a>
-->開啟於父框架
(網頁必須在框架中才派得上用場)

例如你的連結在mainpage框架中
用_self,目標會連結到mainpage框架(也就是自己)
用_blank,目標會連結到新視窗,而且每點一次就多開一個視窗
用_new,目標會連結到新視窗,但是無論點幾次都是顯示在那個視窗
用_parent,目標會顯示在整個框架頁。(蓋掉banner、menu、mainpage!!)



3. 指向錨點的超連結

 

設定瞄點,就是在網頁上的某一列 插一根旗子

然後,你點一個超連結,就可以直接跳到插旗子的那一列

這樣在瀏覽上會很方便


因此,要做出這樣的功能,我們需要

1. 設定瞄點  2. 指向瞄點的超連結


設定瞄點的方法

例如你要設定一個名字叫做 Hello 的瞄點 ( 也就是你插一根叫做Hello的旗子 )

就使用下列語法

<a name="Hello"> </a>

於是你下這指令的那一列就被插了一根旗子 作為記號


然後,我們的超連結要怎麼樣連到這一列呢?


語法是這樣的

<a href="網址 # 瞄點名稱 "> 連結文字 </a>



這樣看或許還是很難懂,舉一個實際的例子

我在這邊設定一個叫做Go的瞄點

<a name="Go"></a>
我是瞄點!!這一行設了一個叫做Go的瞄點

然後,本頁的網址是http://blog.pixnet.net/finalfrank/post/9752428

所以跳到瞄點寫成以下

<a href="http://blog.pixnet.net/finalfrank/post/9752428#Go">跳到瞄點</a>





結果如下↓












跳到瞄點


創作者介紹

Frank's 資訊科技潮流站

finalfrank 發表在 痞客邦 PIXNET 留言(12) 人氣()


留言列表 (12)

發表留言
  • mepo999
  • 一般連結連到圖片都只能連一張
    那如果想要在連結中加入"多張圖片"要如何設定呢?
    呈現的感覺就像是點入文字連結後,跳出彈出式視窗,能點選兩邊箭頭看下一張圖片的感覺。請問要怎麼做?謝謝
  • Fuck
  • fuck
  • 91s
  • 請問版主 如果我想把一個賣場的網站放在左邊欄位 呈現出像粉絲團一樣有圖片連結方式顯示,要怎麼設定呢?

    因為我找好久都只能顯示文字與網址的連結而已

    謝謝
找更多相關文章與討論