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. C 语言学习：班级同学的博客地址列表

    这里整理出本班级同学的博客地址.请各位同学之间相互帮助,尽快将博客都建立起来. 编号 学号 姓名 Cnblogs昵称 博客地址 Coding.net 地址 1 160809401 付胤 付胤 http ...

  2. cookie被禁用session怎么办

    关闭Cookie的情况下使用Session,途径有以下几种:\ 1. 设置php.ini配置文件中的“session.use_trans_sid = 1”,或者编译时打开“--enable-trans ...

  3. 教你一招：解决windows xp系统开机出现“disk checking has been canceled”

    问题重现: 问题分析: 系统的注册表被修改了. 问题解决: 1.(临时解决)开机时,按ESC或ENTER键取消. 2.(彻底解决)修改注册表文件. Win + R 打开运行 Regedit ,进入注册 ...

  4. hihoCoder 后缀数组 重复旋律

    #1403 : 后缀数组一·重复旋律 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成 ...

  5. gcc 编译时 include 搜索路径

    这是一个不复杂的问题:但是网上很多回答都不全面:偶找了一个比较全面的(测试过): 引用http://blog.csdn.net/fjb2080/archive/2010/01/23/5247494.a ...

  6. mysql GET DIAGNOSTICS 语法

    MySQL 5.6 提供了 get diagnostic 语句来获取错误缓冲区的内容,然后把这些内容输出到不同范围域的变量里,以便我们后续灵活操作 语法如下: GET [CURRENT] DIAGNO ...

  7. 使用safari对webview进行调试

    在web开发的过程中,抓包.调试页面样式.查看请求头是很常用的技巧.其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到mac自带的浏览器Safari.所以,本文将讲解如何使用 ...

  8. diff和patch的使用、patch文件的格式解说

    为了弄懂 patch中的 p0   p1    和.orig文件是啥,找到了这篇文章! 来源:http://www.cnblogs.com/super119/archive/2010/12/18/19 ...

  9. 在 Github 上找「好东西」的方法

    使用 Github 的站内搜索,搜索: Awesome + 你的关键字

  10. 关于Spring中的<context:annotation-config/>配置

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...