超鏈接是網頁中最常用的對象，每個網頁通過超鏈接相互聯系在一起，從而構成一個完整的網站。而根據路徑的不同，超鏈接可以分為以下三類：
內部鏈接：
內部鏈接所鏈接的目標一般位於同一個網站中，對於內部鏈接來說，可以使用相對路徑和絕對路徑。所謂的相對路徑就是URL中沒有指定超鏈接的協議和互聯網的位置，僅指定相對位置關系，
例如上圖中的menu.hrml和login.html在同一目錄下，使用即可使用。
錨點鏈接：
錨點鏈接是一個特殊的鏈接方式，實際上它是在內部鏈接或外部鏈接的基礎上增加錨點標記后綴。
例如http://www.mysite.cn/web2_nav/index.html#anchor 表示跳轉到index頁面的標記為anchor的錨點處。
外部鏈接：
外部鏈接的目標一般為外部網站目標，當然也可以是網站內部目標，當然，外部鏈接一般都要指定鏈接說使用的完整地址和協議。例http://www.mysite.cn/web2_nav/index.html。其中http為協議，www.mysite.cn為具體位置，web2_nav/index.html為目標基於站點的相對位置。
為超鏈接設計樣式：
超鏈接的狀態有：
（1）a:link -普通的、未被訪問的鏈接
（2）a:visited -用戶已訪問的鏈接
（3）a:hover -鼠標指針位於鏈接的上方
（4）a:active -鏈接被鼠標點擊時
例如：
<style type="text/css">
a:link{color: aqua;}
a:visited{color: aquamarine;}
a:hover{color: #29962A;}
a:active{color: burlywood;}
</style>
<ul class="p1">
<li><a href="#" class="a1">首頁</a></li>
<li><a href="#" class="a2">微博</a></li>
<li><a href="#" class="a3">知乎</a></li>
<li><a href="#" class="a4">QQ</a></li>
</ul>
<ul class="p2">
<li><a href="#" class="a1">其他</a></li>
<li><a href="#" class="a2">幫助</a></li>
<li><a href="#" class="a3">友情鏈接</a></li>
</ul>
效果：
需要注意的是，當為超鏈接設計樣式時，必須按照以下規則：
1.a:hover必須位於a:link和a:visited之后。
2.a:active必須位於a:hover之后。
除此之外，我們還可以裝飾超鏈接的下划線和背景色：
background-color 屬性規定鏈接的背景色：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
實例：
<style>
a:link {text-decoration:none;} /* 未被訪問的鏈接 */
a:visited {text-decoration:none;} /* 已被訪問的鏈接 */
a:hover {text-decoration:underline;} /* 鼠標指針移動到鏈接上 */
a:active {text-decoration:underline;} /* 正在被點擊的鏈接 */
</style>
<body>
<p><b><a href="/index.html" target="_blank">這是一個鏈接</a></b></p>
</body>
效果：
background-color 屬性規定鏈接的背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
<!DOCTYPE html>
<html>
<head>
<style>
a:link {background-color:#B2FF99;} /* 未被訪問的鏈接 */
a:visited {background-color:#FFFF85;} /* 已被訪問的鏈接 */
a:hover {background-color:#FF704D;} /* 鼠標指針移動到鏈接上 */
a:active {background-color:#FF704D;} /* 正在被點擊的鏈接 */
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">W3School</a></b></p>
<p><b><a href="http://wwf.panda.org/" target="_blank">WWF</a></b></p>
</body>
</html>
實例：
<!DOCTYPE html>
<html>
<head>
<style>
a.1:link {color:#ff0000;}
a.1:visited {color:#0000ff;}
a.1:hover {color:#ffcc00;}
a.2:link {color:#ff0000;}
a.2:visited {color:#0000ff;}
a.2:hover {font-size:150%;}
a.3:link {color:#ff0000;}
a.3:visited {color:#0000ff;}
a.3:hover {background:#66ff66;}
a.4:link {color:#ff0000;}
a.4:visited {color:#0000ff;}
a.4:hover {font-family:'微軟雅黑';}
a.5:link {color:#ff0000;text-decoration:none;}
a.5:visited {color:#0000ff;text-decoration:none;}
a.5:hover {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a class="1" href="/index.html" target="_blank">這個鏈接會改變顏色</a></b></p>
<p><b><a class="2" href="/index.html" target="_blank">這個鏈接會改變字體尺寸</a></b></p>
<p><b><a class="3" href="/index.html" target="_blank">這個鏈接會改變背景色</a></b></p>
<p><b><a class="4" href="/index.html" target="_blank">這個鏈接會改變字體</a></b></p>
<p><b><a class="5" href="/index.html" target="_blank">這個鏈接會改變文本的裝飾</a></b></p>
</body>
</html>
