HTML 鏈接

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

HTML 鏈接

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

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

HTML 超鏈接（鏈接）

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

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

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

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

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

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

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

HTML 鏈接語(yǔ)法

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

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

實(shí)例

上面這行代碼顯示為：: 訪問(wèn)菜鳥(niǎo)教程

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

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

HTML 鏈接 - target 屬性

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

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

實(shí)例

HTML 鏈接- id 屬性

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

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

實(shí)例

在HTML文檔中插入ID:

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

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

<a href="#tips">訪問(wèn)有用的提示部分</a>

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

<a >

訪問(wèn)有用的提示部分</a>

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

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

圖片鏈接

如何使用圖片鏈接。

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

如何使用書簽

跳出框架

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

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

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

建電子郵件鏈接 2

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

HTML 鏈接標(biāo)簽

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

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

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實(shí)現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點(diǎn)內(nèi)容。

1.認(rèn)識(shí)<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個(gè)html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過(guò)<map>的名字來(lái)驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時(shí)要加#。這個(gè)在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來(lái)劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來(lái)劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個(gè)值。

分別添加三個(gè)形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個(gè)參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個(gè)平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對(duì)！注意是“對(duì)”！從左到右，兩個(gè)數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個(gè)三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長(zhǎng)寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

這時(shí)，大家會(huì)有一個(gè)問(wèn)題：如何才能知道圖像中某個(gè)像素點(diǎn)的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個(gè)問(wèn)題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開(kāi)源免費(fèi)的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開(kāi)，界面如下：

點(diǎn)擊“文件”找到“打開(kāi)”：

選擇要打開(kāi)的圖片名字：

點(diǎn)擊名稱后，右邊會(huì)有圖像預(yù)覽，點(diǎn)擊“打開(kāi)”即可：

打開(kāi)后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會(huì)顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請(qǐng)?jiān)诳臻e時(shí)找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過(guò)鏈接區(qū)域時(shí)提示讀者，如下：

title="殲20氣動(dòng)外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時(shí)還有一些注意事項(xiàng)，我們下次再詳細(xì)討論。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚師兄，一起精研技藝。

TML 超鏈接（鏈接）

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

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

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

通過(guò)使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接
通過(guò)使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽

HTML 鏈接語(yǔ)法

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

<a href="url">Link text</a>

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

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

實(shí)例

<a >百度</a>

上面這行代碼顯示為：百度

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

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

HTML 鏈接 - target 屬性

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

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

<a  target="_blank">百度</a>

HTML 鏈接 - name 屬性

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

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

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

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

命名錨的語(yǔ)法：

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

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

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

實(shí)例

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

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

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

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

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

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

在新的瀏覽器窗口打開(kāi)鏈接

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

<html>
<body>
<a  target="_blank">百度</a>
<p>如果把鏈接的 target 屬性設(shè)置為 "_blank"，該鏈接會(huì)在新窗口中打開(kāi)。</p>
</body>
</html>
?

HTML基礎(chǔ)教程：超鏈接的使用

在線咨詢

上一篇：MailBee.NET Objects顯示HTML/純文本郵件教程（二）：在桌面應(yīng)用程序中顯示
下一篇：HTML界的“小飛人”-詳解Canvas優(yōu)越性能和實(shí)際應(yīng)用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML 鏈接

圖片添加區(qū)域鏈接的基本寫法

目錄

TML 超鏈接（鏈接）

HTML 鏈接語(yǔ)法

HTML 鏈接 - target 屬性

HTML 鏈接 - name 屬性

在新的瀏覽器窗口打開(kāi)鏈接

您的項(xiàng)目需求