一、<a> 标签的样式

在所有浏览器中，链接的默认外观是：

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

我们可以使用CSS伪类向文本超链接添加复杂而多样的样式，代码如下：

    <style>

        a{text-decoration: none;}

        /* :link 链接默认展示

           :visited 访问过后

           :hover 鼠标悬停

           :active 鼠标按下 */

        a:link{color: red;}

        a:visited{color: blue;}

        a:hover{color: green;}

        a:active{color: orange;}

    </style>

    <body>

        <a href="www.cnblogs.com/xiangxuemei">我的个人博客</a>

    </body>

二、<a> 标签超链接的用法

　　1、基础用法：成对出现，href属性定义链接指向的页面的 URL

<a href="http://www.cnblogs.com">博客园</a>

　　2、图片链接：点击图片跳转（俗称a包图）

<a href="https://www.baidu.com/">

    <img  src="baidu.jpg" />

</a>

　　3、锚点：链接到同一个页面的不同位置（href属性定义对应标签的ID值即可）

<body>

    <a href="#one">第一章</a>

    <a href="#two">第二章</a>

    <a href="#three">第三章</a>

    <div id="one" style="height: 2000px;">第一章</div>

    <div id="two" style="height: 2000px;">第二章</div>

    <div id="three" style="height: 2000px;">第三章</div>

</body>

　　4、在新的浏览器窗口打开链接（访问者就无需离开你的站点）

<a href="http://www.cnblogs.com" target="_blank">博客园</a>

　　5、链接邮件（在安装邮件客户端程序后才能工作）

<a href="mailto:xiangxuemei@qq.com">发送邮件</a>

　　　　用户点击发送邮件后显示如下图：

三、<a>标签的兼容

　　1、所有浏览器都支持 <a> 标签。

　　2、属性兼容情况如下图：

<a> 标签详解的更多相关文章

  1. <input type="file"> 标签详解

    详见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#attr-multiple 使用 type=" ...

  2. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

  3. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  4. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  5. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  6. 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android WebView 不支持 H5 input type="file" 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...

  8. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  9. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  10. html标签详解（2）

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

随机推荐

  1. C#-----线程安全的ConcurrentQueue<T>队列

     ConcurrentQueue<T>队列是一个高效的线程安全的队列,是.Net Framework 4.0,System.Collections.Concurrent命名空间下的一个数据 ...

  2. Azure上搭建ActiveMQ集群-基于ZooKeeper配置ActiveMQ高可用性集群

    ActiveMQ从5.9.0版本开始,集群实现方式取消了传统的Master-Slave方式,增加了基于ZooKeeper+LevelDB的实现方式. 本文主要介绍了在Windows环境下配置基于Zoo ...

  3. Fiddler使用教程（转）

    Fiddler是最强大最好用的Web调试工具之一,你对HTTP协议越了解, 你就能越掌握Fiddler的使用方法.你越使用Fiddler,就越能帮助你了解HTTP协议.Fiddler无论对开发人员或者 ...

  4. python 2 和 python 3 的区别

    p2:重复代码语言不统一不支持中文input() 输入数字 获取数字输入字符串必须自己手动写引号raw_input 和p3中的 input 一样print可以加括号 也可以不加括号p2 中除法获取到的 ...

  5. tensorflow学习笔记3：写一个mnist rpc服务

    本篇做一个没有实用价值的mnist rpc服务,重点记录我在调试整合tensorflow和opencv时遇到的问题: 准备模型 mnist的基础模型结构就使用tensorflow tutorial给的 ...

  6. Winform 加载datagridview

    string str = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Test;Integrated Security=True ...

  7. Mask rcn nanchor部分理解

    Anchors Mask 生成锚框本质与SSD一样中心点个数等于特征层像素数框体生成围绕中心点Bbox的坐标是要归一化到0~1之间的,都是相对于输入图片的大小.基本生成方式:H乘np.sqrt(anc ...

  8. 编译原理 #03# 龙书中缀转后缀JS实现版

    // 来自龙书第2章2.5小节-简单表达式的翻译器 笔记 既然是语法制导翻译(Syntax-directed translation),那么最重要的东西当然是描述该语言语法的文法,以下为中缀表达式文法 ...

  9. domain

    babibobucecicudadedidufafugeguhehujijukakekulalelilumimomunapapipopuqiqurerirusasesisutatetituwawowu ...

  10. 【mac微信小助手】WeChatPlugin使用教程！

    微信小助手 mac版集微信防撤回和微信多开等诸多功能于一身,可以有效的阻止朋友微信撤回消息,还能开启无手机验证登录,再也不用每次登录扫码验证啦,非常方便!   wechatplugin mac版安装教 ...