【WEB基礎】HTML & CSS 基礎入門（6）超連結

青衫煙雨客發表於2019-05-25
WebHTMLCSS

超連結--文字連結

超連結【hyperlink】是網頁中最為常見的元素之一，我們幾乎可以在所有的網站頁面中找到超連結。每個網站都不止一個頁面，這些頁面就是利用超連結進行串接。超連結幫我們實現了網頁與網頁之間的跳轉。

文字連結：我們可以使用超連結標籤<a><a/>實現文字連結。設定了連結的文字預設樣式為藍色文字，有下劃線。<a><a/>標籤實現超連結有兩個屬性需要設定：

? href屬性：表示點選該超連結將要跳轉到的頁面地址，該地址可以是當前頁面的相對地址，也可以直接跳轉到另外一個網站。

? target屬性：該屬性設定超連結頁面的開啟方式。target屬性有四個取值，這裡，只說明常用的兩個，【_self】是預設值，表示在瀏覽器當前視窗開啟超連結的頁面，【_blank】表示新建一個空白瀏覽器視窗，在新的視窗開啟超連結頁面。

來個例子看看：新建三個HTML頁面檔案，網頁1裡面設定三個超連結，分別連結到百度、網頁2、網頁3。

網頁一程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <!--第一個超連結，連結到百度，在瀏覽器新的視窗開啟-->
    <a href="http://www.baidu.com" target="_blank" >連結到百度</a>
    <!--第二個超連結，連結到網頁二，在瀏覽器新的視窗開啟-->
    <a href="網頁2.html" target="_blank">連結到網頁2</a>
    <!--第三個超連結，連結到網頁三，在瀏覽器當前視窗開啟-->
    <a href="網頁3.html" target="_self">連結到網頁3</a>
</body>
</html>

網頁二程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1>這是網頁2</h1>
</body>
</html>

網頁三程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1>這是網頁3</h1>
</body>
</html>

執行效果：

超連結--錨點連結

很多網頁文章的內容比較多，導致頁面很長，需要不斷的拖動滾動條才能找到需要的內容，我們可以用錨點連結來解決這個問題，錨點連結就是在單個頁面內部不同的位置進行跳轉，也可以理解為書籤。錨點連結的設定也很簡單，首先為目標錨點設定一個ID，然後在超連結的href屬性裡指明該ID，注意ID前面要加上“#”號。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div>
        <h3>目錄</h3><!--注意前面要加上#號-->
        <a href="#chapt1">第一章</a><br />
        <a href="#chapt2">第二章</a><br />
        <a href="#chapt3">第三章</a><br />
    </div>
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    <div id="chapt1">
        <h4>第一章</h4>
        <p>這是第一章的內容</p>
        ......<br />
        ......<br />
        ......<br />
    </div>
    <div id="chapt2">
        <h4>第二章</h4>
        <p>這是第二章的內容</p>
        ......<br />
        ......<br />
        ......<br />
    </div>
    <div id="chapt3">
        <h4>第三章</h4>
        <p>這是第三章的內容</p>
        ......<br />
        ......<br />
        ......<br />
    </div>
</body>
</html>

執行效果：

超連結的 CSS 樣式

我們可以給超連結設定一些常見的樣式，比如顏色【color】、字型【font-family】、背景【background】等。超連結還有一些特殊樣式，就是我們可以依據超連結當前的狀態設定特定的樣式。超連結有以下四種狀態：

  • a:link – 當前連結未被訪問的樣式
  • a:visited – 當前連結已被使用者訪問過的樣式
  • a:hover – 當滑鼠指標移入到連結上方的樣式
  • a:active – 當連結被滑鼠點選時的樣式

 注意，我們在定義上述樣式時，需要按照上面的順序定義，就是按照“未訪問、訪問後、滑鼠經過、滑鼠點選時”這個順序來設定，這是官方規定。通常情況下，為了突出連結，我們只設定滑鼠移入時的樣式【a:hover】。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*link1未被訪問:取消下劃線，設定綠色*/
        #link1:link {text-decoration:none; color:green}
        #link1:visited  {text-decoration:none; color:black}
        /*link1滑鼠進入:新增下劃線，設定紅色，文字變大到15pt*/
        #link1:hover {text-decoration:underline; color:red; font-size:15pt}
        #link1:active  {text-decoration:none; color:blue;}
        /*只設定link2滑鼠進入時的樣式*/
        #link2:hover {
            text-decoration:none; /*取消下劃線*/
            color:DarkGreen; /*文字顏色為深綠*/
            font-size:18pt;/*文字大小為18pt*/
            font-weight:bold;/*文字加粗*/
        }
    </style>
</head>
<body>
    <a id="link1" target="_blank" href="http://www.baidu.com">百度一下</a>
    <a id="link2" target="_blank" href="http://www.qq.com">騰訊網</a>
</body>
</html>

執行效果：

-------------------------- END --------------------------

相關文章