HTML超鏈接標簽

87642 閱讀 0 評論 0 點贊

一、什么是超鏈接

超鏈接屬于網(wǎng)頁的一部分，它是讓網(wǎng)頁和網(wǎng)頁連接的元素。只有通過超鏈接把多個網(wǎng)頁連接起來之后才能算得上是一個網(wǎng)站。超鏈接是指從一個網(wǎng)頁指向另一個目標的連接關(guān)系，目標可以是網(wǎng)頁、位置（相同網(wǎng)頁的不同位置）、圖片等等。在網(wǎng)頁中用來超鏈接的對象，可以是文本、圖片等。

二、超鏈接代碼a標簽

a標簽是實現(xiàn)超鏈接的html代碼，它是用來定義超鏈接的。接下來我們就一起來看一看a標簽是怎么用的。

語法格式：超鏈接對象

說明：href是a標簽中最重要的一個屬性，指定了連接的目標，如果沒有該屬性，不能使用hreflang、media、rel、target 和 type屬性。

三、a標簽的常用屬性

屬性	作用
href	用于指定鏈接目標的url地址，該屬性為超鏈接標簽的必須屬性，當為標簽應(yīng)用href屬性時，它就具有了超鏈接的功能
target	用于指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新窗口中打開方式

說明：a標簽除了href屬性和target屬性這兩個常用屬性外，還有很多屬性，比如：download、name、rel等等屬性。不常用就不介紹了，有興趣的朋友可以自行研究一下。

1. 超鏈接的語法規(guī)范

<a href="http://www.sztianhecheng.cn/" target="_blank">C語言網(wǎng)鏈接</ a>

其中a是anchor的縮寫，中文意思是：錨

其中href用于指定目標頁面的url地址**(不可省略)**，標簽擁有href屬性時，才有了超鏈接功能。

target用于指定目標頁面的打開方式，可在引號""中輸入_self為在當前頁面中打開，輸入_blank為在新窗口中打開，target可以省略不寫，不寫默認值為_self，即為在默認窗口中打開。

2. 超鏈接分類

（1）外部鏈接，當前項目外部的鏈接：

<a href="http://www.sztianhecheng.cn/" target="_blank">C語言網(wǎng)鏈接</ a>

（2）內(nèi)部鏈接，當前目錄內(nèi)部的鏈接也可以說是本項目不同頁面之間的鏈接：

<a herf="index.html" target="_blank">首頁</a><br />

（3）空鏈接，即當前項目尚未完成的頁面，用#代替開發(fā)完成之后可以替換回來，點擊之后會再次打開當前頁面：

<a href="#" target="_blank">未完成的頁面</a><br />

（4）下載鏈接：當內(nèi)部鏈接的地址時一個文件或者壓縮文件時：

<a href="新建 Microsoft Excel 工作表.xlsx">下載文件</a><br />
<a href="新建 Microsoft Excel 工作表.zip">下載文件</a><br />

（5）網(wǎng)頁元素鏈接：在網(wǎng)頁中的各種元素，如文本，圖像，表格，音頻，視頻等都可以作為超鏈接：

（6）錨點鏈接：點擊該鏈接可以迅速定位到頁面中的某個位置(作用和目錄的鏈接類似)：

在鏈接文本中的href屬性中，設(shè)置屬性值為"#"+文本的形式，如：
<a href="#錨點">這是一個錨點</a>
找到目標位置標簽，里面添加一個ID屬性 = 剛才的屬性值，如：
<h3 id="錨點">錨點</h3>

3.<a> 標簽的默認樣式

瀏覽器會為 <a> 標簽設(shè)置一些默認樣式。

（1）鼠標樣式

當鼠標移入鏈接區(qū)域時，會變成一只小手；當鼠標移出鏈接區(qū)域時，會變回箭頭形狀。

（2）顏色及下劃線

超鏈接被點擊之前為藍色，超鏈接被點擊之后變成紫色。超鏈接默認帶有下劃線，下劃線顏色和文本顏色保持一致。

瀏覽器根據(jù)歷史記錄來判斷超鏈接是否被點擊過，如果 href 屬性和歷史記錄中的某條 URL 重合，那么說明該鏈接被點擊了。清空瀏覽器的歷史記錄會讓超鏈接的顏色再次變回藍色。

【示例】HTML 超鏈接的多種形式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;標簽演示</title>
</head>
<body>
    <p>
        <a href="http://www.sztianhecheng.cn/course/html/" target="_blank">HTML教程（新窗口打開）</a><br>
        <a href="http://www.sztianhecheng.cn/course/css/">CSS教程（當前窗口打開）</a><br>
        <a href="http://www.sztianhecheng.cn/course/algorithm/">算法競賽教程（被點擊過）</a>
    </p>
</body>
</html>

效果展示如下：

超鏈接