html中的a標簽(超鏈接)的使用


a標簽即超鏈接,用於從一張頁面鏈接到另一張頁面。其最重要的屬性是href屬性,它指示鏈接的目標。

例如:

<a href="http://www.baidu.com/">這是a標簽</a>

1、樣式:

a標簽的默認外觀是:

  • 未被訪問的鏈接帶有下划線而且是藍色的
  • 已被訪問的鏈接帶有下划線而且是紫色的
  • 活動鏈接帶有下划線而且是紅色的

當然我們可以通過CSS樣式自定義其外觀,還有a標簽的一些狀態,分別是link、visited、hover、active,但是他們使用是有一定的順序的,否則可能有些會沒有出現預期的效果,下面是顯示正確的順序實例:

<style type="text/css">
    a:link {color: #000;} /* 未訪問的鏈接 */
    a:visited {color: #F00;} /* 已訪問的鏈接 */
    a:hover{color: #0F0;} /* 鼠標在鏈接上 */ 
    a:active {color: #00F;} /* 點擊激活鏈接:在你點擊該鏈接后,頁面正在轉向新地址的時候,鏈接顯示此顏色 */
</style>

下面是一個錯誤順序的實例,這個順序不能正常顯示active的顏色:

<style type="text/css">
    /* 這個順序不能正常顯示active的顏色*/
    a:link{color:#000;}   
    a:active{color:#f00;}   
    a:visited{color:#0ff;}   
    a:hover{color:#0f0;} 
</style>
View Code

還有其他的錯誤順序就不一一列舉了。

 

如果想去掉下划線,可以使用設置"text-decoration"屬性為"none" :

<style type="text/css">
    /* 去掉a標簽的下划線 */
    a{text-decoration:none;}
</style>

 

2、實例:

(1) 創建超級鏈接

<!DOCTYPE html>
<html>
<head>
    <title>a標簽測試</title>
    <meta charset="utf-8">
</head>
<body>
    <a href="index.html">指向本網站中的一個html頁面</a>
    <br>
    <a href="http://www.baidu.com/">指向其他網站中的一個頁面</a>
</body>
</html>

(2) 為圖像添加超鏈接

<!DOCTYPE html>
<html>
<head>
    <title>a標簽測試</title>
    <meta charset="utf-8">
</head>
<body>
    使用a標簽給圖像做超鏈接:<br>
    <a href="https://www.baidu.com/">
        <img src="https://www.baidu.com/img/bd_logo1.png" />
    </a>
</body>
</html>

(3) 跳到當前頁面內的指定位置

<!DOCTYPE html>
<html>
<head>
    <title>a標簽測試</title>
    <meta charset="utf-8">
    <style type="text/css">
        p {margin-top: 80px; }
    </style>
</head>
<body>
    <a href="#p6">跳到p6</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p><a name="p6"></a>p6</p>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
    <p>p11</p>
    <p>p12</p>
</body>
</html>

(4) 在新窗口打開鏈接

<!DOCTYPE html>
<html>
<head>
    <title>a標簽測試</title>
    <meta charset="utf-8">
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">將target屬性設為"_blank",該鏈接會在新窗口中打開</a> 
</body>
</html>

(5) 創建電子郵件鏈接

<!DOCTYPE html>
<html>
<head>
    <title>a標簽測試</title>
    <meta charset="utf-8">
</head>
<body>
    <p>這是郵件鏈接:<a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a></p>
    <p><b>注意:</b>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。</p>
</body>
</html>

(6) 創建電子郵件鏈接2

<!DOCTYPE html>
<html>
<head>
    <title>a標簽測試</title>
    <meta charset="utf-8">
</head>
<body>
<p>這是另一個 mailto 鏈接:
    <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件!</a>
</p>
<p><b>注意:</b>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。</p>
</body>
</html>

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM