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. 使用Extjs组件实现Top-Left-Main布局并且增加事件响应

    每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Lef ...

  2. 数据结构图文解析之：直接插入排序及其优化（二分插入排序）解析及C++实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  3. mui消息框alert，confirm，prompt，toast

    <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeB ...

  4. hdu 1410

    Ref : http://www.clanfei.com/2012/04/772.html 可推出公式: ans=sigma[C(N1-1,i)*0.5^(N1+i)] (0<=i<=N2 ...

  5. Linux下C高手成长过程

    建议学习路径:  首先先学学编辑器,vim, emacs什么的都行. 然后学make file文件,只要知道一点就行,这样就可以准备编程序了.  然后看看<C程序设计语言>K&R, ...

  6. 基于 Arduino 的 RFID 识别实验

    http://www.it165.net/embed/html/201512/3287.html 2015年12月04日(周五) 上午  博士的智能卡实验--RFID识别实验,基于51单片机: 我们的 ...

  7. 介绍对称加密的另一个算法——PBE

    除了DES,我们还知道有DESede(TripleDES,就是3DES).AES.Blowfish.RC2.RC4(ARCFOUR)等多种对称加密方式,其实现方式大同小异,这里介绍对称加密的另一个算法 ...

  8. 忍不住记录下小型的CMDB系统

  9. [Unity3D]导入模型并且设置相应的属性

    将资源拷贝到Assets中并设置 首先确保法线贴图的属性如下: 设置基本贴图和法线贴图 因为要发布到移动端,设置shader属性: 为了设置更好的反光效果,添加cubemap: 添加新的Materia ...

  10. java中的equals()方法重写

    如何java中默认的equals方法跟实际不符的话,需要重写equals方法.例如: public class TestEquals { public static void main(String[ ...