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

時間 2019-12-08

標籤 WEB基礎 html css 基礎入門連接欄目 HTML 简体版

原文原文鏈接

超連接--文字連接

超連接【hyperlink】是網頁中最爲常見的元素之一，咱們幾乎能夠在全部的網站頁面中找到超連接。每一個網站都不止一個頁面，這些頁面就是利用超連接進行串接。超連接幫咱們實現了網頁與網頁之間的跳轉。css

文字連接：咱們可使用超連接標籤<a><a/>實現文字連接。設置了連接的文字默認樣式爲藍色文字，有下劃線。<a><a/>標籤實現超連接有兩個屬性須要設置：html

🅰 href屬性：表示點擊該超連接將要跳轉到的頁面地址，該地址能夠是當前頁面的相對地址，也能夠直接跳轉到另一個網站。瀏覽器

🅱 target屬性：該屬性設置超連接頁面的打開方式。target屬性有四個取值，這裏，只說明經常使用的兩個，【_self】是默認值，表示在瀏覽器當前窗口打開超連接的頁面，【_blank】表示新建一個空白瀏覽器窗口，在新的窗口打開超連接頁面。字體

來個例子看看：新建三個HTML頁面文件，網頁1裏面設置三個超連接，分別連接到百度、網頁二、網頁3。網站

網頁一代碼：ui

<!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>

網頁二代碼：spa

<!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>

網頁三代碼：3d

<!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前面要加上「#」號。code

示例代碼：

<!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>