超鏈接--文字鏈接
超鏈接【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 --------------------------