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>

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

如果想去掉下划线，可以使用设置"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标签(超链接)的使用的更多相关文章

  1. Struts2中的链接标签 <s:url>和<s:a>---在action中获取jsp表单提交的参数(转)

    转自:http://sgl124764903.iteye.com/blog/444183 1.普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page ...

  2. html中的a标签特例讲解

    将自己的博客写成了一个大杂烩了,遇见啥问题就写啥问题.但是当看见自己网页的成品就特别的开心. 还记得看见过的一个故事,说是收费的东西好还是免费的东西好,有一个答案是最让我记忆深刻的.回复的一个答案是: ...

  3. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  4. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  5. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  6. HTML中body相关标签-02

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  7. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  8. HTML_body中常用的标签部分

    meta: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

  9. struts2中的s标签

    那就从简单的标签说起吧!1.x中常用的标签只有4中html.bean.logic.tiles 而struts2.0里的标签却没有分类,只用在jsp头文件加上 <%@ taglib prefix= ...

随机推荐

  1. Spring IOC容器创建对象的方式

    一.无参构造函数创建                                                                            我们用Spring创建Stu ...

  2. linux下ftp的配置

    最近公司要用到ftp,小菜鸡百度了一下教程,自己也总结一下 现在随便百度都是vsftpd的服务,所以这里我也是用vsftp 1.检测或安装vsftp 首先检查一下你的主机是否含有vsftp服务,关于r ...

  3. python爬某个网站的图片

    # _*_ coding: gbk _*_ import urllib import urllib2 import re class Spider: def getImage(self,html): ...

  4. 使用css3 filter 实现移入背景变色效果

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  5. Java，来源于大神

    也许你学习了那么久的Java了,但如果有人问你什么是JavaEE?你会怎么回答他呢?在此我来谈谈关于JavaEE的相关技术.(仅是个人见解) 在谈JavaEE时,我们首先来了解一下Java平台.目前, ...

  6. eclipse项目部署路径

    1.项目名点击右键 2.选择Build Path   ------>Configure Build Path... 3.选择Source  ----->Default output fol ...

  7. SNMP Message Format - SNMP Tutorial

    30.10 SNMP Message Format Unlike most TCP/IP protocols, SNMP messages do not have fixed fields. Inst ...

  8. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. hdu4790 Just Random （数学？）

    acm.hdu.edu.cn/showproblem.php?pid=4790 题意:x随机取a~b,y随机取c~d,求(x+y)mod p = m 的概率.(结果用分数表示) 题解: 数学概率题,运 ...

  10. 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化

    微信服务号模板消息可以向用户发送重要的服务通知,如信用卡刷卡通知,商品购买成功通知等.昨日,微信团队发布公告称模板消息新增“设置行业”和“添加模板”接口及细节优化,详细变动如下 模板消息[业务通知]自 ...