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. CentOS 7.2 安装配置mysql主从服务器

    MySQL官方压缩包安装: 1:下载mysql官方版本,此处以目前最新版本5.7.14为例,下载的64位版本文件为: mysql-5.7.14-linux-glibc2.5-x86_64.tar 2: ...

  2. mac下需要安装旧 Java SE 6 才能打开程序解决办法

    今天我在mac系统下面安装myeclipse2014(myeclipse-pro-2014-GA-offline-installer-macosx.dmg)的时候,发现显示错误: 您需要安装旧 Jav ...

  3. springMVC文件上传

    参考的地址:http://www.tuicool.com/articles/nMVjaiF 1.需要使用的jar. commons-fileupload.jar与commons-io-1.4.jar二 ...

  4. android md5加密与rsa加解密实现代码

    import java.io.UnsupportedEncodingException;import java.security.MessageDigest;import java.security. ...

  5. 树莓派系统介绍：DIetPi

    项目主页:http://fuzon.co.uk/phpbb/viewtopic.php?f=8&t=6 当前版本:V34(15年4月16日发布) DietPi是国外一个基于Raspbian的精 ...

  6. Java Web学习笔记8

    上下文参数(context-param) 由于init-param是配置在<servlet>标签里的,只能有这个Servlet来读取,因此它不是全局的参数,不能被其他的Servlet读取. ...

  7. Hbase过滤器Filter的使用心得(爬坑经验)

    Hbase 的过滤器是个好东西.. 给这种非关系型数据库本来不能复杂查询的情况得到了很好的扩展..提供了很多的帮助.. 但是Filter的种类何其之多..让人眼花缭乱.. 譬如..分页类型的PageF ...

  8. zend studio汉化

    在help菜单中选择Install New Software,在 work with栏中添加上这样的地址 http://archive.eclipse.org/technology/babel/upd ...

  9. 大熊君大话NodeJS之------（Url，QueryString，Path）模块

    一,开篇分析 这篇文章把这三个模块拿来一起说,原因是它们各自的篇幅都不是很长,其次是它们之间存在着依赖关系,所以依次介绍并且实例分析.废话不多说了,请看下面文档: (1),"Url模块&qu ...

  10. tyvj1011 传纸条

    背景 NOIP2008复赛提高组第三题 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端, ...