html中的a标签(超链接)的使用

a标签即超链接，用于从一张页面链接到另一张页面。其最重要的属性是href属性，它指示链接的目标。

例如：

<a href="http://www.baidu.com/">这是a标签</a>

1、样式：

a标签的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

当然我们可以通过CSS样式自定义其外观，还有a标签的一些状态，分别是link、visited、hover、active，但是他们使用是有一定的顺序的，否则可能有些会没有出现预期的效果，下面是显示正确的顺序实例：

<style type="text/css">
    a:link {color: #000;} /* 未访问的链接 */
    a:visited {color: #F00;} /* 已访问的链接 */
    a:hover{color: #0F0;} /* 鼠标在链接上 */ 
    a:active {color: #00F;} /* 点击激活链接：在你点击该链接后，页面正在转向新地址的时候，链接显示此颜色 */
</style>

下面是一个错误顺序的实例，这个顺序不能正常显示active的颜色：

<style type="text/css">
/* 这个顺序不能正常显示active的颜色*/
    a:link{color:#000;}   
    a:active{color:#f00;}   
    a:visited{color:#0ff;}   
    a:hover{color:#0f0;} 
</style>

View Code

还有其他的错误顺序就不一一列举了。

如果想去掉下划线，可以使用设置"text-decoration"属性为"none" :

<style type="text/css">
/* 去掉a标签的下划线 */
    a{text-decoration:none;}
</style>

2、实例：

(1) 创建超级链接

<!DOCTYPE html>
<html>
<head>
<title>a标签测试</title>
<meta charset="utf-8">
</head>
<body>
<a href="index.html">指向本网站中的一个html页面</a>
<br>
<a href="http://www.baidu.com/">指向其他网站中的一个页面</a>
</body>
</html>

(2) 为图像添加超链接

<!DOCTYPE html>
<html>
<head>
<title>a标签测试</title>
<meta charset="utf-8">
</head>
<body>
    使用a标签给图像做超链接：<br>
<a href="https://www.baidu.com/">
<img src="https://www.baidu.com/img/bd_logo1.png" />
</a>
</body>
</html>

(3) 跳到当前页面内的指定位置

<!DOCTYPE html>
<html>
<head>
<title>a标签测试</title>
<meta charset="utf-8">
<style type="text/css">
        p {margin-top: 80px; }
</style>
</head>
<body>
<a href="#p6">跳到p6</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p><a name="p6"></a>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
<p>p11</p>
<p>p12</p>
</body>
</html>

(4) 在新窗口打开链接

<!DOCTYPE html>
<html>
<head>
<title>a标签测试</title>
<meta charset="utf-8">
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">将target属性设为"_blank"，该链接会在新窗口中打开</a> 
</body>
</html>

(5) 创建电子邮件链接

<!DOCTYPE html>
<html>
<head>
<title>a标签测试</title>
<meta charset="utf-8">
</head>
<body>
<p>这是邮件链接：<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a></p>
<p><b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</p>
</body>
</html>

(6) 创建电子邮件链接2

<!DOCTYPE html>
<html>
<head>
<title>a标签测试</title>
<meta charset="utf-8">
</head>
<body>
<p>这是另一个 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<p><b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</p>
</body>
</html>

秒客网

html中的a标签(超链接)的使用

相关文章