搜尋
首頁web前端html教學網頁製作初學者:學用HTML的超連結A標籤_HTML/Xhtml_網頁製作


超級連結a標記代表一個連結點,是英文anchor(錨點)的簡寫。它的作用是把目前位置的文字或圖片連接到其他的頁面、文字或圖像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須了解其語法結構. 超級連結標記代表一個連結點,是英文anchor(錨點)的簡寫。它的作用是把目前位置的文字或圖片連接到其他的頁面、文字或圖像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須了解其語法結構。 標記的基本語法結構是:
class=type
id=value
href=reference
name=value
rel=same|next|parent| previous
rev=value
target=window
style=value
title=title
onclick=function
onmouseout=function
從標記的語法結構可以看出,在設定一個超級連結時有很多參數可供選擇,以實現不同的連結效果,這有點出乎意料吧? !   其中class和id選項:用來設定連結點所屬的類型和指派的ID號,通常不加以設定。最常用的兩個參數是href和name。其中href是hypertext reference的縮寫,用來設定連結位址。連結位址必須為url位址,如果沒有給予特定路徑,則預設路徑和目前頁的路徑相同。 連結到的文件也分為幾種情況:如果為HTML文件,則在當前瀏覽器中直接開啟;如果為可執行檔(.exe檔),則直接執行或下載,我們提供下載的文件就是用它的這種特性做的;如果為文字文件如word格式的文件,則在瀏覽器中開啟此文件,並可以進行編輯加工。
rel:表示設定連結的關係:rel=same表示待連結的文件與此文件相同,rel=next表示待連結的文件為下一頁,rel=parent表示本文件為待連結文件的父文件,rel=previous則表示待連結的文件為上一頁。
rev:則用於設定反向連結。
target:是在採用幀窗口的情況下設定連結到哪一個窗口,還有target="_bank"是表示新開一窗口打開網頁。
title:用來設定連結點被選到時顯示的標題。
onclick:對應於一個事件,當連結點被點擊後將觸發這個事件,執行對應的子程式。
onmouseover:與onclick類似,對應的事件在滑鼠移到連結點上時被觸發。
onmouseout:對應的事件在老鼠移出鎮接點後被觸發。
舉幾個例子:
回到首頁
播放語音檔案
執行對應的程式
開啟對應的文件進行加工
  應用技巧  
1、提供下載檔案
  有不少網友來信問,提供下載的效果怎麼做。實際上仍然是做一個超級鏈接,不過供下載的文件必須上傳到網站上。範例:有一個「網頁技巧」的檔案包供下載,檔案名稱是「homepagejq.zip」且已上傳到網站了,則這個連結的程式碼可以這樣寫:點擊這裡下載「網頁技巧」檔案包
  2、在新視窗中開啟連結的網頁
  設定「target」的值為「_blank」。例:新開視窗開啟網頁「aboutme.htm」。產生該效果的代碼是:
關於我......
  3、滑鼠移到鏈接,顯示一行說明文字
  設定「title」參數值,即可獲得這種效果。例:當滑鼠移到「腳本之家」這個連結上時,顯示說明「這是一個介紹
網頁製作
技巧的專業網站」。這個連結的程式碼是這樣的:網頁製作技巧的專業網站">腳本之家  4、滑鼠移到一個連結上彈出一個視窗
  這是設定onmouseover參數所獲得的效果。範例:當滑鼠移到一個連結上,彈出一個視窗並在視窗中顯示「滑鼠懸停效果示範!」。這個連結的程式碼是這樣的:連結
。用類似的方法可以製作當滑鼠按下後彈出提出示視窗、當滑鼠離開時彈出提示視窗的效果。   5、連結到本頁的指定內容
  要實現連結到本頁的某一部分內容上(也就是「檔案內跳轉」),必須用參數name指定連結點的名稱。選定一塊文本,可以用name參數為其命名,以備連結所用。所謂同一個文件內的跳躍是指當讀者在閱讀一個很長的文件的時候,若只對某部分的內容感興趣,可以採用跳躍式的閱讀方式。其基本格式為:
第二部第一部分內容......
..................... ....................
第二部實際內容......
..... ....................................
  這樣當你點擊“第二部分”這個超級連結後,就會自動轉移到「第二部分實際內容」這個地方。 「name」參數所定義的連結點名稱可以隨意取,但連結的「href」參數中的連結點名稱必須與其一致,不要忘記在前面加上「#」。
  6、連結到其它頁面的指定內容位置
  方法與上例類似,但在「href」參數中的連結點名稱前要加上網頁的檔案名稱。範例:有兩個網頁page1.htm和page2.htm ,每頁均有兩部分內容,現在要在page1.htm中製作一個超級鏈接,按下該鏈接後將轉到page2.htm的第二部分內容上。那我們可以這麼做,先在page2.htm第二部分內容開始的地方寫這樣一句程式碼:;在page1.htm中寫上這樣一個連結程式碼:page2 的第二部分內容
  7、連結到E_mail
  點擊一個超級連結後,將啟動客戶機上的電子郵件管理軟體給你寫信。例這行程式碼:請寫信給我。一旦你點擊了“請給我寫信”這個鏈接,將自動啟動電子郵件管理軟體(如OE)的寫信功能,並已把郵件地址加在了收信人的地址欄裡了。
  連結不僅可以以文字作載體,也可以以圖像作載體,而且可以以圖片的某一部分作載體,且都能實現上述這些效果,方法也相同,所不同只是載體,也就是連結的兩對方括號中間的部分,所以不再另舉例了。
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML的未來:進化和趨勢HTML的未來:進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容,提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性,滿足用戶需求。 3)模塊化將支持組件化開發,提高代碼復用性。

為什麼HTML屬性對Web開發很重要?為什麼HTML屬性對Web開發很重要?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior,外觀和功能

Alt屬性的目的是什麼?為什麼重要?Alt屬性的目的是什麼?為什麼重要?May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分,用於提供圖片的替代文本。 1.當圖片無法加載時,alt屬性中的文本會顯示,提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本,提高網頁的SEO排名。

HTML,CSS和JavaScript:示例和實際應用HTML,CSS和JavaScript:示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是:1.HTML用於構建網頁結構;2.CSS用於美化網頁外觀;3.JavaScript用於實現動態交互。通過標籤、樣式和腳本,這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性?為什麼這很重要?如何在標籤上設置lang屬性?為什麼這很重要?May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性,如。 2)在多語言內容中,為不同語言部分設置lang屬性,如。 3)使用符合ISO639-1標準的語言代碼,如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼?HTML屬性的目的是什麼?May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior,外觀和互動,使網站互動,響應式,visalalyAppealing.AttributesLikutesLikeSlikEslikesrc,href,href,href,類,類型,類型,和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表?您如何在HTML中創建列表?May 06, 2025 am 12:01 AM

toCreateAlistInHtml,useforforunordedlistsandfororderedlists:1)forunorderedlists,wrapitemsinanduseforeachItem,RenderingeringAsabulletedList.2)fororderedlists,useandfornumberedlists,useandfornumberedlists,casundfornumberedlists,casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動:網站結構的示例HTML行動:網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器