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. Ubuntu 14 設定 遠端連線，讓別台電腦可以連線進來

    Ubuntu 14 需 disable 加密,方可 遠端連線 此台電腦 xxx@xxx-ThinkPad-T460p:~$ gsettings set org.gnome.Vino require-e ...

  2. Linux任务调度进程crontab的使用方法和注意事项

    参考文章:Linux任务调度进程crond命令的使用方法和注意事项 一.crond简介 概念 crond的概念和crontab是不可分割的.crontab是一个命令,常见于Unix和类Unix的操作系 ...

  3. 递推 hdu 2048

    t 关于错排 共n个数 第n个 和一个交换  其他n-2错排  (n-1)*z[n-2]; n-1个错排 第n个和n-1个交换    (n-1)*z[n-1]; 求和 然后概率的话要除n! 一个一个除 ...

  4. BZOJ 1432: [ZJOI2009]Function

    1432: [ZJOI2009]Function Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1046  Solved: 765[Submit][Sta ...

  5. JAVA 技术手册 卷1 第十四章『多线程』 读书摘要

    什么是线程 进程受CPU时间片的轮转调度,进而予人多任务并发的感觉. 线程在更低层次上扩展多任务概念,一个进程通常包含多个线程. 进程各自数据独立,而线程共享数据. 数据独立使进程相互通信变得繁难,共 ...

  6. POJ2763 Housewife Wind

      Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 9701   Accepted: 2661 Description Aft ...

  7. 框架集（Framesets）

    1.Frameset的使用 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只 要 <FRAMESET> <FRAME> 即可,而所有框架标记 要放在一个总起的 htm ...

  8. python内置函数

    python内置函数 官方文档:点击 在这里我只列举一些常见的内置函数用法 1.abs()[求数字的绝对值] >>> abs(-13) 13 2.all() 判断所有集合元素都为真的 ...

  9. EmguCV(OpenCV)实现高效显示视频（YUV）叠加包括汉字

    视频处理中,往往需要在上面增加文字包括汉字英文字母数字标点等,Emgu.CV/opencv 绘图 线面文字包括中文 这篇里也有相关介绍,但是这篇里根据逐像素修改rgb值的方法效率太低 查了很多资料,基 ...

  10. XML编码utf-8有中文无法解析或乱码 C#

    XML的encoding="UTF-8" ,含有中文的话(部分)会出现乱码. 网上还是很多这类问题跟解决办法的. 表现为用ie或者infopath之类的xml软件打不开这个xml, ...