超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接定义的对象，才能再单击后进行跳转。
一、创建超链接
1、用<a></a>标签环绕需要被链接的对象。
1>、基本语法格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
i、href：用于指定链接目标的url（网址）地址，当<a>标签应用href属性时，他就具有了超链接功能。
ii、target：用于指定链接打开方式，_self为原窗口打开，_blank为新窗口打开。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="http://www.zcool.com.cn/" target="_self">站酷</a> target="_self"原窗口打开<br/>
<a href="http://www.baidu.com/" target="_blank">百度</a> target="_blank"新窗口打开<br/>
</body>
</html>ps:1、超链接标签本身带有默认显示样式。
2、暂时没有链接目标时，href的属性值可定义为“#”，意为空链接。
2>、图像超链接出现边框解决办法：
创建图像超链接时，在某些浏览中，图像会自动添加边框效果，影响页面美观。去掉边框最直接的方法是将边框设置为0，具体代码如下：
<a href="#"><img src="图像url" border="0"/></a>
二、锚点链接
通过创建锚点链接，用户能够直接跳到指定位置的内容，提高信息检索速度。
1、基本语法格式：<a href="#id名">内容</a>
2、href="#id名"，只要单击创建了超链接的对象就会跳到指定位置。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点链接</title>
</head>
<body>
<ul>
<li><a href="#one">李四光</a></li>
<li><a href="#two">袁隆平</a></li>
<li><a href="#three">屠呦呦</a></li>
<li><a href="#four">南仁东</a></li>
<li><a href="#five">孙家栋</a></li>
</ul>
<h3 id="one">李四光</h3>
<p>李四光1889年出生于湖北黄冈，是中国地质力学的创立者、现代地球科学和地质工作的奠基人。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="two">袁隆平</h3>
<p>袁隆平1930年出生于北京，被誉为“世界杂交水稻之父”。发明了“三系法”籼型杂交水稻，“两系法”杂交水稻。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="three">屠呦呦</h3>
<p>屠呦呦1930年出生于浙江宁波，是中国第一位获得诺贝尔科学奖的本土科学家，也是第一位获得诺贝尔医学奖的华人科学家。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="four">南仁东</h3>
<p>南仁东1945年出生于吉林辽源，被誉为中国“天眼之父”。担任FAST工程首席科学家兼总工程师。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="five">孙家栋</h3>
<p>孙家栋1929年出生于辽宁瓦房店，被誉为中国航天的“大总师”，“中国卫星之父”。</p>
</body>
</html>
三、链接伪类控制超链接
1、超链接的四种不同状态：
| 超链接标签<a>的伪类 | 描述 |
| a:link{CSS样式规则；} | 超链接默认样式 |
| a:visited{CSS样式规则；} | 超链接被访问之后的样式 |
| a:hover{CSS样式规则；} | 鼠标指针经过、悬停时超链接的样式 |
| a:active{CSS样式规则；} | 鼠标单击不放时超链接的样式 |
ps：4种伪类顺序也需按上表排列，否则定义样式可能不起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接伪类选择器</title>
<style type="text/css">
a{margin-right: :20px;}/*设置右边距为20px*/
a:link,a:visited{
color:#000; /*设置默认和被访问之后的颜色为黑色*/
text-decoration:none; /*设置<a>自带下划线效果为无*/
}
a:hover{
color:#093; /*默认样式颜色为绿色*/
text-decoration: underline; /*设置鼠标指针悬停时显示下划线*/
}
a:active{color:#FC0;} /*设置鼠标单击不放时颜色为黄色*/
</style>
</head>
<body>
<a href="#">公司首页</a>
<a href="#">公司简介</a>
<a href="#">产品介绍</a>
<a href="#">联系我们</a>
</body>
</html>