|
【類別】:網路資源 → 網頁*教學 |
線上諮詢 |
23040人觀看 |
|
回 網頁*教學 |
|
|
連結標籤 |
|
|
∼標籤語法∼
<a href="路徑/檔名">超連結文字或圖片</a>
<a href="http://www.math.ncu.edu.tw/~wukl/Welcome.html">文字</a>
「超連結」是 HTML 的一大特色。一個超連結的文字會像這樣, 相信各位一定常見到。
超連結的語法非常簡單,只要在欲作為連結的文字或圖片前後加上 <a href="路徑/檔名">及</a>即可。
在圖片標籤中已經提過絕對路徑和相對路徑,這裡就不多說了。欲知有關路徑的解說詳情,請按此處。
連結也可以使用圖片的,只要在 <a> 到 </a> 之間使用 <img> 標籤插入圖片即可。
例如:<a href="網址"><img src="圖片檔名"></a>
其實連結的方式還有很多,下面介紹一些常用的用法。
內部連結的應用
<a href="HTML檔#錨點">
現在按下這裡,然後再按「上一頁」回到本頁。 您會發現當您按下方才的超連結時,整個畫面不但連結到「內部連結」小單元,而且是在該頁 <錨點三>的地方。
其實每一頁之間的超連結不儘可以連結到該頁,甚至還可以用「內部連結」的方式指定畫面到該頁的某一部分, 這對於擁有許多很長的頁面的站台有很大的幫助。
視窗分割的超連結
<a href="HTML檔" target="視窗名稱">
某些網站就是使用視窗分割超連結。 點選左邊選單的連結,就會把連結顯示在右邊的畫面上。 這也不難,只要加入 target="視窗名稱" 即可。視窗名稱參照「視窗分割」一單元(就是 name 之後的名稱)。
http://
連結到WWW的網站。可說是最常用的一種,可以連到其它網頁,檔案,圖片...等。
範例:<a href="http://www.socialwork.com.hk/">連線到青少年工作資源中心</a>就會變成:連線到青少年工作資源中心
那你只要按一下,就可以到 青少年工作資源中心 的網站了。同樣的,你也可以連結網路上任何一個檔案。
ftp://
連結到FTP的站台。簽入ftp系統,主要以連結檔案供人下載為主要功能。
<a href="ftp://ftp.tku.edu.tw">
(到淡江大學的FTP主機)
mailto:
連結到一個 E-mail。連結email,可呼叫郵件編譯器,且自動將email填入收件人位置。
語法很簡單:<a href="mailto:信箱位址"> ,只要將「信箱位址」改成欲連結的信箱即可。不過記住,mailto中間沒有空隔, 勿打成 mail to。範例:電郵給網主。
當您按下上面那一行字後,電腦會自動開啟郵件編輯軟體,在「收件者」上已輸入了 [email protected] 等字,這就是電子郵件的超連結。這種超連結可以用來作為站主和站友的互動, 是個很好用的超連結。
telnet:
簽入telnet系統,主要以連結bbs為主。
<a href="telnet:bbs.ntu.edu.tw">
(到台大電算中心的BBS)
連結的參數不多,常用的只有target(指向目標),這參數在框架標籤中格外重要。常用的有兩種:
target="框架名稱":
當我們在框架中使用連結標籤,想把A框架中的連結效果,呈現在B框架中時,在A框架的連結標籤中就要加入target="B"。
target="main":
將連結的目標以新的一頁開啟。
其它連結設定
<a href="連結位址">
現在的瀏覽器都很聰明,只要輸入位址,就會自動判斷如何開啟。以下舉一些例子:
<a href="gopher://gopher.csie.nctu.edu.tw">
(到交大資工系的Gopher系統)
<a href="news:news.csie.ntu.edu.tw">
(讀取台大資訊新聞群組)
下面還有幾個特殊用法,可以增加連結的變化性:
STYLE="text-decoration: none"
加入這段可去除連結線。
onMouseOver="window.status="說明內容";return true;" onMouseOut="window.status=" ";"
可使狀態列出現連結說明。
∼標籤範例∼
<a href="http://www.math.ncu.edu.tw/~wukl">我的網頁</a> 我的網頁
<a href="ftp://math.ncu.edu.tw">數學系FTP</a> 數學系FTP
下面這段是CSS語法,要加在<head>與</head>之間,可使連結在點選時變色以及去除連結線。
<style type="text/css">
<!-- A:link {font:12pt 細明體} -->
<!-- A:active {text-decoration:none} A:hover {color:rgb(256,128,64);text-decoration:none} -->
</style> |
|
|
※小叮嚀:投稿或引述文章內容請記得註明出處,以示尊重其著作財產權利,倘有疏漏之處也歡迎來信指教,謝謝。
|
|
|
投稿信箱 |
補充意見 |
|
|
門店升級雲端服務 →全門市 電子e化無紙作業系統← 適合*通訊行*醫美診所*實體門市 |
https://test.fixs3c.com
|
[推薦評價好店]-
4C快修連鎖門市
專業維修買賣 - 筆電 + 手機 + 電腦 + Iphone + Ipad
新北汐止店
(02) 7751-9182
新北市汐止區福德一路86巷22號
汐止修手機.汐止修iphone.汐止修ipad.汐止修筆電.汐止修電腦
新北板橋店
(02) 8257-3990
新北市板橋區四維路137巷10號
板橋修手機.板橋修iphone.板橋修ipad.板橋修筆電.板橋修電腦
桃園大溪店
(03) 387-4353
桃園市大溪區中華路210號
大溪修手機.大溪修iphone.大溪修ipad.大溪修筆電.大溪修電腦
台中市區店
(04) 2201-1289
台中市南區台中路140號
台中修手機.台中修iphone.台中修ipad.台中修筆電.台中修電腦
|
|
王師父專業牆壁切孔鑽孔引孔工程服務
牆壁鑽孔切割,牆面引孔鑽孔,地板鑽孔切割
台北鑽孔切割
三重鑽孔切割
新莊鑽孔切割
板橋鑽孔切割 |
|