HTML – 連結有幾種

就像斯斯一樣,大體而言,連結主要有兩種,一個對外,一個對內;但是這樣的說法,實在不太精確,這篇文章,要詳細的介紹在HTML當中與連結有關的標籤。

最常使用的連結語法,大概就是<a>標籤了,他的功能,就像是港口鑰一樣(請見哈利波特),可以讓使用者從A跳到B,也是這樣的連結屬性,讓網路文件可以有互動性連結效果,也是它與傳統出版文件最不同的地方。<a>標籤,除了常用的href、target、title、id、name等屬性之外,還有一些有趣的屬性,可以讓網頁聯結在使用上更加的便利,看看W3C當中是怎麼介紹<a>標籤的屬性吧!

charset
設定指定連結來源的編碼
type
這個屬性提供了隱藏的目標連結文件資訊,這讓使用者可以有個可靠的資訊來判斷這個連結是否是他們需要的,而不是取得所有的連結內容之後才發現原來他們的瀏覽器並不支援。常用的MIME種類有:text/html、image/png、image/gif、video/mpeg、text/css、以及audio/basic,更多的MIME類型,煩請參考MIME Media Types文件的相關說明
name/id
id必須要是唯一而且不可重複,但是name並沒有這樣的限制,不過如果你要把name用來當成錨點依據的話,還是得注意它的唯一性,不然電腦會找不到是哪一個,這兩者的命名空間/有效範圍,同樣都是文件本身,為了避免麻煩出現,id與name如果位於不同標籤當中,請不要使用重覆的名稱,而且要注意,名稱不分大小寫,因此AAA與aaa對瀏覽器而言,是同樣的名稱,這一點請務必要留意。
有的人會有疑問,既然兩者的差異不大,又該如何判斷何時需要使用id,何時又該使用name的屬性呢?W3C提供了一個很好的判斷依據:

  • id屬性可以用於更廣泛的地方,例如樣式表、驗證處理等
  • 較早期的瀏覽器不支援id屬性,只支援name屬性
  • name屬性允許更為豐富的命名方式,例如:Dürst(不過我幹嘛要打這麼麻煩的名字啦!>”<a)
href
連結路徑或是目標名稱
hreflang
連結目標的語言
rel
就是relationship的簡寫,指得是連結目標與本份文間之間的關係型態,在W3C當中,有列舉出所有的關係型態,其中相當常用的,大概就是Stylesheet的樣式表型態。你可以使用多個關係型態,當中以半形空白隔開,例如:rel=”alternate stylesheet”,下面列出來的,就是W3C所提供的型態列表:
Alternate
用來作為替代頁面用,通常會和lang(語言屬性)或是media(媒體屬性)一起使用。當和語言屬性一起使用的時候,其實就是多國語言的轉換;而當和媒體屬性一起使用的時候,就可以應用在友善列印等地方
Stylesheet
樣式表。用以連結外部樣式表,往往會與Alternate搭配一同使用
Start
參照文件的開頭,這個連結型態將會告訴搜尋引擎哪個檔案才是作者設定要作為開頭
Next
當文件是屬於線性文件的時候,例如教學文件等具備一貫性的網頁,指定下一頁的文件,可以讓使用者的流覽器選擇是否要預先載入文件,能夠有效減少使用者感覺上loading時間
Prev
指定線性文件當中的前一頁,可建立文件的順序性,部分瀏覽器也支援使用「Previous」來替代Prev
Contents
參照網頁內容的說明,部分瀏覽器也可以使用「ToC」(意指Tabel to Content)
Index
提供當前文件的索引內容
Glossary
提供當前文件的詞彙資料
Copyright
提供當前文件的版權宣告
Chapter
指定當前文件所屬的章
Section
指定當前文件所屬的節
Subsection
指定當前文件的節錄內容
Appendix
指定當前文件相關的附錄與參考資料
Help
指定協助文件,包括更多訊息,或是連結到其他相關的資料來源網站
Bookmark
指定書籤資訊
rev
這是反向連結,rev代表的就是reverse link,下面兩行語法,其實有著同樣的意義:

  • Document A: <LINK href="docB" mce_href="docB" rel="Help">
  • Document B: <LINK href="docA" mce_href="docA" rev="Help">
accesskey
存取鍵,其實就是設定快捷鍵啦!通常我們會使用一個英文字母作為這項屬性的值,一般來說,下列幾種標籤都可以使用快捷鍵設定:A、AREA、BUTTON、INPUT、LABEL、LEGEND、和TEXTAREA
shape/coords
用在影像地圖的屬性,shape指的是形狀,有default(全部的影像)、rect(矩形)、circle(圓形)、poly(多邊形)等四種型態;coords指的則是座標coordinates,這個屬性指定了連結感應區的形狀以及位置,以下有幾個不同的設定方式,根據你的shape而定:

  • 矩形: left-x、top-y、right-x、bottom-y
  • 圓形: center-x、center-y、radius(注意:當半徑值使用百分比的時候,使用者的瀏覽器將會以連結物件的寬度及高度作為計算半徑的依據,因為半徑的長度不應該比影像本身還要大 )
  • 多邊形:x1, y1, x2, y2, …, xN, yN。(第一組xy座標,還有最後一組xy座標必須要一致,才能夠將多邊形區塊封閉起來,如果兩個座標不一致,瀏覽器將會自動加上最後一個座標組來封閉整個多邊形區塊)
target
指定連結目標的開啟方式,如果搭配name的屬性來使用,就可以指定要將文件開在什麼名稱的視窗或是頁框當中,如果不給它命名,當然就是一直給它開新視窗囉~注意:在這裡要特別提醒網頁設計者,設計網站的時候,盡量減少使用頁框效果,因為頁框會造成許多瀏覽上的問題,例如無法正確將頁面加入書籤、或是無法正確返回上一頁…等問題
class
這個屬性,指定了標籤所屬的類別,如果要使用多個類別,中間要用半形空白隔開
title
善加使用title屬性,可以提供使用者關於此連結的相關說明及資訊,如果使用在外部連結樣式表,則可以提供瀏覽器更多關於樣式表的說明,讓使用者可以清楚明瞭的知道樣式表的功能或是特性
tabindex
有沒有用過tab鍵切換表單內容的經驗,有時候在填寫表單的時候,用tab鍵切換還真是一件再方便不過的事情了,但是要如何決定tab鍵切換的順序?就要仰賴tabindex的屬性了!
這個屬性的值只能使用介於0到32767的正整數,如果你給他寫成01234,瀏覽器將會忽略掉前面的零。tab鍵切換的規則如下:

  1. 以支援tabindex屬性並且值為正確數值的標籤為優先,數字最小的元素最優先切換到,並且依照數字大小順序切換;如果數字都一樣,那就是根據排列的順序來切換。
  2. 如果是那些不支援tabindex屬性的標籤,或是那些支援tabindex的屬性,但是tabindex屬性值卻是0的標籤元素,原則上,就是按照出現的順序來切換。
  3. 如果那個元素屬性是設定為disabled,那就不會切換過去。

接著,下面針對link type來做一下範例的補充。

在<head>之間加入<link>的語法,最常用的應該就是外部連結的CSS樣式表,這個就懶得示範了,不過除了連結外部樣式表之外,<link>還有一些其他的用途喔!比如說,有的時候雖然網頁內容已經可以有提供連結的地方,但作者可能會想要在文件當中加入更多的資訊,舉個例來說,假設你現在的所在頁面是Chapert5,你就可以使用<link>語法來加入前後頁的資訊:

<head>
...其他有的沒的內容...
<title>Chapter 5</title>
<link rel="prev" href="chapter4.html">
<link rel="next" href="chapter6.html">

這些東西,並不會成為網頁內容的一部份,即便有些瀏覽器會以不同的方式來讀取這樣的資訊;雖然它們看起來沒有什麼作用,不過有時還是會以有趣的方式讀取出來唷!比如說當使用者要把網頁各個章節列印出來的時候,它就可以根據這些隱藏在head裡面的資訊,來做為列印的參考以及依據。通常來講,作者可以使用<link>來提供搜尋引擎下列資訊:

  • 其他語言版本的頁面連結
  • 其他媒體/瀏覽工具的頁面連結
  • 起始頁面連結

下面這個例子,介紹了如何使用<link>來告訴搜尋引擎,要去哪裡找德文版或是法文版的網頁內容,請特別注意,在阿拉伯文版的部份,有設定語言編碼;並且在法文版的部份,由於title的值是法文,所以還有特別指定lang的屬性文法文,至於hreflang,指的當然就是你要連結的頁面語系囉!

<head>
<title>繁體中文頁面</title>
<link title="德文版"
type="text/html"
rel="alternate"
hreflang="nl"
href="/manual/dutch.html">

<link title="葡萄牙文版"
type="text/html"
rel="alternate"
hreflang="pt"
href="/manual/portuguese.html">

<link title="阿拉伯文版-給阿拉丁看"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="/manual/arabic.html">
<link lang="fr" title="La documentation en Français"
type="text/html"
rel="alternate"
hreflang="fr"
href="/manual/french.html">
</head>

再看另外一個例子,這個例子,示範了如何利用<link>來告訴搜尋引擎要到哪裡去找印表機要的列印版本:

<head>
<title>Reference manual</title>
<link media="print" title="The manual in postscript"
type="application/postscript"
rel="alternate"
href="http://someplace.com/manual/postscript.ps">
</head>
;

第三個例子,則是告訴你如何使用<link>來告訴搜尋引擎哪個網頁是第一頁:

<head>
<title>Reference manual -- Page 5</title>
<link rel="Start" title="The first page of the manual"
type="text/html"
href="http://someplace.com/manual/start.html">
</head>

連結的另外一個功能,就是可以告訴瀏覽器什麼樣的媒體類型該使用什麼樣的文件,這是為了讓網頁資訊在不同平台上能夠依照媒體屬性來呈現不同的樣式或是內容;比方說,你就不會希望列印的時候,還必須印一大堆無關緊要的廣告或是裝飾按鈕來浪費昂貴的墨水,利用指定media的內容,我們就可以讓不同平台也可以瀏覽到最佳的網頁內容,下面就是media的使用範例:

<link rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<link rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<link rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<link rel="stylesheet" href="techreport.css" type="text/css">

目前W3C所定義的media類型,有下面幾種:

screen
螢幕,一般網頁都是使用這個吧!
tty
通常是用於顯示範圍固定且無法更動的瀏覽工具,例如電話、終端機、或是行動通訊設備,它們通常能夠顯示的範圍相當有限。
tv
電視,這種顯示器的特色是低解析度、色彩、以及不能隨意捲動
projection
放映機
handheld
手持設備,特色是小螢幕、單色、點陣圖、頻寬小(所以沒事不要放會增加loading的東西)
print
列印設備,不透明材質,並且以文件預覽方式在螢幕上面呈現
braille
盲人點字設備(這太難了,我沒有用過,所以無法詳細說明)
aural
聲音瀏覽器,也就是用「說」的瀏覽器
all
用於所有的媒體設備

好累,這篇文章怎麼長得跟鬼似的,又不是要寫論文報告。

因為這篇文章主要是要介紹連結的型態,因此有些東西礙於篇幅並不在此介紹,深入了解連結的使用方法,才能夠讓網頁產生正確且最具結構化的互動,當然,你也不需要矯枉過正,把上面所寫的每樣東西通通給他用上去,那也太累了!標準化的意義不是為了製造麻煩,而是在創造更便利且沒有障礙的網路空間,永遠把使用者的感受考慮在內,才能夠設計出真正實用的網站。

One thought on “HTML – 連結有幾種

  1. 在網頁上搜尋CSS相關資訊時找到了這篇文章,這是我看過對於HTML連結寫的最詳細的中文文章,作者對HTML的了解真的是頗有深度,這篇一定要收藏起來的啦!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s