HTML 鏈接

HTML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。

HTML 鏈接

如何在HTML文檔中創(chuàng)建鏈接。

(可以在本頁底端找到更多實(shí)例)

HTML 超鏈接（鏈接）

HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。

超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>

在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。

默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

一個(gè)未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。

HTML 鏈接語法

鏈接的 HTML 代碼很簡(jiǎn)單。它類似這樣：:

href 屬性描述了鏈接的目標(biāo)。.

實(shí)例

<a >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到菜鳥教程的首頁。

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會(huì)在新窗口打開文檔：

實(shí)例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創(chuàng)建在一個(gè)HTML文檔書簽標(biāo)記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對(duì)于讀者來說是隱藏的。

實(shí)例

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個(gè)頁面創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

基本的注意事項(xiàng) - 有用的提示

注釋： 請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當(dāng)前頁面鏈接到指定位置

如何使用書簽

跳出框架

本例演示如何跳出框架，假如你的頁面被固定在框架之內(nèi)。

創(chuàng)建電子郵件鏈接

本例演示如何如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 2

本例演示更加復(fù)雜的郵件鏈接。

HTML 鏈接標(biāo)簽

標(biāo)簽	描述
<a>	定義一個(gè)超級(jí)鏈接

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

本內(nèi)鏈接

最后這些關(guān)于html的內(nèi)容有點(diǎn)查漏補(bǔ)缺的意思了，這一次是關(guān)于文本內(nèi)鏈接的使用方法，簡(jiǎn)單來說就是我們的頁面中有一個(gè)章節(jié)名稱目錄，如何點(diǎn)擊目錄中的名稱，就能正好在頁面中顯示相應(yīng)內(nèi)容。

如圖所示：

點(diǎn)擊目錄的"總體評(píng)價(jià)"跳轉(zhuǎn)到相應(yīng)內(nèi)容，如圖：

就是這樣的一個(gè)效果。在很多網(wǎng)頁中經(jīng)常看到。

這個(gè)案例我們會(huì)分三部分來講解。

今天主要學(xué)習(xí)如何使用<a>標(biāo)簽進(jìn)行頁面內(nèi)鏈接，已及從其他網(wǎng)頁鏈接該頁面內(nèi)的指定內(nèi)容。

這里會(huì)有一個(gè)問題，就是點(diǎn)擊鏈接后，文字內(nèi)容會(huì)置頂顯示，這個(gè)默認(rèn)形式會(huì)給我們帶來不便，解決方案較復(fù)雜，會(huì)在最后一次講解中給出。

下一次我們來學(xué)習(xí)如何對(duì)圖片添加映射超鏈接，映射超鏈接的意思是，假如我的圖片中有兩個(gè)人物或物象，考慮讀者會(huì)感興趣，想了解更多內(nèi)容，如何框選出物象邊緣來添加鏈接，這就是圖像映射超鏈接。如圖：使用一個(gè)平時(shí)不可見的邊框來制作圖片映射鏈接，確保感興趣的讀者能點(diǎn)擊到畫面中的目標(biāo)物體。

最后一部分我們將回答今天結(jié)尾的問題，也就是如何解決置頂問題。這一部分也會(huì)作為HTML部分結(jié)束的綜合練習(xí)，和css部分啟蒙的預(yù)熱練習(xí)。，

首先看一下今天的基礎(chǔ)代碼

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文內(nèi)鏈接</title>
  </head> 
  <body >
  <a>試飛進(jìn)程</a>
  <a>研制情況</a>
  <a>服役動(dòng)態(tài)</a>
  <a>總體評(píng)價(jià)</a>
  <p>
  <h2><a>試飛進(jìn)程</a></h2>
  殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測(cè)試，13時(shí)08分成功著陸，歷時(shí)18分鐘。<br>整個(gè)首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。2016年10月28日，首次發(fā)布"空軍試飛員將駕殲-20飛機(jī)亮相中國(guó)航展"后，還陸續(xù)發(fā)布了"殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)""空軍殲-20戰(zhàn)機(jī)首次開展海上方向?qū)崙?zhàn)化訓(xùn)練"等。
  <h2><a>研制情況</a></h2>
  在2016年11月1日，第十一屆珠海航展，殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開飛行，不僅在現(xiàn)場(chǎng)引起轟動(dòng)，也立刻被西方媒體大量報(bào)道。殲-20是中國(guó)現(xiàn)代空中力量的代表作，也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列，它是中國(guó)國(guó)防能力高速發(fā)展的一個(gè)象征。<br>2018年11月11日，第十二屆中國(guó)航展在珠海迎來"高光時(shí)刻"：殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉，震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>2019年10月13日，慶祝人民空軍成立70周年航空開放活動(dòng)新聞發(fā)布上，空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍"王牌部隊(duì)"
  <h2><a>服役動(dòng)態(tài)</a></h2>
  2017年3月9日，中央電視臺(tái)報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>2017年3月13日，《中國(guó)日?qǐng)?bào)》發(fā)布消息稱，中國(guó)自主研制的殲-20近期將裝配國(guó)產(chǎn)發(fā)動(dòng)機(jī)。<br>2017年7月30日，殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國(guó)人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來，3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<br>2017年9月28日，在中國(guó)國(guó)防部行記者會(huì)上，國(guó)防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>2017年11月10日上午，中國(guó)空軍發(fā)言人申進(jìn)科大校表示，殲-20 列裝部隊(duì)后，已經(jīng)開展編隊(duì)訓(xùn)練。<br>2018年2月9日，中國(guó)空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息，殲-20開始列裝空軍作戰(zhàn)部隊(duì)。<br>2018年10月30日，中國(guó)空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場(chǎng)上空。<br>2019年10月1日，殲-20現(xiàn)身慶祝中華人民共和國(guó)成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱；該三款殲擊機(jī)被譽(yù)為中國(guó)空軍殲擊機(jī)家族的"三劍客"，是未來聯(lián)合作戰(zhàn)的骨干力量
  <h2><a>總體評(píng)價(jià)</a></h2>
  殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)，這讓中國(guó)空軍在面對(duì)日本、韓國(guó)與印度等國(guó)家的空軍時(shí)占有顯著優(yōu)勢(shì)。外媒將殲-20與其他國(guó)家戰(zhàn)機(jī)進(jìn)行了對(duì)比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲，尚未正式交付入役；美國(guó)F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問題，大面積停飛，出口受阻；韓國(guó)KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況，后又傳出了合作方印尼打算撤資并已告知韓國(guó)的消息。因此，中國(guó)殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢(shì)戰(zhàn)機(jī)。<br>中國(guó)空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn)，成為有效塑造態(tài)勢(shì)、管控危機(jī)、遏制戰(zhàn)爭(zhēng)、打贏戰(zhàn)爭(zhēng)的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)，將進(jìn)一步提升空軍綜合作戰(zhàn)能力，有助于空軍更好的肩負(fù)起維護(hù)國(guó)家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>殲20是我國(guó)自主研制的第五代戰(zhàn)斗機(jī)，它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī)，是按照性能、技術(shù)和進(jìn)度要求，研制開發(fā)我國(guó)自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展，指通過自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢(shì)感知、信息對(duì)抗、協(xié)同作戰(zhàn)等多方面取得了突破，這是中國(guó)航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系，是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國(guó)重器的研制，我們建立了具有我國(guó)特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì)，是指通過型號(hào)研制，錘煉一支愛黨愛國(guó)的研制隊(duì)伍，這些擁有報(bào)國(guó)情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來，我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(fā)展征程上不斷前行。
  </p>
  </body> 
  </html>

看著復(fù)雜，實(shí)際上主要都是些內(nèi)容文字，簡(jiǎn)化后的代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文內(nèi)鏈接</title>
  </head> 
  <body >
  <a>試飛進(jìn)程</a>
  <a>研制情況</a>
  <a>服役動(dòng)態(tài)</a>
  <a>總體評(píng)價(jià)</a>
  <p>
  <h2><a>試飛進(jìn)程</a></h2>
    殲-20隱形........首次開展海上方向?qū)崙?zhàn)化訓(xùn)練"等。
  <h2><a>研制情況</a></h2>
    在2016年......"王牌部隊(duì)"
  <h2><a>服役動(dòng)態(tài)</a></h2>
    2骨干力量
  <h2><a>總體評(píng)價(jià)</a></h2>
    殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)......不斷前行。
  </p>
  </body> 
  </html>

就是在<body></body>中添加四個(gè)<a></a>標(biāo)簽來寫入標(biāo)題，并列寫入一個(gè)<p></p>標(biāo)簽，并在<p></p>標(biāo)簽中添加文字內(nèi)容和<h2></h2>標(biāo)簽。這時(shí)需要注意的是，<h2></h2>中還要用<a></a>標(biāo)簽夾住標(biāo)題。

頁面效果如下：

下面我們來添加文章內(nèi)部鏈接

添加文章內(nèi)部鏈接需要一前一后兩個(gè)<a></a>標(biāo)簽。一個(gè)是目錄中的<a></a>,如圖：

一個(gè)是正文中的標(biāo)題上的<a></a>,如圖：

添加內(nèi)部鏈接的辦法非常簡(jiǎn)單，首先我們把目錄中的標(biāo)題<a></a>標(biāo)簽稱為"召喚者"。把正文中的標(biāo)題中的<a></a>標(biāo)簽稱為"被召喚者"。如果您學(xué)過《》這篇教程就會(huì)知道，一個(gè)標(biāo)簽召喚或調(diào)用另一個(gè)標(biāo)簽需要能叫出被調(diào)用標(biāo)簽的名字！

所以先要給"被召喚者"起名字，起名字的方法有兩種，一種是name=""，還有一種是id=""，建議大家都寫上，因?yàn)橛械臑g覽器不支持name屬性。具體寫法如下：

<h2><a name="chapter1" id="chapter1">試飛進(jìn)程</a></h2>

在"召喚者"<a>標(biāo)簽中使用href屬性來叫出"被召喚者"的名字！示例代碼如下：需要在引號(hào)中添加#后再寫名字。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文內(nèi)鏈接</title>
  </head> 
  <body >
  <a href="#chapter1">試飛進(jìn)程</a><!--看這里-->
  <a>研制情況</a>
  <a>服役動(dòng)態(tài)</a>
  <a>總體評(píng)價(jià)</a>
  </body> 
  </html>

<a>標(biāo)簽有點(diǎn)懶，只叫名字的話它會(huì)假裝聽不見，所以還要具體描述它的特征，讓它不好意思偷懶，也就是前后兩個(gè)<a></a>標(biāo)簽中間夾的文字內(nèi)容要一致，比如上文中的兩個(gè)<a>中間的內(nèi)容都是"試飛進(jìn)程"。如果字不一樣，休想叫得動(dòng)"被召喚者"。

效果如下：

點(diǎn)擊后，試飛進(jìn)程標(biāo)簽跳到了視窗的最頂端，如圖：這種頂在視窗頂端的顯示的方式我們稱之為"置頂"。

下面我們使用這個(gè)方法，為剩下的標(biāo)題添加頁面內(nèi)鏈接。

打開外部頁面中指定信息位置的方法

首先，我們復(fù)制一下這個(gè)頁面文件命名為"打開外部頁面文件指定位置.html"，然后刪掉<p></p>和其中內(nèi)容。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>打開外部頁面文件指定位置</title>
  </head> 
  <body >
  <a href="#chapter1">試飛進(jìn)程</a>
  <a href="#chapter2">研制情況</a>
  <a href="#chapter3">服役動(dòng)態(tài)</a>
  <a href="#chapter4">總體評(píng)價(jià)</a>
  </body> 
  </html>

方法非常簡(jiǎn)單，在href中添加外部頁面路徑即可！示例代碼如下：

<a href="文內(nèi)鏈接ceshi.html#chapter1">試飛進(jìn)程</a>

依次添加后，頁面效果如下：

點(diǎn)擊其中一個(gè)標(biāo)題"研制情況"，頁面跳轉(zhuǎn)，如圖：

這里，置頂?shù)膯栴}就出現(xiàn)了，如果我們的文章目錄一直在視圖的頂部，每次點(diǎn)擊頁面內(nèi)鏈接時(shí)，頂部的目錄就會(huì)和標(biāo)題重疊，非常不美觀，解決這個(gè)問題就要涉及到<div>布局的應(yīng)用，我們以后再說。

OK！今天我們的內(nèi)容結(jié)束了，下一次學(xué)習(xí)圖片映射鏈接功能。

喜歡的朋友請(qǐng)關(guān)注我，點(diǎn)贊也會(huì)讓我動(dòng)力滿滿。

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

TML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。

幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。

實(shí)例

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="/index.html">本文本</a> 是一個(gè)指向本網(wǎng)站中的一個(gè)頁面的鏈接。</p>

<p><a >本文本</a> 是一個(gè)指向萬維網(wǎng)上的頁面的鏈接。</p>

</body>

</html>

[/demo]

本例演示如何在 HTML 文檔中創(chuàng)建鏈接。

將圖像作為鏈接

[demo]

<html>

<head>

</head>

<body>

<p>

您也可以使用圖像來作鏈接：

</a>

</p>

</body>

</html>

[/demo]

本例演示如何使用圖像作為鏈接。

（可以在本頁底端找到更多實(shí)例）

HTML 超鏈接（鏈接）

當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>

我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。

有兩種使用 <a> 標(biāo)簽的方式：

通過使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接

通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽

什么是超文本？

標(biāo)記語言的真正威力在于其收集能力，它可以將收集來的文檔組合成一個(gè)完整的信息庫，并且可以將文檔庫與世界上的其他文檔集合鏈接起來。

這樣的話，讀者不僅可以完全控制文檔在屏幕上的顯示，還可以通過超鏈接來控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它將整個(gè) Web 網(wǎng)絡(luò)連接起來。

超文本的基礎(chǔ)知識(shí)

超文本的基本特征就是可以超鏈接文檔；你可以指向其他位置，該位置可以在當(dāng)前的文檔中、局域網(wǎng)中的其他文檔，也可以在因特網(wǎng)上的任何位置的文檔中。這些文檔組成了一個(gè)雜亂的信息網(wǎng)。目標(biāo)文檔通常與其來源有某些關(guān)聯(lián)，并且豐富了來源；來源中的鏈接元素則將這種關(guān)系傳遞給瀏覽者。

超鏈接可以用于各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標(biāo)或在鍵盤上按下按鍵，從而選擇并自動(dòng)跳轉(zhuǎn)到文檔中自己感興趣的那個(gè)主題，或跳轉(zhuǎn)到世界上某處完全不同的集合中的某個(gè)文檔。

超鏈接還可以向?yàn)g覽者指出有關(guān)文檔中某個(gè)主題的更多信息。例如，“如果您想了解更詳細(xì)的信息，請(qǐng)參閱某某頁面。”。作者可以使用超鏈接來減少重復(fù)信息。例如，我們建議創(chuàng)作者在每個(gè)文檔中都簽署上自己的姓名。這樣就可以使用一個(gè)將名字和另一個(gè)包含地址、電話號(hào)碼等信息的單獨(dú)文檔鏈接起來的超鏈接，而不必在每個(gè)文檔中都包含完整的聯(lián)系信息。

超鏈接（hyper text），或者按照標(biāo)準(zhǔn)叫法稱為錨（anchor），是使用 <a> 標(biāo)簽標(biāo)記的，可以用兩種方式表示。錨的一種類型是在文檔中創(chuàng)建一個(gè)熱點(diǎn)，當(dāng)用戶激活或選中（通常是使用鼠標(biāo)）這個(gè)熱點(diǎn)時(shí)，會(huì)導(dǎo)致瀏覽器進(jìn)行鏈接。瀏覽器會(huì)自動(dòng)加載并顯示同一文檔或其他文檔中的某個(gè)部分，或觸發(fā)某些與因特網(wǎng)服務(wù)相關(guān)的操作，例如發(fā)送電子郵件或下載特殊文件等。錨的另一種類型會(huì)在文檔中創(chuàng)建一個(gè)標(biāo)記，該標(biāo)記可以被超鏈接引用。

還有一些與超鏈接相關(guān)聯(lián)的鼠標(biāo)相關(guān)事件。這些事件與 JavaScript 結(jié)合使用可以產(chǎn)生一些令人激動(dòng)的效果。

注釋

錨的這兩種類型都使用同樣的標(biāo)簽；也許這就是它們擁有同樣的名稱的原因。但是我們發(fā)現(xiàn)，如果將它們區(qū)分開，把提供熱點(diǎn)和超鏈接地址的錨看作“鏈接”，而用于標(biāo)記文檔的目標(biāo)部分的錨稱為“錨”，那么您將更容易理解這兩種類型的錨。

HTML 鏈接語法

鏈接的 HTML 代碼很簡(jiǎn)單。它類似這樣：

href 屬性規(guī)定鏈接的目標(biāo)。

開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來顯示。

實(shí)例

<a >Visit W3School</a>

上面這行代碼顯示為：Visit W3School

點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到 W3School 的首頁。

提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會(huì)在新窗口打開文檔：

<a target="_blank">Visit W3School!</a>

[demo]

<html>

<head>

</head>

<body>

<a target="_blank">Visit W3School!</a>

<p>如果把鏈接的 target 屬性設(shè)置為 "_blank"，該鏈接會(huì)在新窗口中打開。</p>

</body>

</html>

[/demo]

HTML 鏈接 - name 屬性

name 屬性規(guī)定錨（anchor）的名稱。

您可以使用 name 屬性創(chuàng)建 HTML 頁面中的書簽。

書簽不會(huì)以任何特殊方式顯示，它對(duì)讀者是不可見的。

當(dāng)使用命名錨（named anchors）時(shí)，我們可以創(chuàng)建直接跳至該命名錨（比如頁面中某個(gè)小節(jié)）的鏈接，這樣使用者就無需不停地滾動(dòng)頁面來尋找他們需要的信息了。

命名錨的語法：

<a name="label">錨（顯示在頁面上的文本）</a>

提示：錨的名稱可以是任何你喜歡的名字。

提示：您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。

實(shí)例

首先，我們?cè)?HTML 文檔中對(duì)錨進(jìn)行命名（創(chuàng)建一個(gè)書簽）：

<a name="tips">基本的注意事項(xiàng) - 有用的提示</a>

然后，我們?cè)谕粋€(gè)文檔中創(chuàng)建指向該錨的鏈接：

<a href="#tips">有用的提示</a>

您也可以在其他頁面中創(chuàng)建指向該錨的鏈接：

<a >有用的提示</a>

在上面的代碼中，我們將 # 符號(hào)和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個(gè)命名錨了。

基本的注意事項(xiàng) - 有用的提示：

注釋：請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：。

提示：命名錨經(jīng)常用于在大型文檔開始位置上創(chuàng)建目錄。可以為每個(gè)章節(jié)賦予一個(gè)命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問百度百科，您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式。

提示：假如瀏覽器找不到已定義的命名錨，那么就會(huì)定位到文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。

更多實(shí)例

在新的瀏覽器窗口打開鏈接

[demo]

<html>

<head>

</head>

<body>

<a target="_blank">Visit W3School!</a>

<p>如果把鏈接的 target 屬性設(shè)置為 "_blank"，該鏈接會(huì)在新窗口中打開。</p>

</body>

</html>

[/demo]

本例演示如何在新窗口打開一個(gè)頁面，這樣的話訪問者就無需離開你的站點(diǎn)了。

鏈接到同一個(gè)頁面的不同位置

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<h2>Chapter 1</h2>