2008/10/30

A(Anchor)

此元件應該算是 超文字標記語言(HTML: Hyper Text Markup Language)中,最重要的元件。就作者記憶所及,之前並無類似功能,可以將 分散的文件連結在一起。古時候,要參考其它文件時,完全必須人工作業, 很累人的。有了 超連結功能,只要用滑鼠輕輕點擊 就能參考相關文件。從此,人類的生活方式發生了巨大的改變。如果沒有此元件,則 HTML 和一般的 排版語言無多大差別。

屬性說明
ACCESSKEY | TABINDEX | ONBLUR | ONFOCUS | CHARSET | COORDS | HREF | HREFLANG | NAME | REL | REV | SHAPE | TARGET | TYPE
通用屬性

此元件可以使用通用屬性,請參考通用屬性的說明。


ACCESSKEY
TABINDEX

請參考屬性與事件


ONBLUR
ONFOCUS

請參考屬性與事件


CHARSET

被連結資源的文字編碼。例如 big5,UTF-8 等等。請參考文字編碼符號


COORDS

用來定義用戶端的 圖像的地圖,用戶可用滑鼠點擊 影像地圖的不同區域,啟動不同服務。請參考屬性 SHAPE 的說明。


HREF

指定被連結資源的 格式的資源識別名(URI:Uniform Resource Identifier),一般稱為網址。URI 可以指到網頁,圖形,短片等等。

  • 範例:

    <p>連到本站網頁:<a href="html.html">HTML 字母簡表</a>
    <p>連到其他網站,要用到『http://』:
      <a href="http://google.com">搜索引擎</a>
    <p>連到 ftp 站,要用到『ftp://』:
      <a href="ftp://ftp.ntu.edu.tw">台大檔案庫</a>
    <p>連到 news 站,要用到『news://』:
      <a href="news://news.seed.net.tw">討論區</a>
    <p>要寄信,要用到『mailto:』:
      <a href="mailto:who@yahcc.com.tw">歡迎來信</a>
    <p>連到 BBS 站,要用到『telnet://』:
      <a href="telnet://bbs.badcow.com.tw">不良牛</a>

  • 執行結果:

    連到本站網頁:HTML 字母簡表

    連到其他網站,要用到『http://』: 搜索引擎

    連到 ftp 站,要用到『ftp://』: 台大檔案庫

    連到 news 站,要用到『news://』: 討論區

    要寄信,要用到『mailto:』: 歡迎來信

    連到 BBS 站,要用到『telnet://』: 不良牛

HREFLANG

被連結資源所使用的 語言標籤。例如 zh 為中文,ja 為日文。請參考rfc-1766


NAME

ID 與 NAME 的第一個字必須是 A-Z 或 a-z。第二個字與其後的字可是 字母 (A-Za-z), 數字 (0-9), 連字號 『 - 』, 底線 『 _ 』, 冒號 『 : 』, 及逗點 『 . 』. 大小寫字母 是不同。

當網頁很長時,可在網頁的 多個段落標題處,設定錨及 錨的名稱。當超連結進入 此網頁時,可以指定 錨的名稱,將 錨的段落,作為 顯示的起點。網址會加上 #錨的名稱。

你也可以直接使用任何元件的 ID,作為錨。這個方法用起來比較便利。

  • 範例:

    設定錨及錨名稱。
    <a name='anchor1'>下錨處</a><br />
    請在其他 網頁或同一網頁 遠處,選用錨。
    此處為範例所以放在一起。<br />
    <a href="#anchor1">跳至下錨處</a>。
    網址會加上 #anchor1。

  • 執行結果:

    設定錨及錨名稱。 下錨處
    請在其他 網頁或同一網頁 遠處,選用錨。 此處為範例所以放在一起。
    跳至下錨處。 網址會加上 #anchor1。


REL

向前連結至下一個網頁,連結的型態。可用的型態有:

  • Alternate 指定文件的其它版本。結合 LANG 可指定不同語言版本。
  • StyleSheet 指定外在的風格表。
  • Start 指定文件集中的第一分文件。
  • Next 指定閱讀順序的下一份文件。瀏覽器可預先將下一份文件載入,如此可增加讀的順暢。
  • Prev 指定閱讀順序的前一份文件。
  • Contents 指定文件內容的表格。
  • Index 給文件一個索引。
  • Glossary 指定文件的字彙表。
  • Copyright 指定文件的著作權資訊。
  • Chapter 指定文件為一文件集的章。
  • Section 指定文件為一文件集的節。
  • Subsection 指定文件為一文件集的小節。
  • Appendix 指定文件為一文件集的附錄。
  • Help 指定協助文件。
  • Bookmark 參考與關鍵字有關的文件。

REV

反向連結至上一個網頁,連結的型態。可用的型態請參考 rel 元件。


SHAPE

用來定義用戶端的 圖像的地圖,用戶可用滑鼠點擊 影像地圖的不同區域,啟動不同服務。下面的範例只有在 Firefox 成功運作,建議改用 AREA

  • 範例:

    <map name='test1'>
    <a shape='rect' coords='0, 0, 100, 100'
      href='javascript:alert("綠色")'>1</a>
    <a shape='rect' coords='100, 0, 200, 100'
      href='javascript:alert("白色")'>2</a>
    <a shape='rect' coords='0, 100, 100, 200'
      href='javascript:alert("黃色")'>3</a>
    <a shape='rect' coords='100, 100, 200, 200'
      href='javascript:alert("藍色")'>4</a>
    </map><br />
    <img usemap='#test1' alt='分為四區可點擊'
      style="width:200px; height:200px"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXecGreDjswocAY_ZZCI48qSK4ZgwSNCwfcbNhGwkn0xwZBFd7C6lUFMHWoQ__AlMAlYUWcGq5gJdCuzZXtmyDbz65lmvwH4NzhVSt817LGKUQAcEnkIPE6DHwsq6U9RBNTU_UajsHtk/s200/shape.jpg" />
    請點擊

  • 執行結果:

    1 2 3 4
    分為四區可點擊 請點擊


TARGET
指定框架(frame)名稱,將超連接網頁 展現於其中。如果指定的框架名稱 不存在,則網頁 會展現在一個新的 視窗中。也可設定為 系統內定的名稱:
  1. _blank:開一個新的視窗,然後將連結的網頁,展現在新的視窗。
  2. _self:將連結的網頁,展現在當下的框架中。
  3. _parent:將連結的網頁,展現在父框架組(frameset)中。
  4. _top:將連結的網頁,展現在無框架的視窗中。
  • 範例:

    <a href= "http://ant4html.blogspot.com/2008/10/html.html"
      target='_blank'>顯示在新視窗</a>

  • 執行結果:

    顯示在新視窗


TYPE

內容的型態,又稱 MIME 媒體型態。例如 text/html, image/jpeg, audio/mpeg, text/css, text/javascript 等等。請參考 MIME 媒體型態



©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。